/* ===========================================================================
   ANKYR — Stylesheet der Website
   Neu gebaut am 2026-08-24.

   Eine Datei für alle vier Seiten. Farben sind die der Live-Seite,
   unverändert übernommen. Messlatte: WCAG AAA (7,0 für Fließtext,
   4,5 für große Schrift, 3,0 für reine Grafik). Jede Zahl in den
   Kommentaren ist gerechnet, nicht geschätzt.

   Jede Trefferfläche ist mindestens 60 px hoch (--ziel). Der Grund steht
   in der Roadmap: Die Krisennummern waren vorher 15 px hoch — erreichbar,
   aber kaum treffbar.
   =========================================================================== */

/* ---------- Schriften. Selbst ausgeliefert, nicht von Google ----------
   Die Datenschutzerklärung dieser Seite sagt wörtlich zu, dass alle
   Schriften lokal ausgeliefert werden. Ein Google-Fonts-Aufruf wäre hier
   nicht nur eine fremde Verbindung, sondern eine unwahre Zusage. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;src:url('fonts/fraunces-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;src:url('fonts/fraunces-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;src:url('fonts/fraunces-400-italic.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;src:url('fonts/inter-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;src:url('fonts/inter-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;src:url('fonts/inter-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');font-display:swap}

/* Seitenwechsel: Umblätter-Effekt über die View Transitions API.
   Die aktuelle Methode, NICHT der veraltete Meta-Tag. */
@view-transition{navigation:auto}

:root{
  --bg:#F5EFE6;        /* warmer Sandton                                     */
  --ink:#241F1B;       /* 14,28:1 auf bg · 16,06:1 auf surface        AAA    */
  --ink-soft:#5C5248;  /* 7,50:1 auf surface AAA — auf bg nur 6,67:1.
                          Dieser Ton steht deshalb NUR auf Karten.           */
  --ink-faint:#8F8477; /* 3,20:1 — keine Schriftfarbe. Linien, Punkte.       */
  --coral:#C4633B;     /* Akzentfarbe. NUR Flächen und Linien OHNE Schrift:
                          3,54:1 reicht für Grafik (3,0), für Text nicht.    */
  --coral-tief:#853919;/* Dieselbe Farbe, tiefer. Für alles mit Schrift:
                          7,08:1 auf Sand, Weiß darauf 8,09:1 — AAA in
                          beide Richtungen.                                  */
  --coral-lt:#D98B65;  /* nur Deko                                           */
  --teal:#242322;      /* 13,73:1 auf bg                                     */
  --teal-lt:#403D3A;   /* 9,44:1 auf bg — der Zweitton FÜR SANDGRUND         */
  --gold:#D4A24C;      /* Trägt immer dunkle Schrift (7,05:1), nie weiße
                          (2,31:1). Nie als dünner Ring auf Sand: 2,03:1.    */
  --surface:#FFFDF9;   /* Karten                                             */
  --line:rgba(43,36,32,.13);
  --line-fest:rgba(43,36,32,.26);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;

  --breite:1120px;
  --ziel:60px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* KEIN overflow:hidden und keine feste Höhe an html/body. Wer die Schrift
   vergrößert, muss an den unteren Seitenteil herankommen — bei dieser
   Zielgruppe der Unterschied zwischen benutzbar und nicht benutzbar. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* object-fit ausdruecklich setzen: ohne Angabe gilt 'fill', und 'fill'
   streckt das Bild auf den Kasten. Gemeldet von Andi am 26.08. am Handy -
   die Bilder wurden seitlich zusammengedrueckt. 'cover' erhaelt das
   Verhaeltnis in jedem Fall. Wo der Kasten ohnehin im Verhaeltnis steht
   (.randlos, .werkstueck, .marke), aendert die Regel nichts. */
img{max-width:100%;height:auto;display:block;object-fit:cover}

/* Lange Wörter und Adressen dürfen die Seite nicht breiter machen als den
   Bildschirm. Auf der Rechtsseite lief genau das: eine URL im Fließtext
   schob das Blatt 29 px nach rechts, und schon musste man seitwärts
   scrollen, um den Satz zu Ende zu lesen. */
p,li,h1,h2,h3,h4,figcaption{overflow-wrap:break-word;hyphens:auto}
.legal p,.legal li{overflow-wrap:anywhere}
a{color:var(--coral-tief)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}

/* Sprunglink: erst sichtbar, wenn er den Fokus hat. */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:1rem 1.4rem;border-radius:0 0 12px 0;font-weight:600;text-decoration:none;z-index:100}
.skip:focus{left:0}

