/*
Theme Name: Marginalie
Description: Ein persönliches Blog-Theme: weiß, serifenlos, mit großen Überschriften. Klassisches PHP-Theme ohne Build-Tools und ohne externe Abhängigkeiten. Arbeitstitel.
Version: 0.2.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: marginalie
*/

/* ==========================================================================
   Schriften (selbst gehostet, siehe README)
   Es werden mehrere Dateinamen probiert, damit auch Fontsource-Dateien passen.
   ========================================================================== */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('assets/fonts/bricolage-grotesque-variable.woff2') format('woff2'),
      url('assets/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'),
      url('assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('assets/fonts/dm-sans-variable.woff2') format('woff2'),
      url('assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('assets/fonts/dm-sans-italic-variable.woff2') format('woff2'),
      url('assets/fonts/dm-sans-latin-wght-italic.woff2') format('woff2');
  font-weight:100 1000;font-style:italic;font-display:swap;
}

/* ==========================================================================
   Tokens
   Raster: Abstände in Vielfachen von 8 px (Halbschritt 4 px),
   Schriftgrößen in einer Reihe mit Faktor 1,25 (16, 20, 25, 31, 39, 49, 61, 76),
   Zeilenhöhen in Vielfachen von 4 px.
   ========================================================================== */
:root{
  color-scheme:light;

  /* Farben */
  --bg:#ffffff;
  --ink:#0f1f3d;
  --on-ink:#ffffff;
  --acc:#2f5bea;
  --on-acc:#ffffff;
  --soft:#d5f2e6;
  --softink:#0b4d38;
  --line:#e6e9ef;
  --line2:#cfd6e2;
  --mut:#556074;
  --tint:#eef2fb;
  --field:#ffffff;
  --body-text:#1c2a45;
  --ph1:#c7d5f5;
  --av1:#9fb3d9;--av2:#8fd0b3;--av3:#c7d5f5;

  /* Schriften */
  --font-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-text:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Abstände */
  --sp-h:.25rem;   /*  4 */
  --sp-1:.5rem;    /*  8 */
  --sp-2:1rem;     /* 16 */
  --sp-3:1.5rem;   /* 24 */
  --sp-4:2rem;     /* 32 */
  --sp-5:3rem;     /* 48 */
  --sp-6:4rem;     /* 64 */
  --sp-7:6rem;     /* 96 */

  /* Schriftgrößen und Zeilenhöhen */
  --fs-s:.875rem;   --lh-s:1.25rem;   /* 14 / 20  Meta, Beschriftungen */
  --fs-b:1rem;      --lh-b:1.5rem;    /* 16 / 24  Oberfläche, Nebentext */
  --fs-1:1.25rem;   --lh-1:2rem;      /* 20 / 32  Fließtext, Vorspann */
  --fs-2:1.5625rem; --lh-2:2rem;      /* 25 / 32  Kartentitel, Zwischentitel */
  --fs-3:1.9375rem; --lh-3:2.5rem;    /* 31 / 40 */
  --fs-4:2.4375rem; --lh-4:2.75rem;   /* 39 / 44 */
  --fs-5:3.0625rem; --lh-5:3.25rem;   /* 49 / 52  Beitragstitel */
  --fs-6:3.8125rem; --lh-6:4rem;      /* 61 / 64 */
  --fs-7:4.75rem;   --lh-7:5rem;      /* 76 / 80  Aufmacher, Kopfbereiche */

  /* Maße */
  --wrap:70rem;        /* 1120 */
  --col:40rem;         /*  640 */
  --breakout:7rem;     /*  112 */
  --tap:3rem;          /*   48 */
  --field-h:3.5rem;    /*   56 */
}
@media (max-width:900px){
  :root{
    --sp-5:2.5rem; --sp-6:3rem; --sp-7:4rem;
    --fs-2:1.375rem; --lh-2:1.75rem;
    --fs-3:1.625rem; --lh-3:2rem;
    --fs-4:2rem;     --lh-4:2.5rem;
    --fs-5:2.125rem; --lh-5:2.5rem;
    --fs-6:2.375rem; --lh-6:2.75rem;
    --fs-7:2.5rem;   --lh-7:2.75rem;
    --breakout:0rem;
  }
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0c1424;
    --ink:#e8edf7;
    --on-ink:#0c1424;
    --acc:#86a3ff;
    --on-acc:#0c1424;
    --soft:#153a2e;
    --softink:#a8ecd0;
    --line:#1f2b42;
    --line2:#33425f;
    --mut:#9aa8bf;
    --tint:#16233b;
    --field:#111c30;
    --body-text:#d5deee;
    --ph1:#26375f;
    --av1:#3b5088;--av2:#2a6b52;--av3:#2f4270;
  }
  img{filter:brightness(.92)}
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--fs-b);line-height:var(--lh-b);-webkit-font-smoothing:antialiased}
body.panel-open{overflow:hidden}
img,video,iframe{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:var(--sp-1);background:var(--ink);color:var(--on-ink);padding:var(--sp-2) var(--sp-3);border-radius:999px;z-index:100}
.skip-link:focus{left:var(--sp-2)}
.wrap{width:min(var(--wrap),100% - var(--sp-5));margin:0 auto}
.col{width:min(var(--col),100% - var(--sp-5));margin:0 auto}
.ico{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ==========================================================================
   Kopf
   ========================================================================== */
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--sp-3) 0}
.logo{font:700 var(--fs-3)/var(--tap) var(--font-display);letter-spacing:-.02em}
.logo b{color:var(--acc);font-weight:700}
.rb{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;border:0;cursor:pointer;padding:0}
.rb.o{background:transparent;color:var(--ink);border:1px solid var(--line2);justify-self:end}
.rb:hover{background:var(--acc);color:var(--on-acc)}
.rb.o:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ==========================================================================
   Bausteine
   ========================================================================== */
