/*
Theme Name: photoeditions v2 — Veredelung
Theme URI: https://photoeditions.de
Author: IDEL — Individuelle DesignLeistungen
Author URI: https://idel.org
Description: Eigenes Theme fuer photoeditions.de. Startseite und Unterseiten werden vollstaendig ueber das Backend-Menue „Sektionen“ gepflegt (eine Maske je Sektion, Reihenfolge per Drag & Drop). Editionen, Bild des Monats, Handwerk und Echt-Universum sind eigene Beitragstypen. Kein redaktioneller Inhalt im Code.
Version: 2.4.40
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: photoeditions
Tags: photography, portfolio, custom-colors, custom-menu, editor-style, block-styles
*/

/* ==========================================================================
   0 · Schriftgrößen — Stand v1.4.0
   Alle Textgrößen außer H1 und H2 sind gegenüber v1.3.0 um 25 % gewachsen.
   H1 (Hero, Edition, Seitenkopf) und H2 (Sektionsüberschriften) sind
   unverändert und behalten ihre clamp()-Werte.
   ========================================================================== */

/* ==========================================================================
   1 · Tokens
   ========================================================================== */
:root{
  --ink:#000;   /* v2.4.6: 100 % Schwarz auf hellem Grund (Martin, 28.07.) — war #111 */
  --sub:#6f6f6f;
  --line:#e6e6e6;
  --bg:#fff;
  --tile:#f2f1ef;
  --accent:#fdd247;        /* Silke-Gelb, Quelle: diegeister-Prototyp */
  --accent-strong:#d9b121;
  --wrap:1200px;
}

/* ==========================================================================
   2 · Reset / Basis
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
/* v2.4.37: Sicherheitsnetz gegen seitliches Schieben. In Chrome ist bei 375 px
   KEIN Ueberlauf messbar (documentScrollWidth == Viewport), auf iOS trat trotzdem
   ein weisser Streifen rechts auf. "clip" statt "hidden": hidden wuerde einen
   Scroll-Container erzeugen und den sticky Header brechen, clip nicht.
   Im Rahmentest bei 375 px geprueft: Header bleibt position:sticky. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* v2.4.28: Auszeichnungen kraeftiger als der Browser-Standard 700, der gegen den
   300er-Fliesstext unruhig wirkte. v2.4.31: von 600 auf 500 zurueckgenommen
   (Martin) — ruhiger, gleiche Stufe wie die Unterueberschriften. */
