/* ===================================================================
   dominikdungel.de — einziges Stylesheet

   Farben, Abstaende und Schriftgroessen stehen gesammelt unter :root.
   Wer dort einen Wert aendert, aendert ihn auf allen Seiten zugleich.
   =================================================================== */

/* --- Schriften -----------------------------------------------------
   format("woff2") ist der einzige Wert, den alle Browser kennen.
   Das frueher benutzte format("woff2-variations") stammt aus einem
   zurueckgezogenen Entwurf; ein Browser, der es nicht kennt, ueberspringt
   den einzigen src-Eintrag und faellt auf Georgia bzw. Arial zurueck.

   Die Gewichtsangaben entsprechen jetzt dem, was in den Dateien
   tatsaechlich steckt. Cormorant Garamond gerade ist eine statische
   Schrift mit Gewicht 400 — sie als 300-700 auszuzeichnen hat dazu
   gefuehrt, dass alle als "300" gesetzten Titel still in 400 erschienen.
   Wer den leichten Schnitt wirklich moechte, ersetzt die Datei durch
   eine variable Fassung und traegt hier wieder 300 700 ein.          */

@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../schriften/jost.woff2) format("woff2")}

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url(../schriften/cormorant-garamond.woff2) format("woff2")}

@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../schriften/cormorant-garamond-kursiv.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
  U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../schriften/cormorant-garamond-kursiv-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
  U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Garamond Griechisch";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../schriften/garamond-griechisch.woff2) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

@font-face{font-family:"Garamond Griechisch";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../schriften/garamond-griechisch-ext.woff2) format("woff2");
  unicode-range:U+1F00-1FFF}

:root{
  --w:#FFFFFF;--b50:#F4FAFF;--b100:#E2F2FF;--b200:#CBE3F9;--b300:#ACCAE6;--b400:#86A7C6;
  --b500:#6484A1;--b600:#47647E;--b700:#304960;--b800:#1E3244;--b900:#111F2D;
  --az400:#86A3DC;--az500:#657FB6;--az700:#31456F;
  --schein:156,196,228;
  --stimme:"Cormorant Garamond","Garamond Griechisch",Georgia,serif;
  --struktur:"Jost","Garamond Griechisch","Helvetica Neue",Arial,sans-serif;
  --kurve:cubic-bezier(.22,.7,.3,1);
  --rail:236px;--flaeche:36vw;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--w);color:var(--b900);font-family:var(--struktur);
  font-size:16px;line-height:1.7;font-weight:400;font-feature-settings:"onum" 1}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;
  transition:text-decoration-color 200ms var(--kurve),color 200ms var(--kurve)}
:focus-visible{outline:2px solid var(--az500);outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.zusammen{white-space:nowrap}
.springe{position:absolute;left:-9999px;top:0;z-index:400;background:var(--b900);color:#fff;
  padding:10px 18px;font-size:14px}
.springe:focus{left:12px;top:12px}

/* ===== Vorladeseite und Eintritt =====
   Der Vorhang ist geblieben, aber deutlich gekuerzt: er hebt sich nach
   880 ms statt nach 2620 ms. Die Seite war schon vorher nach rund einer
   halben Sekunde fertig gezeichnet — die alte Dauer war reine Wartezeit,
   und zwar bei jedem Seitenaufruf neu.

   Der Inhalt blendet waehrend des Hebens ein, nicht danach. Dadurch
   liegt die groesste Inhaltsdarstellung bei etwa 0,9 s statt bei 2,3 s
   und bleibt im gruenen Bereich der Core Web Vitals.

   Alle Zeiten dieses Abschnitts an einer Stelle:                     */
:root{
  --siegel-ein:520ms;   /* Signet wird sichtbar        */
  --vorhang-ab:560ms;   /* Vorhang beginnt zu weichen  */
  --vorhang-zeit:320ms; /* … und braucht dafuer        */
  --inhalt-ab:420ms;    /* Inhalt beginnt einzublenden */
}

#vorhang{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:linear-gradient(180deg,#0F1F2E 0%,#04090F 100%);
  animation:vorhangHeben var(--vorhang-zeit) var(--kurve) var(--vorhang-ab) forwards}