/* ===========================================================================
   Kopfzeile
   =========================================================================== */
.kopf{position:sticky;top:0;z-index:50;background:rgba(245,239,230,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kopf-innen{max-width:var(--breite);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.5rem clamp(1.1rem,4vw,2rem)}
.marke{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);
  font-weight:700;font-size:1.3rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.marke img{width:32px;height:32px;flex:none}

/* Das Atmen des Zeichens — übernommen von der bisherigen Live-Seite,
   Werte unverändert. */
@keyframes breathe{
  0%,100%{ transform:scale(1) rotate(0deg) }
  50%    { transform:scale(1.08) rotate(-3deg) }
}
.marke img{animation:breathe 5s ease-in-out infinite}

.nav{display:flex;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:var(--ziel);padding:0 .85rem;
  color:var(--teal-lt);text-decoration:none;font-weight:500;border-radius:10px;position:relative}
.nav a:hover{color:var(--coral-tief);background:rgba(196,99,59,.08)}
.nav a[aria-current="page"]{color:var(--coral-tief);font-weight:600}
/* Ein gerader Strich, kein gerundeter Kasten: das Element trägt border-radius,
   ein inset-Schatten hätte dessen Rundung mitgenommen. */
.nav a[aria-current="page"]::after{content:'';position:absolute;left:.85rem;right:.85rem;
  bottom:13px;height:2px;background:var(--coral);border-radius:2px}

/* ===========================================================================
   Bausteine
   =========================================================================== */
.band{max-width:var(--breite);margin:0 auto;padding:clamp(2.4rem,6vw,4.5rem) clamp(1.1rem,4vw,2rem)}
.mini{font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--coral-tief);margin:0 0 .7rem}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0}
h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.08;letter-spacing:-.018em;font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.18;letter-spacing:-.012em;font-weight:600}
h3{font-size:1.35rem;font-weight:600}
em,.gold{font-style:italic;color:var(--coral-tief)}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--teal-lt);max-width:34ch;margin:1.1rem 0 0}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ziel);
  padding:0 1.7rem;background:var(--coral-tief);color:#fff;font-weight:600;font-size:1.05rem;
  text-decoration:none;border-radius:14px;box-shadow:0 18px 30px -20px rgba(133,57,25,.9);
  transition:transform .18s,box-shadow .18s}
.knopf:hover{transform:translateY(-2px);box-shadow:0 22px 34px -20px rgba(133,57,25,.95)}
.knopf-leise{display:inline-flex;align-items:center;min-height:var(--ziel);padding:0 1.1rem;
  color:var(--teal-lt);text-decoration:none;border-radius:12px;border:1px solid var(--line-fest)}
.knopf-leise:hover{color:var(--coral-tief)}
.leiser-weg{display:flex;justify-content:center;padding:0 1.5rem 1rem}

/* ===========================================================================
   Kopfbereich der Startseite: Anker vor pulsierendem Kompass
   Die Bewegung ist bewusst langsam und blass. Wer hier landet, ist
   womöglich überfordert — eine Seite, die zappelt, ist dann das Letzte,
   was hilft. Der Anker selbst bewegt sich nicht: Er ist das, was hält.
   =========================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-grafik{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-grafik svg{position:absolute;height:118%;width:auto;right:-4%;top:-9%}
.hero-innen{max-width:var(--breite);margin:0 auto;
  padding:clamp(2.4rem,5vw,4rem) clamp(1.1rem,4vw,2rem) clamp(2.8rem,6vw,4.4rem);
  min-height:clamp(340px,40vw,500px);display:flex;flex-direction:column;justify-content:center}
.hero-text{max-width:34rem}
.hero-text h1{max-width:12ch}
.hero-text .lead{max-width:32ch}
.aktionen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

@keyframes puls{
  0%   { r:56;  opacity:.30 }
  70%  { opacity:.06 }
  100% { r:150; opacity:0 }
}
@keyframes atmen{
  from { opacity:.14; transform:rotate(-2.5deg) }
  to   { opacity:.26; transform:rotate(2.5deg) }
}
.puls-1,.puls-2{animation:puls 8s ease-out infinite}
.puls-2{animation-delay:4s}
.kompass{transform-origin:128px 128px;animation:atmen 12s ease-in-out infinite alternate}

/* ===========================================================================
   Beispiele als Zeilen
   Für Augen, die schlecht sehen, ist eine Zeile leichter zu verfolgen als
   ein Raster aus Kästchen — der Blick muss nicht springen.
   =========================================================================== */
.zeilen{margin-top:2rem;border-top:1px solid var(--line)}
.zeile{display:flex;align-items:baseline;gap:1rem;padding:1.15rem .4rem;
  border-bottom:1px solid var(--line);transition:background-color .18s}
