/*
Theme Name: COVER
Theme URI: https://sandraschink.de
Author: Sandra Schink
Author URI: https://sandraschink.de
Description: Ein Magazin-Theme fuer Fotoreportagen. Vier Kategorien als Cover, Schwarzweiss mit pudrigem Akzent, viel Weissraum, Falz-Navigation. Handgebaut, ohne Page-Builder.
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cover
*/

/* ============================================================
   SCHRIFTEN  (lokal – siehe fonts/fonts.css fuer @font-face)
   Kategorie-Zuordnung:
     P3200    -> Space Mono
     HMI      -> Anton
     People   -> Monoton
     Exterior -> Playfair Display
   Marke/Deko -> Bodoni Moda
   Fliesstext -> Inter
   ============================================================ */

:root{
  --paper:#faf9f7;
  --ink:#1a1a1a;
  --text:#2e2e2e;
  --muted:#999;
  --line:#e4e0d8;
  /* pudrige Kategorie-Akzente */
  --c-p3200:#f2ccb3;   /* apricot  */
  --c-hmi:#b8ded0;     /* mint     */
  --c-people:#f2ccb3;  /* apricot  */
  --c-exterior:#c9c2e8;/* lavendel */
  --falz-w:64px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  line-height:1.7;
}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* ---------- LAYOUT: Falz links + Inhalt ---------- */
.layout{display:grid;grid-template-columns:var(--falz-w) 1fr;min-height:100vh;}