.pill,.ah-tag{display:inline-block;font-size:var(--fs-s);font-weight:500;line-height:var(--lh-s);padding:var(--sp-1) var(--sp-2);border-radius:999px}
.pill{background:var(--acc);color:var(--on-acc)}
.pill.soft,.ah-tag{background:var(--soft);color:var(--softink)}
.m{display:flex;gap:var(--sp-h) .75rem;align-items:center;flex-wrap:wrap;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut);margin:0}
.m i{width:4px;height:4px;border-radius:50%;background:var(--acc);display:block}
.av{width:2rem;height:2rem;border-radius:50%;background:var(--av1);color:var(--ink);display:inline-grid;place-items:center;font:500 var(--fs-s)/1 var(--font-text);flex:none}
.av.c2{background:var(--av2)}.av.c3{background:var(--av3)}
.btn{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--ink);color:var(--on-ink);font-weight:500;font-size:var(--fs-b);line-height:var(--lh-b);padding:0 var(--sp-3);min-height:var(--tap);border-radius:999px;border:0;cursor:pointer}
.btn:hover{background:var(--acc);color:var(--on-acc)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin:var(--sp-7) 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.sh h2{font:700 var(--fs-2)/var(--lh-2) var(--font-display);letter-spacing:-.02em;margin:0}
.sh a{font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--acc);min-height:var(--tap);display:inline-flex;align-items:center}
mark{background:var(--soft);color:var(--softink);padding:0 var(--sp-h);border-radius:var(--sp-h)}