#vorhang img{width:min(178px,clamp(104px,16vw,178px),26vh);height:auto;aspect-ratio:1/1;
  opacity:0;filter:blur(14px);
  animation:siegelTritt var(--siegel-ein) var(--kurve) 60ms forwards}
@keyframes siegelTritt{to{opacity:1;filter:blur(0) drop-shadow(0 0 34px rgba(var(--schein),.65))}}
@keyframes vorhangHeben{to{opacity:0;visibility:hidden;filter:blur(18px)}}

/* Die Staffelung steckt in Klassen statt in style="--d:…". Solche
   Inline-Angaben wurden von der eigenen Content-Security-Policy
   blockiert und waren wirkungslos. */
@keyframes eintritt{to{opacity:1;filter:blur(0);transform:none}}
@keyframes eintrittPortraet{to{opacity:1;filter:brightness(.88) contrast(1.06) blur(0);transform:none}}
.ein{opacity:0;filter:blur(9px);transform:translateY(11px);
  animation:eintritt 460ms var(--kurve) var(--inhalt-ab) forwards}
.ein2{animation-delay:490ms}
.ein3{animation-delay:560ms}
.ein4{animation-delay:630ms}
.ein5{animation-delay:700ms}

/* ===== Seitenwechsel =====
   Weiche Ueberblendung beim Wechsel von einer Seite zur naechsten.
   Der Browser erledigt das selbst; es kostet kein JavaScript und
   verzoegert keinen Klick. Wo die Technik fehlt, wechselt die Seite
   wie bisher ohne Uebergang — nichts geht verloren. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:blendeAus 220ms var(--kurve) both}
::view-transition-new(root){animation:blendeEin 260ms var(--kurve) both}
@keyframes blendeAus{to{opacity:0}}
@keyframes blendeEin{from{opacity:0}}

/* ===== Hinweis zum Datenschutz =====
   Als natives <dialog>. Fokusfalle, inerter Hintergrund, Escape-Taste
   und die Rueckgabe des Fokus an das zuvor fokussierte Element kommen
   damit vom Browser statt aus nachgebautem JavaScript. */
.datenhinweis{border:1px solid var(--b200);border-radius:2px;padding:0;
  width:min(520px,calc(100vw - 2 * clamp(18px,4vw,40px)));max-width:none;
  background:#fff;color:var(--b900);
  box-shadow:0 1px 2px rgba(17,31,45,.06),0 34px 80px rgba(17,31,45,.28)}
.datenhinweis[open]{padding:clamp(30px,4.5vw,46px) clamp(26px,4vw,46px);
  text-align:center;animation:karteEin 420ms var(--kurve) both}
.datenhinweis::backdrop{background:rgba(17,31,45,.30);
  backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%)}
.datenhinweis[open]::backdrop{animation:grundEin 420ms var(--kurve) both}
@keyframes karteEin{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}}
@keyframes grundEin{from{opacity:0}}
.datenhinweis img{width:clamp(46px,7vw,62px);height:auto;aspect-ratio:1/1;
  border-radius:50%;margin:0 auto clamp(18px,2.6vw,26px)}
.datenhinweis h2{font-family:var(--stimme);font-weight:400;font-size:clamp(1.3rem,3vw,1.7rem);
  line-height:1.25;margin:0 0 clamp(12px,1.8vw,18px);color:var(--b900);
  border:0;padding:0;letter-spacing:.01em}
.datenhinweis p{margin:0 0 clamp(22px,3vw,30px);font-size:14px;line-height:1.65;
  color:var(--b700);text-align:left}
.datenhinweis a{color:var(--az700);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--b400)}
.datenhinweis a:hover{text-decoration-color:currentColor}
.datenhinweis button{font:inherit;font-size:13.5px;letter-spacing:.07em;color:#fff;
  background:var(--b800);border:1px solid var(--b800);border-radius:2px;
  padding:12px 34px;cursor:pointer;transition:background 200ms var(--kurve)}
.datenhinweis button:hover{background:var(--b900)}
html:has(.datenhinweis[open]){overflow:hidden}