.falz{
  border-right:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:center;
  position:sticky;top:0;height:100vh;
}
.falz .stack{
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:1.6rem;
  font-family:'Inter',sans-serif;font-weight:400;font-size:13px;
  letter-spacing:.28em;text-transform:uppercase;
  margin-top:calc(2.5rem + 32px + 2.5rem);
}
.falz a{text-decoration:none;color:#555;transition:color .25s ease;}
.falz a:hover,.falz a.active{color:var(--ink);}
.falz .sep{color:#ccc;}

.content{padding:2.5rem 2.5rem 0;}
.brand{
  font-family:'Bodoni Moda',serif;font-size:32px;font-weight:400;
  letter-spacing:.32em;padding-left:.32em;color:var(--ink);
  text-align:center;margin:0 0 2.5rem;text-decoration:none;display:block;
}

/* ---------- STARTSEITE: JOURNAL-Link (Feed aller Beitraege) ---------- */
/* Klein wie das Falzmenue, zentriert unter dem Titel, ueber den Covern. */
.journal-link{text-align:center;margin:0 0 2.5rem;}
.journal-link a{
  font-family:'Inter',sans-serif;font-weight:400;font-size:13px;
  letter-spacing:.28em;text-transform:uppercase;color:#555;
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;padding-bottom:2px;
}
.journal-link a:hover,.journal-link a:focus-visible{color:var(--ink);border-bottom-color:currentColor;}

/* ---------- STARTSEITE: vier Cover ---------- */
.cover-grid{display:grid;gap:40px;max-width:1200px;margin:0 auto;}
@media (orientation:portrait) and (min-width:600px){ .cover-grid{grid-template-columns:1fr 1fr;} }
@media (orientation:landscape){ .cover-grid{grid-template-columns:repeat(4,1fr);} }

.cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:#111;display:block;text-decoration:none;}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.cover .tint{position:absolute;inset:0;mix-blend-mode:color;}
.cover .grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 32%,transparent 52%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.6) 100%);}
.cover .cat,.cover .headline{
  position:absolute;top:5%;left:0;right:0;padding:0 10px;
  color:#fff;text-align:center;line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.45);transition:opacity .4s ease;
  /* Umbruch nur an Wortgrenzen, niemals Worte trennen */
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.cover .headline{line-height:1.02;}
.cover .headline{opacity:0;}
.cover .date{
  position:absolute;bottom:4%;left:0;right:0;text-align:center;
  font-family:'Inter',sans-serif;font-weight:300;color:#fff;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
@media (hover:hover){
  .cover:hover .cat{opacity:0;}
  .cover:hover .headline,.cover:focus-visible .headline{opacity:1;}
}

/* Kategorie-spezifische Titelschriften + Akzentfarben */
.cat-p3200   .tint{background:var(--c-p3200);opacity:.12;}
.cat-hmi     .tint{background:var(--c-hmi);opacity:.15;}
.cat-people  .tint{background:var(--c-people);opacity:.18;}
.cat-exterior .tint{background:var(--c-exterior);opacity:.14;}

.cat-p3200   .cat,.cat-p3200   .headline{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.02em;font-size:clamp(30px,4.4vw,54px);}
.cat-hmi     .cat,.cat-hmi     .headline{font-family:'Anton',sans-serif;letter-spacing:-.02em;font-size:clamp(40px,6vw,78px);text-transform:uppercase;}
.cat-people  .cat,.cat-people  .headline{font-family:'Monoton',sans-serif;font-size:clamp(22px,3.2vw,42px);}
.cat-exterior .cat,.cat-exterior .headline{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(28px,4.4vw,58px);}
/* Beitragstitel-Headline: eigene Groessen je Kategorie, unabhaengig vom
   kurzen Rubrik-Kuerzel. Deutlich kleiner gesetzt als das Kuerzel, weil ein
   Titel mehr Zeichen hat - aber gross genug, um praesent zu wirken, und mit
   Raum fuer eine zweite Zeile. */
.cat-p3200    .headline{font-size:clamp(22px,2.7vw,34px);}
.cat-hmi      .headline{font-size:clamp(24px,3vw,40px);}
.cat-people   .headline{font-size:clamp(18px,2.2vw,28px);}
.cat-exterior .headline{font-size:clamp(24px,3vw,38px);}

/* ---------- BLOG-UEBERSICHT ---------- */
.blog-list{max-width:1080px;margin:0 auto;}
.entry{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:6.5rem;align-items:stretch;}
.entry .e-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:#111;}
.entry .e-img > a{position:absolute;inset:0;display:block;}
.entry .e-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.entry .e-img .tint{position:absolute;inset:0;mix-blend-mode:color;}
.entry .e-text{display:flex;flex-direction:column;justify-content:space-between;}
.entry .e-cat{font-size:20px;color:#777;margin-bottom:1.1rem;}
.entry .e-title{font-weight:400;font-size:46px;line-height:1;margin:0;}
.entry .e-title a{text-decoration:none;}
.entry .e-excerpt{font-family:'Inter',sans-serif;font-weight:300;font-size:18px;line-height:1.9;color:var(--text);margin:0 0 1.4rem;text-align:left;}
.entry .e-date{font-family:'Inter',sans-serif;font-weight:400;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}

/* Titel in Kategorieschrift */
.entry.cat-p3200   .e-title{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.06em;font-size:38px;}
.entry.cat-hmi     .e-title{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;}
.entry.cat-people  .e-title{font-family:'Monoton',sans-serif;font-size:34px;}
.entry.cat-exterior .e-title{font-family:'Playfair Display',serif;}
/* Kategoriename ebenfalls in der jeweiligen Schrift */
.entry.cat-p3200   .e-cat{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.12em;}
.entry.cat-hmi     .e-cat{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em;}
.entry.cat-people  .e-cat{font-family:'Monoton',sans-serif;}
.entry.cat-exterior .e-cat{font-family:'Playfair Display',serif;text-transform:uppercase;letter-spacing:.08em;}

/* Foto rechts -> Text schmiegt sich rechts an; Fliesstext bleibt links */
.entry.img-right .e-text{order:1;}
.entry.img-right .e-img{order:2;}
.entry.img-right .e-cat,.entry.img-right .e-title,.entry.img-right .e-date{text-align:right;}
.entry.img-left .e-cat,.entry.img-left .e-title,.entry.img-left .e-date{text-align:left;}

/* ---------- EINZELBEITRAG ---------- */
.single-head{max-width:1100px;margin:3.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.single-head .coverwrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:#111;}
.single-head .coverwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* Beitragsbild bewusst in Originalfarbe */
.single-head .coverwrap .tint{display:none;} /* keine Kategorie-Toenung auf dem Farbfoto */
.single-head .coverwrap .grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 22%,transparent 40%);}
.single-head .coverwrap .title{
  position:absolute;top:5%;left:0;right:0;margin:0;padding:0 10px;
  text-align:center;color:#fff;line-height:1.02;font-weight:400;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
  /* Umbruch nur an Wortgrenzen, niemals Worte trennen (wie Startseite) */
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
/* Kategorie im Textblock: kleine Randnotiz ueber dem Datum, in der Kategorieschrift */
.single-head .meta .cat{font-size:clamp(15px,1.5vw,19px);letter-spacing:.1em;color:var(--muted);line-height:1;margin:0 0 .6rem;}
/* Kategorie ist ein Link auf das Kategorie-Archiv - erbt die Optik,
   dezenter Unterstrich erst beim Hover (wie der Orts-Link). */
.single-head .meta .cat a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.single-head .meta .cat a:hover,
.single-head .meta .cat a:focus-visible{
  color:var(--ink);border-bottom-color:currentColor;
}
.single-head .meta .date{font-weight:400;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.single-head .meta .lead{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:24px;line-height:1.55;color:var(--ink);margin:3.5rem 0 0;}

/* Titel auf dem Bild UND Kategorie-Randnotiz im Textblock in Kategorieschrift */
.single.cat-p3200    .coverwrap .title,.single.cat-p3200    .meta .cat{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.02em;}
.single.cat-hmi      .coverwrap .title,.single.cat-hmi      .meta .cat{font-family:'Anton',sans-serif;text-transform:uppercase;}
.single.cat-people   .coverwrap .title,.single.cat-people   .meta .cat{font-family:'Monoton',sans-serif;}
.single.cat-exterior .coverwrap .title,.single.cat-exterior .meta .cat{font-family:'Playfair Display',serif;}
/* Titel auf dem Bild: gross, in der jeweiligen Kategorie-Dimension
   (dieselben Groessen wie die Cover-Headlines auf der Startseite). */
.single.cat-p3200    .coverwrap .title{font-size:clamp(30px,4.4vw,54px);letter-spacing:.02em;}
.single.cat-hmi      .coverwrap .title{font-size:clamp(40px,6vw,78px);letter-spacing:-.02em;}
.single.cat-people   .coverwrap .title{font-size:clamp(22px,3.2vw,42px);}
.single.cat-exterior .coverwrap .title{font-size:clamp(28px,4.4vw,58px);}

/* Fliesstext */
.entry-content p{font-family:'Inter',sans-serif;font-weight:300;font-size:18px;line-height:1.9;color:var(--text);}
.entry-content > p:first-of-type{margin-top:5rem;}
.entry-content > p:first-of-type::first-letter{font-family:'Playfair Display',serif;font-size:76px;line-height:.7;float:left;padding:8px 12px 0 0;color:var(--ink);}
.entry-content h2{font-family:'Playfair Display',serif;font-weight:500;font-size:30px;margin:3rem auto 1rem;}
.entry-content a{color:var(--ink);text-underline-offset:3px;}

/* ---------- BILD-AUSRICHTUNGEN im Beitrag (Gutenberg) ---------- */
/* Schwarzweiss + pudrige Toenung auf alle Beitragsbilder */
.article .wp-block-image img,
/* Bilder im Fliesstext bleiben unangetastet - ob S/W oder Farbe entscheidet das hochgeladene Foto */

/* Content-Spalte: Container ist voll breit, die KINDER werden begrenzt.
   So brauchen alignwide/alignfull keinen 100vw-Trick (der neben der Falz
   und bei sichtbarer Scrollbar horizontal ueberlaeuft), sondern bekommen
   schlicht eine groessere max-width - immer zentriert, nie Overflow. */
.entry-content{max-width:none;margin:0 auto;padding:0;}
.entry-content > *{max-width:640px;margin:0 auto 1.6rem;padding:0 1.5rem;}

/* "Breite Breite" - bricht aus der Textspalte aus */
.entry-content > .alignwide{max-width:1000px;margin-top:5rem;margin-bottom:5rem;}
/* "Volle Breite" - der grosse Atemzug */
.entry-content > .alignfull{max-width:1200px;margin-top:6rem;margin-bottom:6rem;}
/* Zwei Bilder nebeneinander (Spalten-Block) = Diptychon */
.entry-content > .wp-block-columns{max-width:860px;margin-top:6rem;margin-bottom:6rem;gap:40px;}
.entry-content figcaption,
.wp-element-caption{
  font-family:'Inter',sans-serif;font-weight:300;font-size:13px;
  letter-spacing:.04em;color:var(--muted);margin-top:1rem;text-align:left;
}

/* Schluss-Zeichen */
.end-mark{max-width:640px;margin:6rem auto 3rem;text-align:center;}
.end-mark span{font-family:'Bodoni Moda',serif;font-size:22px;letter-spacing:.3em;color:#ccc;}

/* ---------- AUTORINNEN-KASTEN ---------- */
.author-box{max-width:640px;margin:4rem auto;padding:2.5rem 1.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:28px;align-items:center;}
.author-box .photo{flex:0 0 84px;width:84px;height:84px;border-radius:50%;overflow:hidden;background:#111;}
.author-box .photo img{width:100%;height:100%;object-fit:cover;}
.author-box .name{font-family:'Playfair Display',serif;font-size:22px;margin:0 0 .4rem;}
.author-box .text{font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.7;color:#555;margin:0;}

/* Social-Icons im Autorenkasten: dunkelgrau, dezent, auf Hover Akzent */
.author-box .social{display:flex;gap:14px;margin-top:1rem;}
.author-box .soc-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:#3a3a3a;                       /* dunkelgrau, wie gewuenscht */
  border:1px solid var(--line);
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.author-box .soc-link:hover,
.author-box .soc-link:focus-visible{
  color:#fff;background:#3a3a3a;border-color:#3a3a3a;
}
/* Das Fediverse-Zeichen (⁂) ist Text, nicht SVG - Groesse ueber font-size */
.author-box .soc-fedi{font-size:22px;line-height:1;padding-bottom:2px;}

/* ---------- BLAETTERN (chronologisch) ---------- */
.pager{max-width:1000px;margin:2rem auto 6rem;padding:0 1.5rem;display:flex;justify-content:space-between;gap:24px;}
.pager a{flex:1;text-decoration:none;color:inherit;display:flex;flex-direction:column;padding:1.6rem 0;transition:opacity .25s ease;}
.pager a:hover{opacity:.55;}
.pager .prev{align-items:flex-start;text-align:left;}
.pager .next{align-items:flex-end;text-align:right;margin-left:auto;}
.pager .dir{font-family:'Inter',sans-serif;font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;}
.pager .pg-title{font-family:'Playfair Display',serif;font-size:26px;line-height:1;}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:5rem;border-top:1px solid var(--line);padding:2.5rem;text-align:center;}
.site-footer .links{display:flex;justify-content:center;gap:1.2rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#888;margin-bottom:1rem;}
.site-footer .links a{text-decoration:none;color:#888;transition:color .25s;}
.site-footer .links a:hover{color:var(--ink);}
.site-footer .links .sep{color:#ccc;}
.site-footer .copy{font-size:11px;letter-spacing:.1em;color:#bbb;}

/* ---------- FOOTER-SUCHE ---------- */
.footer-search{margin:0 0 1rem;}
.search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:none;border:1px solid var(--line);color:#888;
  cursor:pointer;transition:color .25s,border-color .25s;
}
.search-toggle:hover,.search-toggle:focus-visible{color:var(--ink);border-color:var(--ink);}

/* Panel: standardmaessig (mit JS) eingeklappt, oeffnet weich */
.js .search-panel{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s ease,opacity .3s ease,margin .3s ease;
  margin-top:0;
}
.js .footer-search.is-open .search-panel{
  max-height:80px;opacity:1;margin-top:1rem;
}
/* Ohne JS bleibt das Feld sichtbar und die Lupe ueberfluessig */
.no-js .search-toggle{display:none;}
.no-js .search-panel{margin-top:.5rem;}

/* Das eigentliche Formular */
.cover-searchform{display:inline-flex;align-items:center;gap:0;}
.cover-search-field{
  font-family:'Inter',sans-serif;font-size:13px;
  padding:.55rem .8rem;width:200px;max-width:60vw;
  border:1px solid var(--line);border-right:none;border-radius:2px 0 0 2px;
  background:#fff;color:var(--ink);outline:none;
}
.cover-search-field:focus{border-color:#999;}
.cover-search-submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 .7rem;height:34px;
  border:1px solid var(--line);border-radius:0 2px 2px 0;
  background:var(--ink);color:#fff;cursor:pointer;
}
.cover-search-submit:hover{background:#000;}


/* ---------- MOBIL / SCHMAL ---------- */
@media (max-width:820px){
  .single-head{grid-template-columns:1fr;gap:32px;max-width:520px;padding:0 1.5rem;}
  .single-head .meta{text-align:center;}
  .single-head .meta .lead{margin-top:2.5rem;}
  .entry-content > p:first-of-type{margin-top:3.5rem;}
  .entry-content .wp-block-columns{grid-template-columns:1fr;}
}
@media (max-width:640px){
  /* Titel "PhotoCredit" ist laenger als "COVER" und sprengte mit der
     weiten Sperrung die Viewport-Breite (Seite lud zu breit / abgeschnitten).
     Auf schmalen Schirmen kleiner und enger, damit er sicher hineinpasst. */
  .brand{font-size:clamp(22px,7vw,30px);letter-spacing:.2em;padding-left:.2em;
    max-width:100%;overflow-wrap:break-word;}

  /* Falz bleibt als schmale vertikale Spalte stehen (kein Umklappen nach oben) */
  .layout{grid-template-columns:auto 1fr;}
  .falz{padding-left:.5rem;}
  .falz .stack{gap:1.4rem;font-size:14px;margin-top:1.5rem;padding:0 .5rem;}
  .content{padding:2rem 1.2rem 0;}

  /* Startseite: Cover einspaltig untereinander, damit sie gross genug bleiben */
  .cover-grid{grid-template-columns:1fr;gap:28px;}
  /* Bei nur einer Spalte muss die Headline nicht mehr auf Hover warten -
     Touch-Geraete koennen nicht hovern; darum dauerhaft sichtbar. */
  .cover .cat{opacity:0;}
  .cover .headline{opacity:1;}

  /* Blog-Liste: Bild ueber Text.
     align-items:start verhindert, dass die Grid-Zeile die Bildhoehe
     zusammendrueckt; das padding-top am Link erzwingt das 3:4-Format
     unabhaengig von aspect-ratio (iOS-Safari-sicher). */
  .entry{grid-template-columns:1fr;gap:22px;margin-bottom:4.5rem;align-items:start;}
  .entry .e-img{aspect-ratio:auto;}
  .entry .e-img > a{position:relative;inset:auto;height:0;padding-top:133.33%;}
  .entry.img-right .e-text{order:2;}
  .entry.img-right .e-img{order:1;}
  .entry.img-right .e-cat,.entry.img-right .e-title,.entry.img-right .e-date{text-align:left;}
  .author-box{flex-direction:column;text-align:center;gap:18px;}
  .author-box .social{justify-content:center;}
}

/* ---------- SKIP-LINK + FOKUS ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.8rem 1.4rem;font-family:'Inter',sans-serif;font-size:14px;text-decoration:none;
}
.skip-link:focus{left:0;}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---------- ARCHIV-/SUCH-KOPF + 404 ---------- */
.archive-head{max-width:1000px;margin:0 auto 4rem;padding:0 1.5rem;}
.archive-title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(26px,3.4vw,40px);margin:0;}

/* ---------- STATISCHE SEITE (page.php) ---------- */
.page-plain .page-head{max-width:640px;margin:0 auto;padding:0 1.5rem;text-align:center;}
.page-plain .page-head .title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(28px,4vw,44px);margin:0;}
.page-plain .page-content{margin-top:3rem;}
.page-plain .page-content > p:first-of-type{margin-top:0;}
.page-plain .page-content > p:first-of-type::first-letter{all:unset;}

/* ==========================================================================
   Cover in Originalfarbe bei Mouse-Over (nur Geraete mit Maus/Trackpad).
   Auf Touch-Geraeten gibt es kein Hover - dort bleibt das Cover S/W.
   Die Kategorie-Toenung wird mit ausgeblendet, sonst waere die
   "Originalfarbe" eingefaerbt. Tastatur-Fokus verhaelt sich wie Hover.
   ========================================================================== */
.cover img{transition:filter .45s ease;}
.cover .tint{transition:opacity .45s ease;}
.entry .e-img img{transition:filter .45s ease;}
.entry .e-img .tint{transition:opacity .45s ease;}
@media (hover: hover) and (pointer: fine){
  .cover:hover img,
  .cover:focus-visible img,
  .entry:hover .e-img img,
  .entry:focus-within .e-img img{filter:none;}
  .cover:hover .tint,
  .cover:focus-visible .tint,
  .entry:hover .e-img .tint,
  .entry:focus-within .e-img .tint{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .cover img,.cover .tint,
  .entry .e-img img,.entry .e-img .tint{transition:none;}
}

/* ==========================================================================
   Ort neben dem Datum im Beitragskopf.
   Trenner ist das kleine Schlusszeichen des Themes - Datum und Stadt
   erben die gesperrten Versalien der Datumszeile.
   ========================================================================== */
.single-head .meta .date .place-sep{
  color:#c9c9c9;font-size:9px;margin:0 .9em;
  letter-spacing:0;vertical-align:2px;
}
/* Ort ist ein Link aufs Schlagwort-Archiv - erbt die Datumszeile,
   aber ohne Link-Optik; dezenter Unterstrich erst beim Hover. */
.single-head .meta .date .place{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.single-head .meta .date .place:hover,
.single-head .meta .date .place:focus-visible{
  color:var(--ink);border-bottom-color:currentColor;
}

/* ==========================================================================
   Falz auf niedrigen Displays (13"-Notebooks u. ae.):
   Menue rutscht hoeher und wird minimal kompakter, damit alle
   Punkte sichtbar bleiben, statt unten aus dem Viewport zu laufen.
   ========================================================================== */
@media (min-width: 761px) and (max-height: 900px){
  .falz .stack{margin-top:1.5rem;gap:1.2rem;font-size:12px;}
}

/* ==========================================================================
   Seitentitel auf der STARTSEITE am Desktop groesser.
   Gibt der hohen Falz-Spalte links oben ein visuelles Gegengewicht -
   ohne den Titel auf Beitrags- und Uebersichtsseiten anzufassen.
   clamp() skaliert weich mit der Fensterbreite (ca. 44-64px) statt
   hart zu verdoppeln, damit es auf mittelgrossen Desktops nicht ueberzieht.
   ========================================================================== */
@media (min-width: 900px){
  .home .brand{font-size:clamp(44px, 4.4vw, 64px);margin-bottom:1.5rem;}
}

/* Visuell versteckt, fuer Screenreader lesbar (WP-Konvention) */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}