strong,b{font-weight:500}
figure{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:999;background:#fff;color:var(--ink);padding:10px 16px;border:1px solid var(--ink);width:auto;height:auto;clip:auto}

/* Cover-Bilder (Hero, Karten): füllen ihren Rahmen */
.cover img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   3 · Announcement-Bar
   ========================================================================== */
.announce{display:block;background:var(--accent);color:var(--ink);text-align:center;font-size:15.5px;letter-spacing:.04em;padding:9px 16px}
.announce a{color:inherit;border-bottom:1px solid rgba(17,17,17,.45)}
.announce a:hover{border-bottom-color:var(--ink);background:rgba(255,255,255,.35)}
/* v2.4.31: eigener 600er-Wert entfernt — sonst waere der Ankuendigungsbalken
   als einzige Stelle schwerer als alle uebrigen Auszeichnungen. Gilt die
   globale strong/b-Regel. */
.announce .more{margin-left:6px;white-space:nowrap}

/* ==========================================================================
   4 · Header / Navigation
   ========================================================================== */
header.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{font-size:21px;letter-spacing:.02em;font-weight:600;white-space:nowrap}
.logo span{font-weight:300;color:var(--sub)}
.logo img{max-height:40px;width:auto}
.site-nav > ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.site-nav > ul > li > a{display:block;font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:0;white-space:nowrap}
.site-nav > ul > li > a:hover{color:var(--sub)}
.site-nav .current-menu-item > a,.site-nav .current-menu-parent > a{font-weight:400}   /* kein Sonderfall: alle Punkte sehen gleich aus */
.navside{display:flex;align-items:center;gap:20px}
.navbtn{display:inline-block;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:13px 28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.navbtn:hover{background:#fff;color:var(--ink)}
/* Mobiles Menü als Hamburger (Martin, 17.07.): Drei-Balken-Icon statt „Menü"-Text.
   Beim Öffnen (aria-expanded=true) klappen die Balken zum X. */
.navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:42px;padding:0;background:none;border:1px solid var(--ink);cursor:pointer}
.navtoggle .bar{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   5 · Hero — NUR Typografie und Buttons

   ACHTUNG, hier liegt eine Falle. Der Hero wird an DREI Stellen definiert,
   und die spaetere gewinnt:

     1. hier            nur noch Schriftgroessen, .ctas und .cta-*
     2. Abschnitt 16    "Dunkler Hero" — Layout, Farben, Bild, .inner (Desktop)
     3. Abschnitt 16    @media(max-width:700px) — die MOBILE Fassung

   Wer Abstaende oder Farben des Heros aendern will, muss in Abschnitt 16
   arbeiten. Aenderungen hier werden dort ueberschrieben und wirken nicht.
   (Am 26.08. genau so passiert: padding-bottom hier gesetzt, ohne Wirkung.)
   ========================================================================== */

.hero > img{display:block}

.hero h1{font-size:clamp(36px,5.5vw,64px);font-weight:300;letter-spacing:-.01em;line-height:1.05;margin:12px 0 0}
.hero p{margin-top:18px;font-weight:300;line-height:1.58;width:100%}
.hero .credit{font-size:15px;line-height:1.45}   /* Position und Farbe: Abschnitt 16 */
.ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.cta-solid{display:inline-block;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:13px 28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.cta-solid:hover{background:#fff;color:var(--ink)}
.cta-line{display:inline-block;border:1px solid var(--ink);color:var(--ink);padding:13px 28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.cta-line:hover{background:var(--tile)}

/* ==========================================================================
   6 · Trust-Strip
   ========================================================================== */
.trust{}
.trust .wrap{padding-top:18px;padding-bottom:18px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15.5px;color:var(--sub);letter-spacing:.02em}

/* ==========================================================================
   7 · Sektionen
   ========================================================================== */
section{padding:84px 0}
.has-line{border-bottom:1px solid var(--line)}   /* Trennlinie am Ende eines Bereichs — pro Bereich schaltbar */
h2{font-size:clamp(24px,3vw,34px);font-weight:300;letter-spacing:-.01em;margin:10px 0 8px}
/* v2.4.29: Eine Regel für alle Unterüberschriften. Vorher standen Kacheltitel auf
   22,5 px, Editionskarten auf 19 px und Kontinuitäts-Kacheln auf 17 px — obwohl
   „.grid" und „.stations" beide vierspaltig sind, die Kacheln also gleich breit
   laufen. Das war keine Entscheidung, das war gewachsen. */
h3,h4{font-size:19px;font-weight:500;margin:10px 0 6px}
.sub{color:var(--ink);font-size:22.5px;font-weight:300;max-width:66ch;line-height:1.58}   /* v2.4.5: wie Hero-Fliesstext · v2.4.6: schwarz statt grau */

.statement{background:var(--tile);text-align:center}   /* eigene Farbe im Backend überschreibt das inline */
/* v2.4.29: Größen-Sonderweg entfernt — war clamp(26px,3.4vw,42px) und damit bis zu
   8 px größer als alle anderen Sektionstitel. Fiel nicht auf, weil die Statement-
   Sektion seit v2.4.14 aus ist; beim Wiedereinschalten wäre die Überschrift aus der
   Reihe gefallen. Soll das Statement bewusst lauter sein, hier gezielt wieder setzen. */
.statement .body{margin:20px auto 0;max-width:62ch;font-size:20px;line-height:1.58;font-weight:300;color:var(--ink)}
.statement .body p + p{margin-top:16px}
.statement .fine{margin-top:22px;font-size:16px;color:var(--sub);font-style:italic}

/* Bild des Monats */
.bdm{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;margin-top:26px}
.bdm .pic{background:var(--tile)}
.bdm .pic img{width:100%;height:auto}   /* Originalverhältnis, keine Umfärbung — Farbe bleibt Farbe */
.bdm .pic .caption{margin:10px 2px 0;font-size:15px;line-height:1.45;color:var(--sub)}   /* Bildunterschrift direkt unter dem Bild */
/* v2.4.29: Abstände an die globale H2-Regel angeglichen (war 14px 0 4px).
   Größe, Gewicht und Laufweite kamen schon immer von dort. */
.bdm .body{margin-top:16px;font-size:19px;line-height:1.49;font-weight:300}
.prov{font-style:normal;color:var(--ink);font-size:22.5px;font-weight:300;line-height:1.58}   /* v2.4.5: wie Hero-Fliesstext · v2.4.6: schwarz · v2.4.20: nicht mehr kursiv */
.price{margin-top:18px;font-size:17.5px}
/* v2.4.31: dito — gilt die globale strong/b-Regel. */
/* v2.4.25: weitere Formate desselben Motivs — leiser als der Ankerpreis. */
.price-more{margin-top:6px;font-size:15.5px;color:var(--sub)}
.scarce{margin-top:6px;font-size:15.5px;color:var(--sub);font-style:italic}
.kiek{margin-top:20px;font-size:15.5px;color:var(--sub)}

.btnrow{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid var(--ink);padding:13px 28px;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;background:none;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--ink);color:#fff}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#fff;color:var(--ink)}

/* Editions-Sektionen */
.colhead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;gap:24px}
.colhead a{font-size:16px;border-bottom:1px solid var(--ink);white-space:nowrap}
.colhead a:hover{color:var(--sub)}
.colintro{max-width:70ch;font-size:22.5px;line-height:1.58;font-weight:300;color:var(--ink);margin-bottom:36px}   /* v2.4.5 · v2.4.6: schwarz */
.colintro p + p{margin-top:14px}
.quote{border-left:2px solid var(--ink);padding:6px 0 6px 22px;margin:26px 0 36px;max-width:66ch}
.quote p{font-size:19px;line-height:1.53;font-style:italic;color:var(--ink);font-weight:300}
.quote .who{margin-top:10px;font-size:15px;color:var(--sub);font-style:normal}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{display:block}
.card .pic{aspect-ratio:3/2;background:var(--tile);overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .pic img{transform:scale(1.025)}
/* v2.4.29: Größe, Gewicht und Abstände kommen aus der globalen h3/h4-Regel. */
.card h4 a{color:inherit;text-decoration:none}
.card h4 a:hover{text-decoration:underline;text-underline-offset:3px}
/* v2.4.31: nicht mehr kursiv. Die übrigen Bildunterschriften (BdM, Hero-Credit)
   waren es nie — diese hier war die Ausnahme. */
.card .meta{font-size:15.5px;color:var(--sub)}
.card .p{font-size:15.5px;margin-top:6px}
/* v2.3.0: Karten-Link zur Einzel-Editionsseite */
.card .edlink{margin-top:10px;font-size:14.5px;letter-spacing:.02em}
.card .edlink a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.card .edlink a:hover{border-bottom-color:var(--ink)}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;border:1px dashed #d8d6d2;color:#9a9791;text-align:center;padding:16px}
.ph .n{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.ph .t{font-size:16px;color:#6f6c66}
.gridnote{margin-top:28px;font-size:16px;color:var(--sub)}
.gridnote a{border-bottom:1px solid var(--ink);color:var(--ink)}

/* Handwerk & Echt-Universum */
.craft{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.echt{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.c{border:1px solid var(--line);padding:38px 34px}
/* v2.4.29: war 22,5 px — jetzt globale h3/h4-Regel. */
.c p{font-size:18px;line-height:1.49;font-weight:300;color:var(--ink)}
.c .btn{margin-top:16px}

/* Handwerk-Karten mit Bild (ab v1.4.0) — Bild randlos oben, Text darunter */
.craft .c{padding:0;display:flex;flex-direction:column}
.craft .c .txt{padding:32px 34px 38px}
.craft .c .pic{aspect-ratio:3/2;background:var(--tile);overflow:hidden;border-bottom:1px solid var(--line)}
.craft .c .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.craft .c.has-pic:hover .pic img{transform:scale(1.03)}
/* Karte „Schwarzweiß" (Feld „Bild in Schwarzweiß zeigen?") — wie die Editions-Karten */
.craft .c.is-bw .pic img{filter:grayscale(1)}

/* Atelier */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.visit .pic{aspect-ratio:4/3;background:var(--tile);overflow:hidden}
.visit .pic img{width:100%;height:100%;object-fit:cover}
.visit .body{font-size:19px;line-height:1.53;font-weight:300;margin-top:16px}
.visit .body p + p{margin-top:14px}
.visit .adr{margin-top:22px;font-size:17.5px;line-height:1.53}
.visit .btn{margin-top:22px}

/* Newsletter */
.news{text-align:center}
.news form{margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap}
.news input[type=email]{border:1px solid var(--ink);border-right:none;padding:14px 20px;font-size:17.5px;width:340px;outline:none;font-family:inherit}
.news input::placeholder{color:#9a9791}
.news button{background:var(--ink);color:#fff;border:1px solid var(--ink);padding:14px 28px;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.news button:hover{background:#333}
.news .fine{margin-top:14px;font-size:15px;color:var(--sub)}

/* ==========================================================================
   8 · Einzel-Edition / Archiv / Seiten
   ========================================================================== */
.edition{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.edition .pic{background:var(--tile);overflow:hidden}
.edition .pic img{width:100%;height:auto}
/* v2.4.29: Größe kommt aus der gemeinsamen Regel für Seitentitel (s. „.page-head h1");
   war clamp(28px,3.4vw,40px) — ein Unterschied von 2 px zu einer sonst gleichen
   Überschrift, offensichtlich unbeabsichtigt. */
.edition h1{margin-bottom:8px}
.edition .body{margin-top:20px;font-size:19px;line-height:1.53;font-weight:300}
.edition .body p + p{margin-top:14px}
.edition dl{margin-top:26px;border-top:1px solid var(--line);font-size:17.5px}
.edition dl div{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.edition dt{width:38%;color:var(--sub)}
.edition dd{flex:1}
/* Größen & Preise — „Größen & Preise" ist ein kleines Label, kein Sektionstitel,
   und wächst deshalb mit dem Text mit. */
.sizes{margin-top:36px}
/* Bewusste Ausnahme, keine Unstimmigkeit: Das ist die Beschriftung über der
   Größentabelle, kein Sektionstitel. In 34 px mager stünde sie sinnentstellend
   groß über einer kleinen Tabelle. (Geprüft v2.4.29.) */
.sizes h2{font-size:20px;font-weight:500;letter-spacing:.02em;margin:0 0 12px}
.sizes table{width:100%;border-collapse:collapse;font-size:17.5px}
.sizes th{text-align:left;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);padding:0 0 8px;border-bottom:1px solid var(--ink)}
.sizes td{padding:12px 0;border-bottom:1px solid var(--line)}
.sizes td + td,.sizes th + th{padding-left:16px}
.sizes .num{text-align:right}
.sizes tbody tr:hover td{background:var(--tile)}
.sizes .fine{margin-top:14px;font-size:15.5px;color:var(--sub);line-height:1.6}

.backlink:hover{color:var(--ink)}

.page-head{padding:64px 0 0}
/* v2.4.29: gemeinsame Regel für Seitentitel — Editionsseite und Fließtextseiten.
   Der Hero-Titel bleibt bewusst größer, er steht allein über einem Bild. */
.edition h1,.page-head h1{font-size:clamp(28px,3.6vw,42px);font-weight:300}
.entry{padding:36px 0 84px;font-size:20px;line-height:1.58;font-weight:300}
.entry .wrap,.page-head .wrap{max-width:860px;margin:0 auto}
.entry input[type=text],.entry input[type=email],.entry input[type=tel],.entry textarea{width:100%;max-width:520px;border:1px solid var(--line);padding:12px 15px;font:inherit;font-size:19px;outline:none;margin-top:6px}
.entry textarea{max-width:100%;min-height:160px}
.entry input:focus,.entry textarea:focus{border-color:var(--ink)}
.entry label{display:block;margin-top:18px;font-size:17.5px;color:var(--sub)}
.entry input[type=submit],.entry button[type=submit]{margin-top:22px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:14px 30px;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.entry input[type=submit]:hover,.entry button[type=submit]:hover{background:#fff;color:var(--ink)}
/* Bewusste Ausnahme, keine Unstimmigkeit: Größe und Gewicht kommen aus der
   globalen Regel, nur der Abstand nach oben ist größer. Auf Fließtextseiten
   (Impressum, Datenschutz) folgen Überschriften direkt auf Absätze und brauchen
   Luft — anders als in Sektionen, wo sie oben stehen. (Geprüft v2.4.29.) */
.entry h2{margin-top:36px}
/* v2.4.29: Größe und Gewicht kommen jetzt aus der globalen h3/h4-Regel (war 25 px).
   Nur der Obenabstand bleibt größer — wie bei „.entry h2": Auf Fließtextseiten folgen
   Zwischentitel auf Absätze und brauchen Luft. */
.entry h3{margin-top:28px}
.entry p{margin-top:16px}
.entry ul,.entry ol{margin:16px 0 16px 22px}
.entry li{margin-top:8px}
.entry a{border-bottom:1px solid var(--ink)}
.entry img{margin:24px 0}
.entry blockquote{border-left:2px solid var(--ink);padding-left:22px;margin:24px 0;font-style:italic;color:var(--ink)}

/* ==========================================================================
   9 · Footer
   ========================================================================== */
footer.site-footer{border-top:0;padding:44px 0;font-size:15.5px;color:var(--sub)} /* v2.2.0: Linie ueber dem Footer entfernt (Martin) */
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:0;padding:0}
footer a:hover{color:var(--ink)}

/* ==========================================================================
   10 · Responsive
   ========================================================================== */
@media(max-width:900px){
  .bdm,.visit,.edition{grid-template-columns:1fr}
  .grid,.echt{grid-template-columns:repeat(2,1fr)}
  .craft{grid-template-columns:1fr}
  /* v2.4.33: Der Hamburger stand mittig statt rechts. Ursache war nicht der Button,
     sondern das LEERE div.navside: Auf dem Handy faellt .site-nav aus dem Fluss
     (position:absolute), uebrig bleiben Logo, Button und das leere Div als drei
     Flex-Kinder — justify-content:space-between setzt den Button dann in die Mitte.
     margin-left:auto schiebt ihn nach rechts, das leere Div wird ausgeblendet. */
  .navtoggle{display:flex;margin-left:auto}
  /* v2.4.35: Ausrichtung ueber das LOGO statt ueber den Button.
     Die Logodatei (assets/photoeditions-logo-1000.png, 1000x232) hat 16 px
     transparenten Rand links. Bei max-height 40 px ist das Bild 172,4 px breit,
     der unsichtbare Rand also 16 * 40/232 = 2,76 px. Sichtbar begann das Logo
     dadurch erst bei 27,76 px, die Buttonkante schon bei 25 px.
     Der negative Einzug holt das sichtbare Logo auf dieselben 25 px wie den Button.
     v2.4.34 hatte es umgekehrt geloest (margin-right am Button) — zurueckgenommen,
     weil nichts nach rechts hinausragen darf.
     ACHTUNG: Wird das Logo ersetzt, muss der Wert neu berechnet werden. Sauberer
     waere, den transparenten Rand aus der Bilddatei zu schneiden; dann kann diese
     Regel ersatzlos entfallen. */
  .logo img{margin-left:-2.76px}
  /* v2.4.37: WAR VORHER ".navside:empty" — und hat nie gegriffen. Zwischen
     <div class="navside"> und </div> stehen Zeilenumbrueche, und :empty scheitert
     bereits an einem Textknoten aus Leerraum. Das Div blieb also im Layout, und der
     gap:24px der Navigationsleiste schob den Button 24 px nach innen: gemessen
     49 px statt 25 px vom rechten Rand. Das Div ist seit v1.4.1 dauerhaft leer
     (Header-Button "Anfrage" entfernt), deshalb ohne Bedingung ausblenden. */
  .navside{display:none}
  .site-nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);padding:16px 25px 24px}
  .site-nav.open{display:block}
  /* Mobil (Martin, 17.07.): eingeklapptes Menü rechtsbündig. v2.4.33: 25 px Rand. */
  .site-nav > ul{flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
  .site-nav > ul > li > a{font-size:14px}
  .navbtn{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 25px}
  .grid,.echt{grid-template-columns:1fr}
  .news input[type=email]{border-right:1px solid var(--ink);width:100%}
  .news button{width:100%;margin-top:10px}
  section{padding:60px 0}
}

/* ==========================================================================
   11 · Verbund-Footer („Studio Eschenstieg")
   Identisch auf allen sechs Domains. Eigene Domain: genannt, nicht verlinkt.
   ========================================================================== */
.netfoot{padding:50px 0 42px;color:var(--ink)}   /* Trennlinie: Schalter im Customizer (.has-line) */
.netfoot-lead{font-size:20px;line-height:1.5;font-weight:400;color:var(--ink)}
.netfoot-roles{margin-top:10px;font-size:20px;line-height:1.58;font-weight:300;color:var(--ink)}   /* wie der Fließtext der Sektionen */
.netfoot-list{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:26px 0 0;padding:0;font-size:16px}
.netfoot-list li{border:1px solid var(--line);margin-left:-1px;margin-top:-1px;text-align:center}
.netfoot-list li a,
.netfoot-list li .is-self{display:block;padding:18px 10px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.netfoot-list li a:hover{background:var(--tile)}
.netfoot-list li .is-self{color:var(--sub)}
@media(max-width:900px){
  .netfoot-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .netfoot{padding:38px 0 32px}
  .netfoot-lead{font-size:18px}
  .netfoot-roles{font-size:18px;line-height:1.53}
  .netfoot-list{grid-template-columns:repeat(2,1fr);font-size:15px}
  .netfoot-list li a,.netfoot-list li .is-self{padding:15px 8px}
}

/* ==========================================================================
   12 · Hero auf kleinen Geräten — nur Maße, das Prinzip bleibt gleich
   ========================================================================== */
@media(max-width:700px){
  .wrap{padding:0 25px}          /* v2.4.33: 25 px — Header, Sektionen, Footer und Hero-Text: derselbe Rand */
  
  /* v2.4.36 (Martin, 26.08.): Bildnachweis auf dem Handy ausblenden. Er stand unter
     den Buttons, brach dort auf drei Zeilen um und trennte Hero und Fliesstext.
     Der Text bleibt als alt-Attribut am Hero-Bild erhalten, geht also weder fuer
     Screenreader noch fuer Suchmaschinen verloren. */
  .hero .credit{display:none}
  .hero h1{max-width:none;margin-top:10px}
  .hero p{max-width:none;width:100%;margin-top:14px;font-size:22.5px;line-height:1.53}   /* v2.4.4: +25 % */
  .hero .credit{font-size:14px}
  /* v2.4.38 (Martin, 26.08.): Beide Buttons gleich breit. Ein Raster mit EINER Spalte
     in der Breite des breiteren Buttons — die Elemente fuellen die Spalte automatisch aus.
     Bleibt kompakt und linksbuendig statt ueber die volle Breite zu laufen.
     minmax(0,max-content) faengt ab, dass eine sehr lange Beschriftung ueberlaeuft.
     Gemessen bei 375 px: beide 236,2 px. */
  .ctas{margin-top:22px;display:grid;grid-template-columns:minmax(0,max-content)}
}

/* ==========================================================================
   13 · Sektion „Die Idee" (3-Stufen-Modell, ab 13.07.)
   ========================================================================== */
.idea-body,.idea-fine{max-width:70ch}   /* Zeilenlänge lesbar, linke Kante bündig mit allen Sektionen */
.idea-body{margin-top:18px;font-size:20px;line-height:1.58;font-weight:300;color:var(--ink)}
.idea-body p + p{margin-top:18px}
.idea-fine{margin-top:22px;font-size:20px;font-weight:500}
@media(max-width:700px){
  .idea-body{font-size:18px;line-height:1.53}
  .idea-fine{font-size:18px}
}

/* ==========================================================================
   15 · Pfeil-Buttons + Untermenüs (ab v3.0.0)
   ========================================================================== */
.is-arrow::after{content:"\00a0\00a0\2192";display:inline-block;transition:transform .15s ease}
.is-arrow:hover::after{transform:translateX(3px)}

.site-nav li{position:relative}

/* Aufklapper „Künstler" — kein Dreieck, keine harte Kante:
   eine ruhige Karte, die einblendet. Der unsichtbare Steg (::after) verhindert,
   dass sie zuklappt, wenn die Maus die Lücke zwischen Punkt und Karte quert. */
.site-nav .menu-item-has-children > a::after{content:none}
.site-nav .menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}

.site-nav .sub-menu{
  position:absolute;top:calc(100% + 16px);left:-20px;z-index:30;
  display:flex;flex-direction:column;gap:0;min-width:230px;margin:0;padding:8px 0;list-style:none;
  background:#fff;border:1px solid var(--line);box-shadow:0 16px 40px rgba(17,17,17,.09);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
.site-nav li:hover > .sub-menu,.site-nav li:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
}
.site-nav .sub-menu li{width:100%}
.site-nav .sub-menu a{
  display:block;padding:10px 20px;white-space:nowrap;
  font-size:16px;font-weight:300;letter-spacing:0;text-transform:none;   /* Namen bleiben Namen */
  color:var(--ink);border-bottom:0;border-left:2px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.site-nav .sub-menu a:hover{background:var(--tile);border-left-color:var(--ink);color:var(--ink)}

@media (max-width:900px){
  .site-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:4px 0 2px 16px;min-width:0;background:none;transition:none}
  .site-nav .sub-menu a{padding:7px 0;font-size:17px}
  .site-nav .menu-item-has-children::after{content:none}
}

/* ==========================================================================
   16 · Bereich mit dunklem Hintergrund (ab v3.3.0)
   Die Farb-Variablen kommen inline vom Bereich selbst (pe_bg_style()).
   Hier stehen nur die Stellen, die feste Farben tragen und mitdrehen müssen.
   ========================================================================== */
.is-dark{color:var(--ink)}
.is-dark .body,.is-dark .idea-body,.is-dark .statement .body{color:rgba(255,255,255,.82)}
.is-dark .btn{border-color:var(--ink);color:var(--ink)}
.is-dark .btn:hover{background:rgba(255,255,255,.12)}
.is-dark .btn-solid{background:var(--ink);color:var(--bg)}          /* Text = Hintergrund des Bereichs */
.is-dark .btn-solid:hover{background:transparent;color:var(--ink)}
.is-dark .cta-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.is-dark .cta-solid:hover{background:transparent;color:var(--ink)}
.is-dark a{color:var(--ink)}

/* ==========================================================================
   17 · Bild des Monats — Archiv & Verweise (ab v3.5.0)
   ========================================================================== */
.bdm-archive{margin-top:18px;font-size:16px}
.bdm-archive a{color:var(--sub)}
.bdm-archive a:hover{color:var(--ink)}
.bdm-badge{margin-top:18px;font-size:16px;font-weight:500}
.bdm-badge a{border-bottom:1px solid var(--ink)}
.backlink{font-size:16px;color:var(--sub)}

/* ==========================================================================
   v3.7.0 · Kachel-Sektionen (Kontinuität / Bestsellers)
   ========================================================================== */
.stations{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
/* v1.7.0: Spaltenzahl folgt der Zahl gefuellter Kacheln (Sektions-Maske) */
.stations.cols-2{grid-template-columns:repeat(2,1fr)}
.stations.cols-3{grid-template-columns:repeat(3,1fr)}
.stations.cols-4{grid-template-columns:repeat(4,1fr)}
.station{border:1px solid var(--line);padding-bottom:26px;background:var(--bg)}
.station .pic{aspect-ratio:4/3;background:var(--tile);overflow:hidden}
.station .pic img{width:100%;height:100%;object-fit:cover;display:block}
.station .txt{padding:22px 24px 0}
.station .yr{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
/* v2.4.29: war 17 px — jetzt globale h3/h4-Regel. Die Kacheln sind genauso breit
   wie die der übrigen Raster, es gab keinen Grund für eine eigene Größe. */
.station p{line-height:1.44;font-weight:300;color:var(--ink)}
.station.is-now{border-color:var(--ink)}
.station.is-now .yr{color:var(--ink);font-weight:600}
/* v2.4.2: .cols-2/3/4 (zwei Klassen) überstimmten die Mobile-Regeln (eine Klasse) —
   Kachel-Sektionen blieben deshalb auf dem Handy mehrspaltig. Varianten explizit mitnehmen. */
@media(max-width:900px){.stations,.stations.cols-2,.stations.cols-3,.stations.cols-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stations,.stations.cols-2,.stations.cols-3,.stations.cols-4{grid-template-columns:1fr}}

/* ==========================================================================
   photoeditions v2 · Dunkler Hero nach Mockup v2 (16.07.2026)
   ========================================================================== */
.hero{position:relative;background:#1a1a1a;color:#fff;min-height:66vh;display:flex;align-items:flex-end;overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;background:#1a1a1a} /* v1.0.1: S/W-Filter entfernt · v1.0.2: volle Deckkraft, Abdunklung nur noch per Verlauf */
/* v1.0.2: Verlauf statt flaechiger Abdunklung — unten (Textzone) so dunkel wie bisher, oben ungefiltert */
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(26,26,26,.55) 0%,rgba(26,26,26,.4) 30%,rgba(26,26,26,0) 70%)}
.hero .inner{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:72px;color:#fff}
.hero .eyebrow{color:#fff}   /* v2.4.3: Hero-Text 100 % Weiß (Martin, 28.07.) */
.hero h1{color:#fff;max-width:20ch}
.hero p{color:#fff;max-width:52ch;font-size:22.5px}   /* v2.4.4: +25 % (Martin, 28.07.) */
.hero .ctas a.cta-solid{background:#fff;color:var(--ink);border-color:#fff}
.hero .ctas a.cta-solid:hover{background:transparent;color:#fff}
.hero .ctas a.cta-solid:nth-child(2){background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero .ctas a.cta-solid:nth-child(2):hover{border-color:#fff;background:rgba(255,255,255,.1)}
.hero .credit{position:absolute;right:32px;bottom:20px;z-index:2;margin:0;padding:0;color:rgba(255,255,255,.5);text-align:right}

/* ==========================================================================
   photoeditions v2 · v1.2.0 (16.07.2026, Martin)
   1) Mobil: Hero-Bild 2:3, Text darunter auf Weiß (wie v1-Prinzip)
   2) Kontinuität volle Breite · 3) Hover-Großansicht (Kacheln + BdM)
   4) Kachel-Fließtext +15 % · 5) BdM ohne Buttons (Markup)
   ========================================================================== */
/* v1.3.0: volle Breite zurückgenommen — nur die Einleitung nutzt die ganze Boxbreite */
#kontinuitaet .sub{max-width:100%}
.station p{font-size:16.7px}

/* v1.3.1: Großansicht per KLICK (Klick öffnet, Klick/Esc schließt), Bild 1000 px breit */
.pic.has-zoom{cursor:zoom-in}
.pe-lightbox{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(17,17,17,.88);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease;cursor:zoom-out}
.pe-lightbox{flex-direction:column;gap:16px} /* v2.1.0: Platz fuer die Bildunterschrift */
.pe-lightbox img{width:min(1000px,92vw) !important;height:auto !important;max-width:none;max-height:84vh !important;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
/* v2.1.0: Titel + Beschreibung aus der Mediathek unter der Grossansicht */
.pe-lb-cap{display:block;color:#fff;text-align:center;max-width:min(1000px,88vw);font-size:15px;line-height:1.5}
.pe-lb-cap strong{display:block;font-weight:600;font-size:16.5px;letter-spacing:.02em;margin-bottom:2px}
.pe-lb-cap .d{color:rgba(255,255,255,.72)} /* v1.6.0: zurueck auf 1000 px; !important wegen .card/.station/.bdm .pic img{width:100%} */
/* v1.6.0: Blaettern in der Grossansicht */
.pe-lb-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:96;display:none;background:none;border:0;color:#fff;font-size:56px;font-weight:200;line-height:1;padding:24px 20px;cursor:pointer;opacity:.75;font-family:inherit}
.pe-lb-nav:hover{opacity:1}
.pe-lb-nav.prev{left:8px}
.pe-lb-nav.next{right:8px}
body.pe-lb-open .pe-lb-nav{display:block}
.pe-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}

@media(max-width:700px){
  .hero{display:block;min-height:0;background:#fff;color:var(--ink)}
  .hero::after{content:none}
  /* Mobil (Martin, 17.07.): Hero-Bild im Querformat, VOLLSTÄNDIG sichtbar — kein Beschnitt.
     Bild oben, Text darunter auf Weiß. Natürliches Seitenverhältnis (height:auto), kein cover-Crop. */
  .hero > img{position:static;width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;opacity:1}
  .hero .inner{position:static;padding-top:26px;padding-bottom:22px;color:var(--ink)}   /* v2.4.39: 22 px unter den Buttons — derselbe Abstand wie darueber (.ctas margin-top) */
  .hero .eyebrow{color:var(--sub)}
  .hero h1{color:var(--ink)}
  .hero p{color:var(--ink)}   /* v2.4.6: schwarz auf Weiß (Mobil) */
  .hero .ctas a.cta-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
  .hero .ctas a.cta-solid:hover{background:#fff;color:var(--ink)}
  .hero .ctas a.cta-solid:nth-child(2){background:transparent;color:var(--ink);border-color:var(--ink)}
  .hero .credit{position:static;margin-top:8px;padding-right:20px;color:var(--sub)}
  .pe-lightbox{display:none} /* Hover-Ebene ist ein Desktop-Muster */
}

/* ==========================================================================
   18 · Video-Sektion (Vimeo, Zwei-Klick) — ab v2.4.21
   Ausgeliefert wird nur das Vorschaubild. Der Player kommt erst auf Klick.
   ========================================================================== */
.videobox{position:relative;margin-top:30px;background:var(--tile);overflow:hidden}
.videobox.ratio-16-9{aspect-ratio:16/9}
.videobox.ratio-21-9{aspect-ratio:21/9}
.videobox.ratio-4-3{aspect-ratio:4/3}
.videobox.ratio-1-1{aspect-ratio:1/1}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.videoplay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.videoplay img{width:100%;height:100%;object-fit:cover}
.videoplay:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Abspiel-Knopf: weisser Kreis mit schwarzem Dreieck, mittig */
.videoicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.92);display:block;transition:background .2s ease,transform .2s ease}
.videoicon::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent var(--ink)}
.videoplay:hover .videoicon,.videoplay:focus-visible .videoicon{background:#fff;transform:translate(-50%,-50%) scale(1.06)}

.videofine{margin-top:14px;font-size:15.5px;color:var(--sub)}

@media (max-width:700px){
  .videoicon{width:64px;height:64px}
  .videoicon::after{border-width:11px 0 11px 18px}
}

/* ==========================================================================
   19 · WordPress-Adminleiste auf dem Handy — ab v2.4.36
   Gemessen am 26.08.2026 bei 375 px Viewport: span.display-name der Adminleiste
   reicht bis 568 px, also fast 200 px ueber den Bildschirmrand. Chrome kappt das
   an einem Elternelement, iOS Safari nicht — dort wird die Seite dadurch seitlich
   schiebbar und rechts erscheint ein weisser Streifen.
   Betrifft AUSSCHLIESSLICH eingeloggte Benutzer; Besucher sehen die Leiste nie.
   Das Theme selbst ragt an keiner Stelle ueber den Viewport hinaus.
   ========================================================================== */
@media(max-width:782px){
  #wpadminbar .display-name{display:none}
  #wpadminbar{overflow:hidden}
}