/* ===== Schiene ===== */
.schiene{display:flex;flex-direction:column;background:var(--w);
  padding:clamp(26px,4.2vh,52px) 30px clamp(18px,2.6vh,30px);border-right:1px solid var(--b100)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke img{width:clamp(34px,4.6vh,44px);height:auto;aspect-ratio:1/1;border-radius:50%;flex:none}
.marke .nam{font-family:var(--stimme);font-variant:small-caps;font-weight:400;
  font-size:clamp(1.05rem,2.2vh,1.35rem);letter-spacing:.05em;line-height:1.1;margin:0;
  color:var(--b900);white-space:nowrap}
.marke:hover .nam{color:var(--b700)}
.hauptnav ul{list-style:none;margin:clamp(20px,3.6vh,40px) 0 0;padding:0}
.hauptnav li{margin:0 0 clamp(1px,.45vh,5px)}
.hauptnav a{display:inline-block;font-size:clamp(12.5px,1.65vh,14px);color:var(--b600);
  text-underline-offset:5px;text-decoration-thickness:1px;transition:color 200ms var(--kurve)}
.hauptnav a:hover{color:var(--b900);text-decoration:underline}
.hauptnav a[aria-current="page"]{color:var(--b900);text-decoration:underline}
.profile{margin:clamp(16px,2.6vh,30px) 0 0;padding:clamp(12px,1.8vh,20px) 0 0;
  border-top:1px solid var(--b100);list-style:none}
.profile li{margin:0 0 2px}
.profile a{font-size:11.5px;letter-spacing:.03em;color:var(--b600);
  text-underline-offset:4px;transition:color 200ms var(--kurve)}
.profile a:hover{color:var(--b700);text-decoration:underline}
.sprachen{margin:clamp(14px,2.2vh,26px) 0 0;padding:clamp(11px,1.6vh,18px) 0 0;
  border-top:1px solid var(--b100);font-size:11.5px;letter-spacing:.06em;color:var(--b500)}
.sprachen a{color:var(--b600);transition:color 200ms var(--kurve)}
.sprachen a:hover{color:var(--b800);text-decoration:underline;text-underline-offset:4px}
.sprachen [aria-current]{color:var(--b900)}
.klapp{display:none}

/* ===== Fußzeile ===== */
.fusszeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:10px clamp(20px,3vw,48px);
  padding:clamp(12px,1.9vh,20px) clamp(24px,3.2vw,50px) clamp(12px,1.9vh,20px) 30px;
  border-top:1px solid var(--b200);background:var(--w);
  font-size:11.5px;letter-spacing:.04em;color:var(--b600)}
.fusszeile p{margin:0}
.fusszeile .spruch{font-family:var(--stimme);text-align:center;color:var(--b600);
  font-size:11.5px;letter-spacing:.02em}
.fusszeile .recht{text-align:right}
.fusszeile a{text-underline-offset:4px}
.fusszeile a:hover{text-decoration:underline;color:var(--b600)}

/* ===== Nach oben ===== */
.hoch{position:fixed;z-index:90;right:22px;bottom:78px;width:42px;height:42px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--b200);color:var(--b600);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 300ms var(--kurve),transform 300ms var(--kurve),
             visibility 0s linear 300ms,color 200ms var(--kurve),border-color 200ms var(--kurve)}
.hoch.da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hoch:hover{color:var(--b900);border-color:var(--b300)}

/* ================= STARTSEITE ================= */
.start .raster{display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr) var(--flaeche);
  grid-template-rows:minmax(0,1fr) auto;height:100svh;min-height:100svh}
.start .raster>*{min-height:0;min-width:0}
.start .schiene{grid-column:1;grid-row:1}
.start .blatt{grid-column:2;grid-row:1}
.start .flaeche{grid-column:3;grid-row:1}
.start .fusszeile{grid-column:1/-1;grid-row:2}
.start .hoch{right:calc(var(--flaeche) + 22px);bottom:88px}

/* Der Inhalt scrollt in einem eigenen Bereich. Ohne tabindex kaeme man
   mit der Tastatur nicht an den unteren Teil heran. */
.blatt{display:flex;flex-direction:column;gap:clamp(20px,3.6vh,44px);overflow-y:auto;
  padding:clamp(30px,5vh,60px) clamp(26px,3.2vw,50px);scrollbar-width:thin}
.blatt:focus-visible{outline:2px solid var(--az500);outline-offset:-4px}
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,2.4vw,40px)}
.blatt h2{font-family:var(--struktur);font-weight:400;font-size:clamp(12.5px,1.7vh,14.5px);
  letter-spacing:.13em;margin:0 0 clamp(12px,1.8vh,20px);color:var(--b900);
  padding-bottom:clamp(7px,1vh,11px);border-bottom:1px solid var(--b200)}