.zeile:nth-child(odd){background:rgba(255,253,249,.55)}
.zeile:hover{background:rgba(212,162,76,.10)}
.zeile .marker{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  color:var(--coral-tief);flex:none;min-width:2.4rem}
.zeile p{margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.12rem,2.1vw,1.4rem);line-height:1.35}
.merke{margin:1.6rem 0 0;color:var(--ink-soft);max-width:70ch}

/* ===========================================================================
   Schritte auf farbigem Band
   =========================================================================== */
.band-farbig{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.schritte{display:grid;gap:1.8rem;grid-template-columns:1fr;margin-top:2.2rem;position:relative}
.schritt{position:relative;padding-left:2.6rem}
/* Punkt und Linie sind reine Grafik und tragen keine Schrift. */
.schritt::before{content:'';position:absolute;left:0;top:.35rem;width:14px;height:14px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,162,76,.22)}
.schritt::after{content:'';position:absolute;left:6px;top:1.7rem;bottom:-1.8rem;
  width:2px;background:var(--line-fest)}
.schritt:last-child::after{display:none}
.schritt .nr{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  color:var(--coral-tief);display:block;margin-bottom:.35rem}
.schritt h3{margin-bottom:.35rem}
.schritt p{margin:0;color:var(--ink-soft)}

/* ===========================================================================
   Die Idee: Fließtext, Säulen, Werkstatt
   =========================================================================== */
.warum{max-width:var(--breite);margin:0 auto;padding:.5rem clamp(1.1rem,4vw,2rem) 1rem}
.warum-innen{max-width:64ch}
.warum p{margin:0 0 1rem;font-size:1.12rem}

.saeulen{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2rem}
.saeule{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:1.6rem 1.5rem;box-shadow:0 18px 34px -28px rgba(36,31,27,.55)}
.saeule h3{font-size:1.5rem;margin:.1rem 0 .5rem}
/* Auf der Karte darf --ink-soft stehen: 7,50:1. Auf dem Sandgrund nicht. */
.saeule p:last-child{color:var(--ink-soft);margin:0}

.werkstatt-innen{display:grid;gap:1.6rem;align-items:center;grid-template-columns:1fr}
.werkstatt-bild{margin:0}
.werkstatt-bild img{width:100%;border-radius:20px;border:1px solid var(--line)}
.werkstatt-bild figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.04em;color:var(--teal-lt)}
.werkstatt-text h3{font-size:1.6rem;margin:.1rem 0 .6rem}
.werkstatt-text p{margin:0 0 .9rem}

/* ===========================================================================
   Über mich
   =========================================================================== */
.ueber{max-width:var(--breite);margin:0 auto;padding:.5rem clamp(1.1rem,4vw,2rem) 2rem;
  display:grid;gap:1.8rem;grid-template-columns:1fr;align-items:start}
.ueber img{width:100%;max-width:340px;border-radius:22px;border:1px solid var(--line);
  box-shadow:0 22px 40px -30px rgba(36,31,27,.6)}
.ueber-text p{margin:0 0 1rem;font-size:1.06rem;max-width:64ch}

/* ===========================================================================
   Hinweis und Krisennummern
   Ruhig gehalten, kein Warnkasten — aber die Nummern sind das Größte und
   Dunkelste im Block. Eine Krisennummer, die man erst suchen muss, ist keine.
   =========================================================================== */
.hinweis-band{max-width:var(--breite);margin:0 auto;padding:1rem clamp(1.1rem,4vw,2rem) 3rem}
.hinweis{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--coral);
  border-radius:18px;padding:1.6rem clamp(1.1rem,3vw,2rem)}
.hinweis p{color:var(--ink-soft);font-size:.97rem;margin:0 0 .8rem;max-width:78ch}
.krise{display:grid;gap:1rem;margin-top:1.3rem}
/* Beschriftung ÜBER die Nummern, nicht daneben: daneben bricht die Zeile um,
   sobald zwei Nummern in einem Eintrag stehen. */
.krise-zeile{display:flex;flex-direction:column;gap:.45rem}
.krise-zeile .etikett{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--teal-lt)}
.nummern{display:flex;flex-wrap:wrap;gap:.5rem}
.nummern a{display:inline-flex;align-items:center;min-height:var(--ziel);padding:0 1rem;
  font-size:1.2rem;font-weight:600;color:var(--ink);text-decoration:none;
  background:rgba(212,162,76,.18);border:1px solid var(--line-fest);border-radius:12px}