/* Formularfelder */
.sf{display:flex;gap:var(--sp-1);max-width:32rem}
.sf input[type=search]{flex:1;min-width:0;font:400 var(--fs-b)/var(--lh-b) var(--font-text);color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:0 var(--sp-3);height:var(--field-h);background:var(--field);-webkit-appearance:none;appearance:none}
.sf input[type=search]:focus{outline:2px solid var(--acc);outline-offset:2px;border-color:transparent}
.sf button{width:var(--field-h);height:var(--field-h);border-radius:50%;border:0;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.sf button:hover{background:var(--acc);color:var(--on-acc)}

/* ==========================================================================
   Aufmacher (Startseite)
   ========================================================================== */
.hero{margin-top:var(--sp-6)}
.hero-media{position:relative}
.hero-media .img{display:block;height:30rem;border-radius:1.25rem;overflow:hidden;background:var(--ph1)}
.hero-media .img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .pill{position:absolute;left:var(--sp-3);top:var(--sp-3)}
.hero .txt{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--sp-5);padding-top:var(--sp-4);align-items:end}
.hero .txt .m{margin-bottom:var(--sp-2)}
.hero h1{font:700 var(--fs-5)/var(--lh-5) var(--font-display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.hero .ex{margin:0 0 var(--sp-3);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--mut)}

/* Aufmacher ohne Bild: nur Schrift */
.hero--text{border-bottom:1px solid var(--line);padding:0 0 var(--sp-5)}
.hero--text .top{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.hero--text h1{font-size:var(--fs-7);line-height:var(--lh-7);letter-spacing:-.035em;margin:var(--sp-4) 0;max-width:18ch}
.hero--text.is-long h1{font-size:var(--fs-6);line-height:var(--lh-6);letter-spacing:-.03em;max-width:22ch}
.hero--text .bot{display:grid;grid-template-columns:1fr auto;gap:var(--sp-5);align-items:end}
.hero--text .bot.noex{grid-template-columns:auto}
.hero--text .ex{margin:0;max-width:44ch}

/* ==========================================================================
   Raster und Karten
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}
.card{display:flex;flex-direction:column}
.card .th{position:relative;display:block;aspect-ratio:4/3;border-radius:1rem;overflow:hidden;background:var(--ph1)}
.card .th img{width:100%;height:100%;object-fit:cover;display:block}
.card .pill{position:absolute;left:var(--sp-2);top:var(--sp-2);padding:var(--sp-h) .75rem;line-height:var(--lh-b)}
.card h3{font:700 var(--fs-2)/var(--lh-2) var(--font-display);letter-spacing:-.02em;margin:var(--sp-2) 0 var(--sp-1)}
.card:hover h3{color:var(--acc)}
.card.t{background:var(--soft);color:var(--softink);border-radius:1rem;padding:var(--sp-4);justify-content:space-between}
.card.t .pill{position:static;background:var(--softink);color:var(--soft);align-self:flex-start;padding:var(--sp-h) .75rem;line-height:var(--lh-b)}
.card.t h3{font-size:var(--fs-3);line-height:var(--lh-3);margin:var(--sp-3) 0 var(--sp-2);color:var(--softink)}
.card.t p{margin:0 0 var(--sp-3);font-size:var(--fs-b);line-height:var(--lh-b)}
.card.t .m{color:var(--softink)}
.card.t .m i{background:var(--softink)}

/* ==========================================================================
   Kopfbereich von Archiv, Rubrik, Suche
   ========================================================================== */
.ah{padding:0 0 var(--sp-5);border-bottom:1px solid var(--line);margin-top:var(--sp-6)}
.ah h1{font:700 var(--fs-7)/var(--lh-7) var(--font-display);letter-spacing:-.035em;margin:var(--sp-4) 0 var(--sp-2);text-wrap:balance}
.ah.is-long h1{font-size:var(--fs-6);line-height:var(--lh-6)}
.ah .desc{font-size:var(--fs-1);line-height:var(--lh-1);color:var(--mut);max-width:52ch}
.ah .desc p{margin:0}
.ah .meta{margin-top:var(--sp-3)}
.ah .sf{margin-top:var(--sp-4)}
.mnav{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap}
.mnav a{display:inline-flex;align-items:center;gap:var(--sp-1);border:1px solid var(--line2);border-radius:999px;padding:0 var(--sp-3);min-height:var(--tap);font-size:var(--fs-b);line-height:var(--lh-b);font-weight:500}
.mnav a:hover{border-color:var(--ink)}

/* Listenzeilen */
.list{border-bottom:1px solid var(--line)}
.it{display:grid;grid-template-columns:10rem minmax(0,1fr) auto;gap:var(--sp-4);padding:var(--sp-4) 0;border-top:1px solid var(--line);align-items:baseline}
.list .it:first-child{border-top:0}
.it .d{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut)}
.it .d span{display:block;margin-top:var(--sp-h)}
.it .cat{font-size:var(--fs-s);font-weight:500;line-height:var(--lh-b);color:var(--softink);background:var(--soft);border-radius:999px;padding:var(--sp-h) .75rem;display:inline-block;margin-bottom:var(--sp-2)}
.it h2{font:700 var(--fs-3)/var(--lh-3) var(--font-display);letter-spacing:-.02em;margin:0 0 var(--sp-1)}
.it:hover h2{color:var(--acc)}
.it p{margin:0;font-size:var(--fs-b);line-height:var(--lh-b);color:var(--mut);max-width:60ch}
.it .th{width:8rem;height:6rem;border-radius:.75rem;overflow:hidden;background:var(--ph1);align-self:start}
.it .th img{width:100%;height:100%;object-fit:cover;display:block}
.empty{padding:var(--sp-5) 0;font-size:var(--fs-1);line-height:var(--lh-1);color:var(--mut);max-width:52ch;margin:0}

/* Seitennavigation */
.navigation.pagination{padding-top:var(--sp-5)}
.navigation.pagination .nav-links{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap}
.navigation.pagination .page-numbers{min-width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;font-size:var(--fs-b);line-height:1;font-weight:500;color:var(--mut)}
.navigation.pagination a.page-numbers:hover{background:var(--tint);color:var(--ink)}
.navigation.pagination .current{background:var(--ink);color:var(--on-ink)}
.navigation.pagination .dots{color:var(--mut)}
.navigation.pagination .prev,.navigation.pagination .next{width:auto;border-radius:999px;padding:0 var(--sp-3);border:1px solid var(--line2);color:var(--ink);display:inline-flex;align-items:center;gap:var(--sp-1)}
.navigation.pagination .next{background:var(--ink);color:var(--on-ink);border-color:var(--ink);margin-left:auto}
.navigation.pagination .prev{margin-right:auto}
.navigation.pagination .prev:hover{border-color:var(--ink);background:transparent}
.navigation.pagination .next:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}