.blatt p{margin:0 0 clamp(9px,1.3vh,15px);color:var(--b800);
  font-size:clamp(12.5px,1.65vh,14.5px);line-height:1.62}
.felder{list-style:none;margin:clamp(8px,1.3vh,15px) 0 0;padding:0;
  font-size:clamp(12px,1.55vh,13.8px);color:var(--b700);line-height:1.5}
.felder li{padding:clamp(3.5px,.62vh,7px) 0;border-top:1px solid var(--b100)}
.posts{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 clamp(20px,2.4vw,40px)}
.posts li{border-top:1px solid var(--b100)}
.posts a{display:block;padding:clamp(8px,1.25vh,14px) 0;transition:padding-left 320ms var(--kurve)}
.posts a:hover{padding-left:10px}
.posts .kat{font-size:10.5px;letter-spacing:.13em;color:var(--az700);display:block;margin-bottom:3px}
.posts .tit{font-family:var(--stimme);font-size:clamp(.98rem,1.95vh,1.14rem);line-height:1.32;
  display:block;color:var(--b900)}
.posts .zeile{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin-top:3px}
.posts .dat{font-size:11.5px;color:var(--b600);font-feature-settings:"tnum" 1}
.posts .mehr{font-size:11.5px;color:var(--az700);text-underline-offset:4px}
.posts a:hover .mehr{text-decoration:underline}

.flaeche{background:linear-gradient(180deg,#16283A 0%,#08111A 100%);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.8vh,30px);text-align:center;
  padding:clamp(30px,5vh,56px) clamp(22px,2.4vw,44px)}
/* Weil der untere Bildrand ausblendet, darf der Namenszug naeher heran. */
.flaeche .portraet+h1{margin-top:clamp(-26px,-2.4vh,-10px)}
.krone{width:min(86px,clamp(48px,7vw,86px),10vh);height:auto;aspect-ratio:1/1;
  filter:drop-shadow(0 0 36px rgba(var(--schein),.42));animation:atem 7s ease-in-out infinite}
@keyframes atem{0%,100%{filter:drop-shadow(0 0 26px rgba(var(--schein),.3))}
  50%{filter:drop-shadow(0 0 48px rgba(var(--schein),.58))}}
/* Das Porträt hat einen fast weissen Hintergrund (gemessen 248/255), die
   Flaeche dahinter ist beinahe schwarz (37/255 oben, 16/255 unten). Ein
   hart begrenztes Rechteck dieser Helligkeit wirkt aufgeklebt, weil es
   heller ist als alles andere auf der Seite - auch heller als das
   leuchtende Signet darueber.

   Drei Eingriffe, alle rein gestalterisch und jederzeit umkehrbar:
   1. Die Lichter werden zurueckgenommen, damit das Bild im selben
      Tonwertraum liegt wie die Flaeche.
   2. Der untere Rand loest sich auf. Dort ist das Foto ohnehin dunkel
      (das Jackett, gemessen 58-79) und geht daher natuerlich in den
      Grund ueber; der Namenszug scheint aus dem Bild hervorzutreten.
   3. Statt der harten weissen Haarlinie steht ein weicher Schein in
      derselben Lichtfarbe, die schon das Signet umgibt (--schein).
      Kein Schlagschatten mehr: der sollte das Bild vom Grund abheben,
      und genau das wollen wir hier nicht.

   Wer es anders moechte, ersetzt die Maske durch eine dieser Zeilen:
     - nur ganz sanft:  linear-gradient(180deg,#000 84%,transparent 100%)
     - rundum weich:    radial-gradient(116% 94% at 50% 40%,#000 52%,transparent 86%)
     - gar nicht:       die beiden mask-image-Zeilen loeschen              */
.portraet{width:min(360px,25vw,37vh);height:auto;aspect-ratio:375/500;
  /* Die Einblendung weiter oben animiert ebenfalls filter. Ein zweites
     filter auf demselben Element wuerde davon ueberschrieben, deshalb
     traegt das Portraet eine eigene Endstufe (eintrittPortraet). */
  filter:brightness(.88) contrast(1.06) blur(9px);
  animation-name:eintrittPortraet;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.45) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.45) 86%,transparent 100%)}