.nummern a:hover{background:rgba(212,162,76,.32)}

/* ===========================================================================
   Rechtsseite
   =========================================================================== */
.legal{max-width:var(--breite);margin:0 auto;padding:.5rem clamp(1.1rem,4vw,2rem) 3rem;color:var(--ink)}
.legal>*{max-width:72ch}
.legal h2{font-family:var(--serif);font-size:1.35rem;margin:2.2rem 0 .6rem}
.legal h2:first-of-type{margin-top:1rem}
.legal p,.legal li{color:var(--ink-soft);font-size:.97rem;margin:.5rem 0}
.legal ul{padding-left:1.2rem}

/* ===========================================================================
   Fuß
   =========================================================================== */
.fuss{border-top:1px solid var(--line);background:rgba(255,253,249,.6)}
.fuss-raster{max-width:var(--breite);margin:0 auto;display:grid;gap:1.8rem;
  grid-template-columns:1fr;padding:2.6rem clamp(1.1rem,4vw,2rem) 1.4rem}
.fuss h4{font-size:1.02rem;margin:0 0 .6rem}
.fuss p{margin:.25rem 0;font-size:.92rem;color:var(--teal-lt)}
.fuss a{color:var(--coral-tief)}
.copy{max-width:var(--breite);margin:0 auto;padding:1rem clamp(1.1rem,4vw,2rem) 2.2rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--teal-lt);
  border-top:1px solid var(--line)}

/* ===========================================================================
   Größere Bildschirme
   Mobil zuerst: oben steht die einspaltige Fassung, hier kommt das Raster
   dazu. So ist die Handy-Ansicht der Normalfall, nicht der Sonderfall.
   =========================================================================== */
@media (min-width:760px){
  .krise{grid-template-columns:1fr 1fr}
  .fuss-raster{grid-template-columns:repeat(3,1fr);gap:2.4rem}
  .saeulen{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .werkstatt-innen{grid-template-columns:1.05fr 1fr;gap:2.4rem}
  .ueber{grid-template-columns:340px 1fr;gap:2.6rem}
}
@media (min-width:820px){
  .schritte{grid-template-columns:repeat(3,1fr);gap:2.2rem}
  .schritt{padding-left:0;padding-top:2.4rem}
  .schritt::before{top:0}
  .schritt::after{left:14px;right:-2.2rem;top:6px;bottom:auto;width:auto;height:2px}
}
@media (max-width:760px){
  .hero-grafik svg{right:-30%;height:104%;top:-2%}
}
@media (max-width:560px){
  .nav a{padding:0 .55rem;font-size:.95rem}
}

/* ===========================================================================
   Wer Bewegung nicht mag, bekommt keine. Das Bild funktioniert auch still:
   die Pulsringe bleiben dann als zwei blasse Kreise stehen.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .marke img,.puls-1,.puls-2,.kompass{animation:none}
  .puls-1{opacity:.16}.puls-2{opacity:.10}.kompass{opacity:.20}
  .knopf:hover{transform:none}
}

/* ===========================================================================
   Der Klang-Knopf. Erscheint nur, wenn JavaScript läuft (klang.js hängt ihn
   in die Kopfzeile) — ohne Skript gibt es keinen Klang, also auch keinen
   Knopf. Bewusst leise gestaltet: Monoschrift, dünne Linie, kein Vollton -
   das gilt fuer den breiten Zustand weiter. Fuer den schmalen Zustand
   (unten, @media max-width:600px) ist das auf Mikes ausdruecklichen Wunsch
   umgedreht: sichtbarer Rand, gefuellter Grund, groesseres Ziel - sonst
   findet man den Knopf auf dem Handy nicht.
   =========================================================================== */
.klang{font-family:var(--mono,ui-monospace,monospace);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint,#8F8477);
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.42em 1em;min-height:34px;cursor:pointer;flex:none}
.klang:hover{color:var(--coral-tief);border-color:var(--coral)}
.klang[aria-pressed="true"]{color:var(--coral-tief);border-color:var(--coral)}
/* Auf schmalen Schirmen wird aus dem Wort ein kleines Notenzeichen —
   sonst drückt der Knopf die Navigation in die zweite Zeile. */
@media (max-width:600px){
  .kopf-innen{gap:.5rem}
  .klang{font-size:0;letter-spacing:0;padding:0;width:48px;height:48px;
    min-height:48px;border-radius:50%;display:inline-flex;
    align-items:center;justify-content:center;
    border:2px solid var(--coral);color:var(--coral-tief);
    background:rgba(196,99,59,.12)}
  .klang::before{content:'♪';font-size:1.5rem;line-height:1}
}