/* Archiv-Seite (Monatsliste) */
.months{list-style:none;margin:var(--sp-4) 0 0;padding:0;columns:3;column-gap:var(--sp-4)}
.months li{break-inside:avoid;border-top:1px solid var(--line)}
.months a{display:flex;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) 0;min-height:var(--tap)}
.months a:hover{color:var(--acc)}

/* ==========================================================================
   Einzelansicht
   ========================================================================== */
.entry-head{padding-top:var(--sp-6)}
.entry-top{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.entry-title{font:700 var(--fs-5)/var(--lh-5) var(--font-display);letter-spacing:-.03em;margin:var(--sp-4) 0 var(--sp-5);text-wrap:balance}
.entry-head.no-media .entry-title{font-size:var(--fs-6);line-height:var(--lh-6);margin-bottom:var(--sp-3)}
.entry-lead{font-size:var(--fs-1);line-height:var(--lh-1);color:var(--ink);margin:0}
.entry-media{margin:0 calc(var(--breakout) * -1)}
.entry-media .img{display:block;height:27rem;border-radius:1rem;overflow:hidden;background:var(--ph1)}
.entry-media .img img{width:100%;height:100%;object-fit:cover;display:block}
figcaption,.wp-caption-text{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut);margin-top:var(--sp-2)}
.entry-media figcaption{margin-left:var(--breakout)}