.flaeche h1{font-family:var(--stimme);font-weight:400;letter-spacing:.045em;
  font-size:clamp(1.5rem,3.2vh,2.35rem);line-height:1.12;margin:0;color:#fff;
  white-space:nowrap;text-shadow:0 0 34px rgba(var(--schein),.3)}

/* ================= UNTERSEITEN ================= */
.unter .schiene{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:60;
  overflow-y:auto;scrollbar-width:thin}
.unter .seite{margin-left:var(--rail);display:flex;flex-direction:column;min-height:100svh}
.kopftafel{background:linear-gradient(180deg,#16283A 0%,#0B1622 100%);color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
  padding:clamp(48px,8vw,86px) clamp(24px,4vw,60px)}
.kopftafel img{width:clamp(46px,6vw,66px);height:auto;aspect-ratio:1/1;
  filter:drop-shadow(0 0 30px rgba(var(--schein),.4));animation:atem 7s ease-in-out infinite}
.kopftafel h1{font-family:var(--stimme);font-weight:400;letter-spacing:.04em;
  font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.14;margin:0;color:#fff;
  text-shadow:0 0 34px rgba(var(--schein),.28)}
.rumpf{flex:1;padding:clamp(40px,6vw,78px) clamp(24px,4vw,60px) clamp(50px,7vw,90px);
  max-width:960px;width:100%}
.rumpf h2{font-family:var(--struktur);font-weight:400;font-size:13px;letter-spacing:.14em;
  margin:clamp(34px,4.4vw,54px) 0 18px;padding-bottom:9px;border-bottom:1px solid var(--b200);
  color:var(--b900)}
.rumpf h2:first-child{margin-top:0}
.rumpf h3{font-family:var(--stimme);font-weight:400;font-size:1.32rem;line-height:1.3;
  margin:26px 0 10px;color:var(--b900)}
.rumpf p{margin:0 0 15px;color:var(--b800);font-size:15.5px;line-height:1.72;max-width:68ch}

/* Rubrik und Datum eines Beitrags. Stand frueher als Inline-Style im HTML
   und wurde daher von der Content-Security-Policy verworfen. Das Datum
   nutzt jetzt --b600 (6,19:1) statt --b400 (2,51:1, unter dem AA-Wert). */
.rumpf .kat{font-size:11px;letter-spacing:.14em;color:var(--az700);margin-bottom:2px}
.rumpf .datum{font-size:13px;color:var(--b600);font-feature-settings:"tnum" 1}

/* Unterstrichen wird ausschliesslich, was im Fliesstext steht. */
.rumpf p a,.rumpf .liste a,.rumpf .werk a,.rumpf .termin a,.blatt p a,.meldung a,
.formular .einwilligung a{
  color:var(--az700);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--b400)}
.rumpf p a:hover,.rumpf .liste a:hover,.rumpf .werk a:hover,.rumpf .termin a:hover,
.blatt p a:hover,.meldung a:hover,.formular .einwilligung a:hover{
  color:var(--b900);text-decoration-color:currentColor}
.liste{list-style:none;margin:0 0 22px;padding:0;font-size:15px;color:var(--b700);max-width:68ch}
.liste li{padding:8px 0;border-top:1px solid var(--b100)}
.werkliste{font-family:var(--stimme);font-size:1.14rem;line-height:1.7;color:var(--b800);
  margin:14px 0 26px}
.werkliste li{padding:4px 0;border-top:0}
.werk{margin:0 0 26px;max-width:72ch}
.werk .rub{font-size:11px;letter-spacing:.15em;color:var(--b600);display:block;margin-bottom:7px}
.werk .tit{font-family:var(--stimme);font-size:1.16rem;line-height:1.45;color:var(--b900);display:block}
.werk .tit em,.werk .tit i{font-style:italic}
.jahr{font-family:var(--stimme);font-weight:400;font-size:2.1rem;line-height:1;
  color:var(--b500);margin:44px 0 18px;font-feature-settings:"tnum" 1}
.termin{border-top:1px solid var(--b100);padding:16px 0;max-width:72ch}
.termin .wann{font-size:12px;letter-spacing:.1em;color:var(--az700);display:block;margin-bottom:5px;
  font-feature-settings:"tnum" 1}