.entry-content{margin-top:var(--sp-5);font-size:var(--fs-1);line-height:var(--lh-1);color:var(--body-text);overflow-wrap:break-word}
.entry-content>*{margin-top:0;margin-bottom:var(--sp-3)}
.entry-content a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry-content a:hover{text-decoration-thickness:2px}
.entry-content h2{font:700 var(--fs-3)/var(--lh-3) var(--font-display);letter-spacing:-.02em;margin:var(--sp-5) 0 var(--sp-2);color:var(--ink)}
.entry-content h3{font:700 var(--fs-2)/var(--lh-2) var(--font-display);letter-spacing:-.015em;margin:var(--sp-4) 0 var(--sp-1);color:var(--ink)}
.entry-content h4{font:700 var(--fs-1)/var(--lh-1) var(--font-display);margin:var(--sp-4) 0 var(--sp-1);color:var(--ink)}
.entry-content ul,.entry-content ol{padding-left:var(--sp-3)}
.entry-content li{margin-bottom:var(--sp-1)}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
.entry-content blockquote,.entry-content .wp-block-pullquote{margin:var(--sp-5) calc(var(--sp-5) * -1);padding:var(--sp-4) var(--sp-5);background:var(--soft);border-radius:1rem;font:700 var(--fs-3)/var(--lh-3) var(--font-display);letter-spacing:-.02em;color:var(--softink);border:0}
.entry-content blockquote p,.entry-content .wp-block-pullquote p{margin:0;font:inherit}
.entry-content blockquote cite,.entry-content .wp-block-pullquote cite,.entry-content .wp-block-quote__citation{display:block;margin-top:var(--sp-2);font:400 var(--fs-s)/var(--lh-s) var(--font-text);letter-spacing:0;font-style:normal;color:var(--softink)}
.entry-content .wp-block-pullquote{text-align:left}
.entry-content figure{margin-left:0;margin-right:0}
.entry-content img{border-radius:.75rem}
.entry-content .alignwide,.entry-content .alignfull{margin-left:calc(var(--breakout) * -1);margin-right:calc(var(--breakout) * -1);max-width:none;width:auto}
.entry-content .aligncenter{margin-left:auto;margin-right:auto;display:block}
.entry-content .alignleft{float:left;margin:var(--sp-h) var(--sp-3) var(--sp-2) 0}
.entry-content .alignright{float:right;margin:var(--sp-h) 0 var(--sp-2) var(--sp-3)}
.entry-content pre{background:var(--tint);padding:var(--sp-3);border-radius:.75rem;overflow-x:auto;font-size:var(--fs-s);line-height:var(--lh-b)}
.entry-content code{font-size:.9em;background:var(--tint);padding:2px 6px;border-radius:6px}
.entry-content pre code{background:none;padding:0}
.entry-content table{width:100%;border-collapse:collapse;font-size:var(--fs-b);line-height:var(--lh-b)}
.entry-content th,.entry-content td{padding:var(--sp-2);border-bottom:1px solid var(--line);text-align:left}
.entry-content::after{content:"";display:table;clear:both}
.page-links{margin-top:var(--sp-3);font-size:var(--fs-b)}

.tags{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.tags a{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut);border:1px solid var(--line);padding:0 var(--sp-2);border-radius:999px;min-height:2.5rem;display:inline-flex;align-items:center}
.tags a:hover{border-color:var(--ink);color:var(--ink)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
.pn a{display:block;padding:var(--sp-3);border:1px solid var(--line);border-radius:1rem}
.pn a:hover{border-color:var(--ink)}
.pn .next{text-align:right;grid-column:2}
.pn small{display:block;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut);margin-bottom:var(--sp-1)}
.pn b{font:700 var(--fs-1)/var(--lh-1) var(--font-display);letter-spacing:-.01em}

/* ==========================================================================
   Kommentare
   ========================================================================== */
.comments-area{margin-top:var(--sp-7)}
.comments-title{font:700 var(--fs-2)/var(--lh-2) var(--font-display);letter-spacing:-.02em;margin:0 0 var(--sp-2)}
.comment-list,.comment-list .children{list-style:none;margin:0;padding:0}
.comment-list .children{margin-left:var(--sp-6)}
.cm-item{border-top:1px solid var(--line)}
.cm-in{display:grid;grid-template-columns:var(--tap) 1fr;gap:var(--sp-2);padding:var(--sp-3) 0}
.cm-in .av{width:var(--tap);height:var(--tap);font-size:var(--fs-b)}
.cm-name{font-weight:500;font-size:var(--fs-b);line-height:var(--lh-b)}
.cm-date{color:var(--mut);margin-left:var(--sp-1);font-size:var(--fs-s);line-height:var(--lh-s)}
.cm-text{margin:var(--sp-1) 0 var(--sp-2);font-size:var(--fs-b);line-height:var(--lh-b);color:var(--body-text)}
.cm-text p{margin:0 0 var(--sp-1)}
.cm-wait{font-size:var(--fs-s);color:var(--mut)}
.reply a{font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;border:1px solid var(--line2);border-radius:999px;padding:0 var(--sp-2);display:inline-flex;min-height:2.5rem;align-items:center}
.reply a:hover{border-color:var(--ink)}
.comment-respond{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.comment-reply-title{font:700 var(--fs-2)/var(--lh-2) var(--font-display);letter-spacing:-.02em;margin:0 0 var(--sp-1)}
.comment-reply-title small{font:500 var(--fs-s)/var(--lh-s) var(--font-text);margin-left:var(--sp-2)}
.comment-notes{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut);margin:0 0 var(--sp-3)}
.comment-form label{display:block;font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;margin:0 0 var(--sp-1)}
.comment-form p{margin:0 0 var(--sp-2)}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email]{width:100%;font:400 var(--fs-b)/var(--lh-b) var(--font-text);color:var(--ink);border:1px solid var(--line2);border-radius:.75rem;padding:var(--sp-2);background:var(--field)}
.comment-form textarea{min-height:9rem;resize:vertical}
.comment-form textarea:focus,.comment-form input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.comment-form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.comment-form .form-submit{margin-top:var(--sp-3)}
.comment-form .comment-form-cookies-consent{display:flex;gap:var(--sp-1);align-items:center;font-size:var(--fs-s);color:var(--mut)}
.comment-form .comment-form-cookies-consent label{margin:0;font-weight:400}
.comment-form .comment-form-cookies-consent input{width:1.25rem;height:1.25rem}
.no-comments{color:var(--mut);margin-top:var(--sp-4)}

/* ==========================================================================
   Menü (Vollbild, öffnet wie ein Vorhang) und Suche (fährt von oben herein)
   ========================================================================== */
.overlay-menu,.search-panel{position:fixed;inset:0;z-index:50;visibility:hidden}
.admin-bar .overlay-menu,.admin-bar .search-panel{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:782px){.admin-bar .overlay-menu,.admin-bar .search-panel{top:var(--wp-admin--admin-bar--height,46px)}}

.overlay-menu{background:var(--bg);overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.76,0,.24,1),visibility 0s linear .5s}
.overlay-menu.is-open,.overlay-menu:target{visibility:visible;clip-path:inset(0);transition:clip-path .5s cubic-bezier(.76,0,.24,1),visibility 0s}
.mgrid{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--sp-6);padding:var(--sp-5) 0 var(--sp-7);border-top:1px solid var(--line)}
.main-list{list-style:none;margin:0;padding:0}
.main-list a{display:block;font:700 var(--fs-6)/var(--lh-6) var(--font-display);letter-spacing:-.03em}
.main-list a:hover,.main-list .current-menu-item>a,.main-list .current-cat>a,.main-list .current_page_item>a{color:var(--acc)}
.mside h2{font:500 var(--fs-s)/var(--lh-s) var(--font-text);color:var(--mut);margin:0 0 var(--sp-2)}
.recent a{display:block;padding:var(--sp-2) 0;border-top:1px solid var(--line);font:700 var(--fs-1)/var(--lh-1) var(--font-display);letter-spacing:-.01em}
.recent a:hover{color:var(--acc)}
.recent small{display:block;font:400 var(--fs-s)/var(--lh-s) var(--font-text);color:var(--mut);letter-spacing:0}
.small-nav{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.small-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-s);color:var(--mut)}
.small-nav a{min-height:var(--tap);display:inline-flex;align-items:center}
.small-nav a:hover{color:var(--ink)}

/* Einträge blenden nacheinander ein, sobald der Vorhang oben ist */
.overlay-menu .main-list li,.overlay-menu .mside{opacity:0;transform:translateY(var(--sp-2));transition:opacity .2s ease,transform .2s ease}
.overlay-menu.is-open .main-list li,.overlay-menu:target .main-list li,
.overlay-menu.is-open .mside,.overlay-menu:target .mside{opacity:1;transform:none;transition:opacity .45s ease calc(.2s + var(--i,0) * .06s),transform .45s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0) * .06s)}
.main-list li:nth-child(1){--i:0}.main-list li:nth-child(2){--i:1}.main-list li:nth-child(3){--i:2}
.main-list li:nth-child(4){--i:3}.main-list li:nth-child(5){--i:4}.main-list li:nth-child(6){--i:5}
.main-list li:nth-child(7){--i:6}.main-list li:nth-child(n+8){--i:7}
.overlay-menu .mside{--i:3}