.termin .was{font-family:var(--stimme);font-size:1.14rem;line-height:1.4;display:block;margin-bottom:6px}
.termin p{font-size:14.5px;margin:0 0 5px;color:var(--b600)}
.beitragsliste{list-style:none;margin:0;padding:0;max-width:72ch}
.beitragsliste li{border-top:1px solid var(--b100)}
.beitragsliste li:last-child{border-bottom:1px solid var(--b100)}
.beitragsliste a{display:block;padding:20px 0;transition:padding-left 320ms var(--kurve)}
.beitragsliste a:hover{padding-left:12px}
.beitragsliste .kat{font-size:11px;letter-spacing:.13em;color:var(--az700);display:block;margin-bottom:5px}
.beitragsliste .tit{font-family:var(--stimme);font-size:1.28rem;line-height:1.35;display:block;color:var(--b900)}
.beitragsliste .dat{font-size:12.5px;color:var(--b600);font-feature-settings:"tnum" 1;display:block;margin-top:4px}

.videofeld{margin:30px 0 34px;max-width:820px}
.videofeld video{width:100%;height:auto;background:var(--b900);border-radius:2px;
  box-shadow:0 0 0 1px var(--b200)}
.videohinweis{color:#fff;padding:20px;margin:0;font-size:14.5px}

/* ===== Formular ===== */
.formular{max-width:600px;margin:28px 0 0}
.formular .feld{margin:0 0 20px}
.formular label{display:block;font-size:12px;letter-spacing:.11em;color:var(--b600);margin:0 0 7px}
.formular input[type=text],.formular input[type=email],.formular textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--b900);background:#fff;
  border:1px solid var(--b200);border-radius:2px;padding:11px 13px;
  transition:border-color 200ms var(--kurve)}
.formular input:focus,.formular textarea:focus{border-color:var(--az500);outline:none;
  box-shadow:0 0 0 2px var(--b100)}
.formular textarea{min-height:170px;resize:vertical;line-height:1.6}
.formular .einwilligung label{display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;letter-spacing:0;color:var(--b700);line-height:1.55;text-transform:none}
.formular .einwilligung input{margin-top:3px;flex:none;accent-color:var(--az700)}
.formular button{font:inherit;font-size:14px;letter-spacing:.08em;color:#fff;
  background:var(--b800);border:1px solid var(--b800);border-radius:2px;
  padding:12px 30px;cursor:pointer;transition:background 200ms var(--kurve)}
.formular button:hover{background:var(--b900)}
.formular button[disabled]{background:var(--b500);border-color:var(--b500);cursor:progress}
.formular .pflicht{font-size:12px;color:var(--b600);margin:0 0 22px}
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.meldung{border:1px solid var(--b200);border-left:2px solid var(--az400);
  padding:16px 20px;margin:0 0 26px;max-width:600px;background:var(--b50)}
.meldung.gut{border-left-color:#436A59;background:#F0FEF7}
.meldung p{margin:0 0 6px;font-size:14.5px;color:var(--b800)}
.meldung p:last-child{margin:0}
.meldung ul{margin:0;padding:0 0 0 18px;font-size:14.5px;color:var(--b800)}
.zurueck{display:inline-block;margin-top:30px;font-size:13px;color:var(--b600);
  text-underline-offset:4px}
.zurueck:hover{color:var(--b900);text-decoration:underline}
.rechtstext p{font-size:14.5px;max-width:74ch}
.rechtstext h2{margin-top:40px}
/* Auszeichnung fuer noch einzutragende Angaben in Impressum und
   Datenschutzerklaerung. Zurzeit ist nichts mehr offen; die Regel bleibt
   fuer kuenftige Ergaenzungen erhalten (siehe LIESMICH, Punkt 7). */
.rechtstext .platzhalter{background:var(--b100);color:var(--az700);padding:1px 7px;
  border-radius:2px;font-size:.94em;white-space:nowrap}
.hinweis{border:1px solid var(--b200);border-left:2px solid var(--az400);
  padding:18px 22px;margin:0 0 30px;max-width:74ch;background:var(--b50)}
.hinweis p{font-size:14px;margin:0 0 8px;color:var(--b700)}
.hinweis p:last-child{margin:0}

/* ================= Bildschirmgrößen ================= */
@media(min-width:1081px){body.start{overflow:hidden}}
@media(min-width:1081px) and (max-width:1300px){
  :root{--rail:206px;--flaeche:33vw}
  .blatt{padding-left:28px;padding-right:28px}
  .fusszeile{padding-left:26px}
}
@media(min-width:1900px){
  :root{--rail:280px;--flaeche:32vw}
  .blatt{padding-left:clamp(50px,4vw,96px);padding-right:clamp(50px,4vw,96px)}
  .fusszeile{padding-left:44px;padding-right:clamp(50px,4vw,96px)}
}
@media(min-width:1081px) and (max-height:600px){
  .portraet{display:none}
  .flaeche{gap:14px}
}

@media(max-width:1080px){
  body.start{overflow:auto}
  .start .raster{display:block;height:auto;min-height:0}
  .unter .schiene{position:sticky;width:auto;bottom:auto;overflow:visible}
  .unter .seite{margin-left:0}
  .schiene{position:sticky;top:0;z-index:80;flex-direction:row;align-items:center;
    justify-content:space-between;gap:16px;padding:14px 22px;
    border-right:none;border-bottom:1px solid var(--b200);
    background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
  .marke img{width:38px}
  .marke .nam{font-size:1.2rem}
  .klapp{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0 9px;background:none;border:1px solid var(--b200);
    border-radius:2px;cursor:pointer;flex:none}
  .klapp .balken{display:block;height:1px;background:var(--b700);
    transition:transform 260ms var(--kurve),opacity 200ms var(--kurve)}
  .klapp[aria-expanded="true"] .balken:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .klapp[aria-expanded="true"] .balken:nth-child(2){opacity:0}
  .klapp[aria-expanded="true"] .balken:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .schiene .schublade{position:absolute;top:100%;left:0;right:0;background:var(--w);
    border-bottom:1px solid var(--b200);padding:8px 22px 20px;display:none;
    max-height:calc(100svh - 70px);overflow-y:auto}
  .schiene .schublade.offen{display:block}
  .hauptnav ul{margin:0}
  .hauptnav li{margin:0}
  .hauptnav a{padding:9px 0;font-size:15px}
  .profile{margin-top:14px;padding-top:12px}
  .profile a{font-size:13px;padding:5px 0;display:inline-block}
  .sprachen{margin-top:12px;padding-top:10px;font-size:13px}
  .sprachen a{padding:5px 0;display:inline-block}
  .flaeche{padding:clamp(44px,8vw,72px) 24px;gap:24px}
  .krone{width:min(74px,18vw);height:auto}
  .portraet{width:min(375px,78vw);height:auto}
  .flaeche h1{font-size:clamp(1.7rem,7vw,2.4rem)}
  .blatt{padding:clamp(34px,7vw,56px) 22px clamp(30px,6vw,48px);gap:36px}
  .blatt h2{font-size:13px;margin-bottom:16px}
  .blatt p{font-size:15px}
  .felder{font-size:14.5px}
  .felder li{padding:7px 0}
  .posts .tit{font-size:1.1rem}
  .fusszeile{grid-template-columns:1fr;text-align:left;gap:10px;padding:20px 22px 28px}
  .fusszeile .spruch,.fusszeile .recht{text-align:left}
  .start .hoch,.hoch{right:18px;bottom:18px}
}
@media(max-width:1080px) and (orientation:landscape) and (max-height:540px){
  .flaeche{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:20px 28px;
    padding:32px 24px;text-align:left}
  .portraet{width:120px}
}
@media(max-width:420px){
  .marke .nam{font-size:1.05rem}
  .marke img{width:32px}
  .blatt{padding-left:18px;padding-right:18px}
  .rumpf{padding-left:20px;padding-right:20px}
  .kopftafel{padding-left:20px;padding-right:20px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .ein{opacity:1;filter:none;transform:none;animation:none}
  .portraet{filter:brightness(.88) contrast(1.06)}
  #vorhang{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .krone,.kopftafel img{filter:drop-shadow(0 0 30px rgba(var(--schein),.4))}
}

@media print{
  .schiene,.flaeche,.kopftafel,.hoch,.klapp,#vorhang,.datenhinweis{display:none!important}
  .unter .seite,.start .raster{margin:0;display:block;height:auto}
  .blatt{overflow:visible}
  body{font-size:11pt;color:#000}
  a{color:#000}
}