.search-panel{transition:visibility 0s linear .4s}
.search-panel.is-open,.search-panel:target{visibility:visible;transition:visibility 0s}
.search-scrim{position:absolute;inset:0;background:rgba(15,31,61,.45);opacity:0;transition:opacity .4s ease}
.search-panel.is-open .search-scrim,.search-panel:target .search-scrim{opacity:1}
.search-box{position:relative;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--sp-3) 0 var(--sp-5);transform:translateY(-101%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.search-panel.is-open .search-box,.search-panel:target .search-box{transform:none}
.sq-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut)}
.sq{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);border-bottom:2px solid var(--ink)}
.sq:focus-within{border-color:var(--acc)}
.sq input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:700 var(--fs-5)/var(--lh-5) var(--font-display);letter-spacing:-.03em;padding:var(--sp-2) 0;-webkit-appearance:none;appearance:none;border-radius:0}
.sq input::placeholder{color:var(--mut);opacity:.6}
.sq input:focus,.sq input:focus-visible{outline:0}
.sq input::-webkit-search-cancel-button{display:none}
.sq button{width:var(--field-h);height:var(--field-h);border-radius:50%;border:0;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.sq button:hover{background:var(--acc);color:var(--on-acc)}
.sq-hint{margin:var(--sp-2) 0 0;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut)}
@media (prefers-color-scheme:dark){.search-scrim{background:rgba(0,0,0,.6)}}
@media (prefers-reduced-motion:reduce){
  .overlay-menu,.overlay-menu.is-open,.overlay-menu:target,.search-panel,.search-scrim,.search-box,.overlay-menu .main-list li,.overlay-menu .mside{transition:none!important}
  .overlay-menu .main-list li,.overlay-menu .mside{opacity:1;transform:none}
}

/* ==========================================================================
   Fuß
   ========================================================================== */
.site-footer{margin-top:var(--sp-7);border-top:1px solid var(--line);padding:var(--sp-5) 0}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap}
.site-footer .logo{font-size:var(--fs-2)}
.foot-r{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-3);font-size:var(--fs-s);color:var(--mut);flex-wrap:wrap}
.site-footer li a{min-height:var(--tap);display:inline-flex;align-items:center}
.site-footer li a:hover{color:var(--ink)}
.site-footer small{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mut)}

/* ==========================================================================
   Mittlere und kleine Bildschirme (Größen und Abstände kommen aus den Tokens)
   ========================================================================== */
@media (min-width:901px) and (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-media .img{height:20rem}
  .hero .txt{grid-template-columns:1fr;gap:var(--sp-3)}
  .hero--text h1,.hero--text.is-long h1{max-width:none}
  .hero--text .bot{grid-template-columns:1fr;gap:var(--sp-3)}
  .grid{grid-template-columns:1fr}
  .it{grid-template-columns:1fr;gap:var(--sp-1)}
  .it .d{display:flex;gap:var(--sp-2)}
  .it .d span{margin-top:0}
  .it .th{width:100%;height:10rem;order:-1;margin-bottom:var(--sp-1)}
  .months{columns:1}
  .entry-media figcaption{margin-left:0}
  .entry-media .img{height:16rem}
  .entry-content .alignwide,.entry-content .alignfull{margin-left:0;margin-right:0}
  .entry-content blockquote,.entry-content .wp-block-pullquote{margin:var(--sp-5) 0;padding:var(--sp-3)}
  .pn,.comment-form .two{grid-template-columns:1fr}
  .pn .next{grid-column:1}
  .comment-list .children{margin-left:var(--sp-3)}
  .mgrid{grid-template-columns:1fr;gap:var(--sp-5);padding-top:var(--sp-3)}
  .foot-r{justify-content:flex-start}
  .navigation.pagination .prev,.navigation.pagination .next{padding:0 var(--sp-2)}
}
@media (max-width:600px){
  .logo{font-size:var(--fs-2)}
}