/* Luna und kein Plan — 1:1-Nachbau im Original-Look (weiß + Koralle), echte Luna-Inhalte. */
:root{
  --paper:#F3F0EA;      /* Wollweiß, Hintergrund */
  --ink:#252A28;        /* Tiefes Graphit, Text */
  --grey:#636763;       /* gedämpftes Grau, dunkel genug für 4,5:1 Kontrast auf allen hellen Flächen */
  --line:#D8D0C3;       /* Steinbeige, Linien/Rahmen */
  --soft:#E4EBEA;       /* helles Nebelblau, Bänder/Teaser */
  --cream:#ffffff;
  --amber:#1F6B7A;      /* Petrol/Teal = Akzent/Icons/Highlights */
  --amber-d:#185763;
  --green:#4F6F64;      /* Fjordgrün, Buttons primär */
  --blue:#3D4442;       /* Schiefergrau, Navigation/Footer/dunkle Flächen */
  --label:#8FA6AA;      /* Nebelblau, Kategorie-Labels */
  --radius:16px;        /* einheitliche Eckenrundung */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',system-ui,sans-serif;color:#46443f;background:var(--paper);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.disp{font-family:'Josefin Sans',sans-serif;font-weight:400;color:var(--ink);line-height:1.2}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap-wide{max-width:1300px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;image-orientation:from-image}

/* Script-Kicker (wie die "Italy"/"Serbia"-Zeilen) */
.kicker,.idx,.place{font-family:'Sacramento',cursive;font-weight:400;font-size:clamp(26px,3vw,34px);color:var(--amber);line-height:1;display:block}
.hello{font-family:'Sacramento',cursive;font-weight:400;font-size:clamp(34px,5vw,60px);color:var(--ink);line-height:1}
.hl{color:var(--amber)}

/* Caps-Label klein */
.eyebrow{font-family:'Josefin Sans';font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}

/* Buttons / Links */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Josefin Sans';font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:12px;padding:15px 32px;background:var(--green);color:var(--paper);border:1px solid var(--green);cursor:pointer;transition:.25s}
.btn:hover{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.btn i{transition:transform .25s ease}.btn:hover i{transform:translateX(3px)}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-amber:hover{background:var(--blue);border-color:var(--blue)}
.lnk{font-family:'Josefin Sans';font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:5px;display:inline-block;transition:.2s}
.lnk:hover{color:var(--amber);border-color:var(--amber)}

figure{margin:0;overflow:hidden;background:#efeae3}
figure img{width:100%;height:100%;object-fit:cover;transition:.7s ease}
figure:hover img{transform:scale(1.04)}

/* blasses Handschrift-Wort im Hintergrund */
.has-wm{position:relative;overflow:hidden}
.has-wm>.wrap,.has-wm>.wrap-wide{position:relative;z-index:1}
.wm{position:absolute;z-index:0;font-family:'Sacramento',cursive;color:var(--ink);opacity:.05;font-size:clamp(160px,32vw,460px);line-height:.7;white-space:nowrap;pointer-events:none;user-select:none;left:50%;top:46%;transform:translate(-50%,-50%)}

section{padding:70px 0}

/* zentrierte Sektionsköpfe */
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.sec-head .place{margin-bottom:2px}
.sec-head h2,.sec-head h1{font-size:clamp(24px,3.4vw,34px);letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.sec-head p{color:var(--grey);margin-top:14px;font-size:18px}

/* ---------- obere schmale Leiste ---------- */
.tbar{position:sticky;top:0;z-index:50;background:var(--blue);height:22px}
.tbar-in{display:none}
.tbar .brandmini{display:flex;align-items:center;gap:8px;letter-spacing:.2em;text-transform:uppercase;color:#adb2ae;font-weight:600;font-size:11px}
.tbar .brandmini i{font-size:16px}
.tbar-menu{display:none;gap:30px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-size:12px;color:#eef0ec}
.tbar-menu a:hover{color:var(--amber)}
.tbar-menu .star{color:var(--amber)}
.tbar-soc{display:flex;align-items:center;gap:15px;color:#adb2ae;font-size:16px}
.tbar-soc a:hover{color:var(--amber)}
.tbar-soc .div{width:1px;height:15px;background:rgba(255,255,255,.16)}
.tbar .tb-burger{font-size:22px;display:inline-flex;color:#eef0ec}
@media(min-width:920px){.tbar-menu{display:flex}.tbar .tb-burger{display:none}}

/* ---------- großer Logo-Block ---------- */
.logoblock{background:var(--paper);padding:38px 0 34px}
.logoblock-in{position:relative;display:flex;flex-direction:column;align-items:center}
.lb-icons{display:none;gap:14px}
.lb-ic{text-align:center;min-width:84px;padding:0 6px;color:var(--ink);transition:.18s}
.lb-ic i{font-size:30px;stroke-width:1.4;color:var(--amber)}
.lb-ic span{display:block;font-family:'Sacramento';font-weight:400;font-size:22px;margin-top:2px;line-height:1.05;white-space:nowrap}
.lb-ic:hover{color:var(--amber)}
.lb-center{text-align:center;flex:none}
.lb-center img{width:auto;height:auto;max-height:116px;max-width:420px;display:inline-block}
.lb-tag{font-family:'Josefin Sans';letter-spacing:.28em;text-transform:uppercase;font-size:11px;color:var(--grey);margin-top:24px;font-weight:500}
/* Desktop: Icons flankieren das Logo in einer Reihe. Die Grenze liegt bei
   1200 Pixeln, weil sechs beschriftete Punkte plus Logo darunter nicht
   nebeneinander passen. Schmalere Fenster bekommen das Menue ueber den Knopf. */
@media(min-width:1200px){
  .logoblock-in{flex-direction:row;justify-content:space-between;align-items:center;gap:18px}
  .lb-icons{display:flex}
}
@media(min-width:1360px){
  .logoblock-in{gap:32px}
  .lb-icons{gap:20px}
  .lb-ic{min-width:96px;padding:0 10px}
  .lb-ic i{font-size:32px}
  .lb-ic span{font-size:24px}
}

/* ---------- Erstausstattung / Produktreihe ---------- */
.ess{background:var(--soft)}
.ess-row{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.ess-item{text-align:center}
.ess-item .ph{aspect-ratio:1;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--amber);font-size:42px;transition:.2s}
.ess-item:hover .ph{transform:translateY(-5px)}
.ess-item .lab{font-family:'Josefin Sans';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:14px;font-weight:500}
a.ess-item{display:block;color:inherit}
.ess-item .stars{margin-top:11px}
.ess-item:hover .lab{color:var(--amber)}
.place-card .pic-icon{display:flex;align-items:center;justify-content:center;background:transparent;color:var(--amber);font-size:56px}
.ess-item .ph img{max-width:98%;max-height:98%;width:auto;height:auto;object-fit:contain;border-radius:var(--radius)}
.place-card .pic-icon img{width:90%;height:90%;object-fit:contain}
@media(min-width:760px){.ess-row{grid-template-columns:repeat(5,1fr)}}

/* ---------- #Hashtag + Instagram-Raster ---------- */
.ig-kopf{text-align:center}
.ig-kopf .place{margin-bottom:2px}
.hashtag{text-align:center;font-size:clamp(28px,5.2vw,58px);letter-spacing:.06em;text-transform:uppercase;font-weight:300}
.hashtag b{color:var(--amber);font-weight:300}
/* 4:5 wie im Instagram-Feed, damit die Kacheln denselben Ausschnitt zeigen
   wie die Beitraege im Profil. */
.iggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:32px}
.iggrid figure{aspect-ratio:4/5}
.ig-cta{text-align:center;margin-top:34px}
.ig-cta .btn i{font-size:17px;transition:none}
.ig-cta .btn:hover i{transform:none}
@media(min-width:760px){.iggrid{grid-template-columns:repeat(6,1fr)}}

/* ---------- Route ---------- */
.route{padding:40px 0 80px}
.route-svg{display:block;width:100%;height:auto;margin-top:10px}
/* Mobile Route: dieselbe geschwungene Linie im Hochformat. Die breite Grafik
   traegt ihre Schriften im 1600er-Raster, auf Handybreite blieben davon vier
   Pixel uebrig. Die hochformatige viewBox ist 400 breit, dadurch bleibt der
   Text lesbar und der Schwung erhalten. */
.route-svg-hoch{display:none;width:100%;height:auto;margin-top:18px}
.route-svg-hoch .rline{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-dasharray:1.5 9;stroke-linecap:round}
.route-svg-hoch .marker{fill:#fff;stroke:var(--amber);stroke-width:3}
.route-svg-hoch .mdot{fill:var(--amber)}
.route-svg-hoch .nm{font-family:'Josefin Sans';font-weight:500;letter-spacing:2.5px;font-size:22px;fill:var(--ink)}
.route-svg-hoch .dt{font-family:'Josefin Sans';font-weight:500;letter-spacing:1.5px;font-size:16px;fill:var(--grey)}
@media(max-width:759px){
  .route-svg{display:none}
  .route-svg-hoch{display:block}
  /* Der Timeline-Block schliesst mit der Grafik ab und braucht deshalb unten
     nicht die 80px der Kartenfassung, sonst klafft eine Luecke zum naechsten
     Abschnitt. 52px entsprechen dem Abstand der uebrigen Bausteine. */
  .route:has(.route-svg-hoch){padding-bottom:28px}
  /* Das Wasserzeichen passt hinter der schmalen Route nicht mehr, es bleibt weg. */
  .route.has-wm>.wm{display:none}
}
.route-svg .rline{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-dasharray:1.5 13;stroke-linecap:round}
.route-svg .rstop{opacity:1}
.route-svg .pin{fill:var(--amber)}
.route-svg .marker{fill:#fff;stroke:var(--amber);stroke-width:3}
.route-svg .mdot{fill:var(--amber)}
.route-svg .nm{font-family:'Josefin Sans';font-weight:500;letter-spacing:4px;font-size:20px;fill:var(--ink)}
.route-svg .dt{font-family:'Josefin Sans';font-weight:500;letter-spacing:2px;font-size:12px;fill:var(--grey)}

/* ---------- Berg-Textblock ---------- */
.feature{position:relative;overflow:hidden;padding:96px 0}
.feature .mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:.55;z-index:0}
.feature>.wrap{position:relative;z-index:1}
.feature .place{margin-bottom:2px}
.feature h2{font-size:clamp(30px,5vw,52px);letter-spacing:.06em;text-transform:uppercase;font-weight:300;max-width:16ch}
.feature p{color:var(--grey);max-width:54ch;margin:18px 0 0;font-size:18px}
.feature .lnk{margin-top:24px}

/* ---------- Themen / Doodle-Kategorien ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:46px 18px}
/* Bei ungerader Anzahl steht die letzte Kachel mobil allein in der linken
   Spalte. Sie bekommt deshalb die volle Breite und rueckt damit in die Mitte. */
@media(max-width:759px){.cats>:last-child:nth-child(odd){grid-column:1 / -1}}
.cat{text-align:center}
.cat i{font-size:44px;color:var(--ink);transition:.18s}
.cat .n{font-family:'Josefin Sans';font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:13px;margin-top:14px}
.cat .c{font-family:'Josefin Sans';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:7px}
.cat:hover i{color:var(--amber)}
/* Feste sechs Spalten liessen bei fuenf Themen eine Luecke rechts stehen, der
   Block wirkte dadurch linksbuendig. Jetzt bekommen die Kacheln eine feste
   Breite und die Reihe wird zentriert, unabhaengig von der Anzahl. */
@media(min-width:760px){.cats{grid-template-columns:repeat(auto-fit,minmax(0,132px));justify-content:center;column-gap:40px}}

/* ---------- Zitat-/Feature-Slider ---------- */
.testi{background:var(--soft)}
.testi-in{max-width:640px;margin:0 auto;text-align:center;position:relative;padding:0 46px}
.testi .place{font-size:30px}
.testi h3{font-size:clamp(22px,3vw,30px);letter-spacing:.12em;text-transform:uppercase;font-weight:400;margin-top:2px}
.testi .cat-lab{font-family:'Josefin Sans';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:14px}
.testi p{color:var(--grey);margin-top:18px;font-size:18px}
.testi .arrow{position:absolute;top:44%;font-size:26px;color:#bdb8b0;cursor:pointer;transition:.18s}
.testi .arrow:hover{color:var(--amber)}
.testi .arrow.l{left:0}.testi .arrow.r{right:0}

/* ---------- Beitragskarten ---------- */
.posts{display:grid;grid-template-columns:1fr;gap:40px}
.posts.three{grid-template-columns:1fr}
.post{text-align:center}
.post .pic{aspect-ratio:4/3;overflow:hidden;background:#efeae3;margin-bottom:18px}
.post .place{font-size:26px;line-height:1.2;margin-bottom:10px}
.post h3{font-size:19px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.45;margin-top:4px}
.post:hover h3{color:var(--amber)}
.post .cat-lab{font-family:'Josefin Sans';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-top:12px}
@media(min-width:760px){.posts.three{grid-template-columns:repeat(3,1fr)}}
/* Solange eine Kategorie weniger als drei Beitraege hat, stehen die Karten
   sonst linksbuendig im Dreierraster und wirken verloren. Mit :has() zaehlt
   das CSS die Kinder und zentriert das Raster entsprechend. */
@media(min-width:760px){
  .posts.three:has(> :last-child:nth-child(1)){grid-template-columns:minmax(0,380px);justify-content:center}
  .posts.three:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,380px));justify-content:center}
}

/* ---------- Partnerzeile ---------- */
.sponsors{text-align:center}
.sponsors h2{font-size:clamp(22px,3vw,30px);letter-spacing:.14em;text-transform:uppercase;font-weight:300;margin-bottom:38px}
.spon-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 50px}
.spon-row span{font-family:'Josefin Sans';font-weight:600;letter-spacing:.04em;color:#bdb8af;font-size:18px;text-transform:uppercase}

/* ---------- Seiten-Intro / großer Hero ---------- */
.bighero{padding:6px 0 0}
.bighero figure{aspect-ratio:16/8}
.cols3{display:grid;grid-template-columns:1fr;gap:38px;margin-top:50px}
.cols3 h3{text-transform:uppercase;letter-spacing:.16em;font-weight:400;font-size:16px;margin-bottom:16px}
.cols3 p{color:#5d5a54;font-size:17px}
.cols3 .lnk{margin-top:16px}
@media(min-width:840px){.cols3{grid-template-columns:repeat(3,1fr);gap:50px}}

/* ---------- Blog: Featured + Sidebar + Grid ---------- */
.bloglayout{display:grid;grid-template-columns:1fr;gap:50px}
@media(min-width:940px){.bloglayout{grid-template-columns:1fr 300px;gap:60px}}
.feat figure{aspect-ratio:16/10;margin-bottom:24px}
.feat .place{font-size:30px;text-align:center}
.feat h2{text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(22px,3vw,30px);font-weight:400;margin-top:2px}
.feat .cat-lab{text-align:center;font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--grey);margin-top:14px}
.feat p{text-align:center;color:#5d5a54;max-width:62ch;margin:18px auto 0}
.feat .more{text-align:center;margin-top:22px}
.feat+.feat{margin-top:60px;padding-top:60px;border-top:1px solid var(--line)}
.rsidebar h4{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--ink);font-weight:600;margin-bottom:6px}
.rlist a{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
.rlist a:first-of-type{border-top:1px solid var(--line)}
.rlist a .t{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.08em;font-size:14px;line-height:1.5;color:var(--ink)}
.rlist a .c{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--grey);margin-top:7px;display:block}
.rlist a:hover .t{color:var(--amber)}
.older{text-align:center;margin-top:50px}
.older a{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:600;color:var(--grey)}
.older a:hover{color:var(--amber)}

/* ---------- Einzelbeitrag ---------- */
.single-head{max-width:820px;margin:0 auto;text-align:center}
.single-head .place{font-size:34px}
/* Zwischenueberschriften stehen seit 14.08.2026 ohne Versalien. In Grossbuchstaben
   wirkten sie im Fliesstext zu wuchtig und liefen bei mehrzeiligen Ueberschriften
   optisch zusammen. Dazu mehr Zeilenabstand (1,32) und mehr Luft davor (56px). */
/* Mobil lagen H1 (26px) und H2 (25px) fast gleichauf, und weil die H1 duenner
   gesetzt ist (300 gegen 400), wirkte sie sogar schwaecher. Die Mindestgroessen
   sind deshalb auseinandergezogen: 30 / 22 / 19 statt 26 / 25 / 24. */
.single-head h1{text-transform:uppercase;letter-spacing:.1em;font-weight:300;font-size:clamp(30px,4.2vw,46px);margin-top:2px}
.single-head .cat-lab{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--grey);margin-top:14px}
.shero{aspect-ratio:16/9;margin:30px 0 10px}
.singlelayout{display:grid;grid-template-columns:1fr;gap:50px;margin-top:10px}
@media(min-width:940px){.singlelayout{grid-template-columns:1fr 300px;gap:60px}}
.prose{font-size:17px;color:#46443f;max-width:760px;margin-left:auto;margin-right:auto}
.prose p{margin:20px 0;line-height:1.85}
.prose h2{font-family:'Josefin Sans';text-transform:none;letter-spacing:.01em;font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.32;margin:56px 0 18px;overflow-wrap:break-word;hyphens:auto}
.prose h4{font-family:'Josefin Sans';text-transform:none;letter-spacing:.01em;font-weight:600;font-size:clamp(18px,2.2vw,21px);line-height:1.4;margin:34px 0 10px}
.prose h3{font-family:'Josefin Sans';text-transform:none;letter-spacing:.01em;font-weight:500;font-size:clamp(20px,2.6vw,26px);line-height:1.35;margin:42px 0 14px;overflow-wrap:break-word;hyphens:auto}
.prose blockquote{font-family:'Sacramento';font-size:34px;color:var(--amber);text-align:center;margin:36px 0;line-height:1.2}
/* Bilder im Fliesstext (Stand 16.08.2026):
   Der Platzhalterton aus Zeile 42 gehoert hier nicht auf das figure, sonst
   steht er als andersfarbiger Kasten hinter der Bildunterschrift. Den
   Ladeplatzhalter traegt deshalb das Bild selbst.
   Der Hover-Zoom laeuft ueber .ll-maske, die der Filter ll_bildmaske() in der
   functions.php genau um das Bild legt. Am figure darf er nicht haengen: Dort
   steckt die Bildunterschrift mit in der Maske, dadurch endet die Rundung erst
   unter der Unterschrift und die Bildecken wurden beim Zoom eckig (Safari und
   Chrome, von Michael gemeldet, im Vergleich C1 bis C4 nachgestellt). */
.prose figure{margin:30px 0;background:transparent;overflow:visible}
.prose figure:hover img{transform:none}
.prose .ll-maske{display:block;overflow:hidden;border-radius:var(--radius);line-height:0}
.prose .ll-maske:hover img{transform:scale(1.04)}
.prose figure img{background:#efeae3}
.prose figure img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.prose figure video{width:100%;height:auto;display:block;border-radius:var(--radius)}
/* Das figure muss mitrunden und den Platzhalterton aus Zeile 42 ablegen, sonst
   bleiben in den vier Ecken graue Zwickel stehen und das Video wirkt eckig. */
.prose figure.wp-block-video{border-radius:var(--radius);background:transparent}
.prose figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--grey);text-align:center}
.prose a{color:var(--amber);border-bottom:1px solid var(--amber)}
/* Listen im Fliesstext. Ohne diese Regeln greift der globale Reset (* {padding:0})
   und die Liste steht ohne Einrueckung linksbuendig unter dem Text, mit dem
   blassen Standardpunkt des Browsers. */
.prose ul,.prose ol{margin:20px 0;padding-left:1.7em}
.prose li{margin-bottom:10px;line-height:1.75;padding-left:.25em}
.prose li:last-child{margin-bottom:0}
.prose ul li::marker{color:var(--amber);font-size:1.2em}
.prose ol li::marker{color:var(--amber);font-family:'Josefin Sans';font-weight:600}
.prose li>ul,.prose li>ol{margin:10px 0 0}
.prose li p{margin:0 0 10px}
.tagsrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:34px 0}
.tagsrow .tg{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--grey)}
.tagsrow .soc{display:flex;gap:16px;color:#bdb8b0;font-size:17px}
.tagsrow .soc a:hover{color:var(--amber)}
.byline{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--grey)}
.byline b{color:var(--ink);font-weight:600}
.prevnext{display:grid;grid-template-columns:1fr;gap:16px;margin:44px 0;align-items:center}
.pn{display:flex;align-items:center;gap:14px}
.pn img{width:64px;height:64px;object-fit:cover;flex:none}
.pn span{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--grey);display:block}
.pn .t{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--ink);margin-top:5px;line-height:1.35}
.pn.next{justify-content:flex-end;text-align:right}
.pn:hover .t{color:var(--amber)}
.authorbox{display:flex;gap:24px;align-items:flex-start;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;margin:40px 0;flex-wrap:wrap}
.authorbox img{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none;background:#efeae3}
.authorbox .name{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.12em;font-size:16px;color:var(--ink)}
.authorbox p{color:#5d5a54;font-size:17px;margin:10px 0 12px}
.authorbox .soc{display:flex;gap:14px;color:#bdb8b0;font-size:17px}
.authorbox .soc a:hover{color:var(--amber)}
.comments h3,.cform h3{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.16em;font-weight:400;font-size:20px;margin:40px 0 24px}
.cmt{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.cmt.reply{margin-left:48px}
.cmt img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;background:#efeae3}
.cmt .who{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--ink)}
.cmt .when{font-family:'Sacramento';font-size:19px;color:var(--amber);margin-left:10px}
.cmt p{font-size:17px;color:#5d5a54;margin:8px 0}
.cmt .reply-lnk{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--grey)}
.cmt .reply-lnk:hover{color:var(--amber)}
.cform form{display:grid;gap:16px;margin-top:6px}
.cform textarea,.cform input{border:1px solid var(--line);background:#fbfaf8;padding:14px 16px;font-family:'Open Sans';font-size:16px;width:100%}
.cform textarea{min-height:130px;resize:vertical}
.cform .three{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.cform .three{grid-template-columns:repeat(3,1fr)}}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--amber)}

/* Einzelbeitrag-Sidebar */
.swidget{margin-bottom:40px}
.swidget h4{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--ink);font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}
.swidget h4::before,.swidget h4::after{content:"";width:24px;height:1px;background:var(--line)}
.scats a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--ink)}
.scats a::before{content:"";width:8px;height:8px;background:var(--amber);flex:none}
.scats a:hover{color:var(--amber)}
.sig{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.sig figure{aspect-ratio:1}

/* ---------- heller Footer ---------- */
.lfoot{background:var(--blue);color:#cdd2ce;border-top:1px solid rgba(255,255,255,.08);padding:66px 0 0}
.lfoot-cols{display:grid;grid-template-columns:1fr;gap:50px;text-align:center}
.lfoot h4{font-family:'Josefin Sans';font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#adb2ae;font-weight:600;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:24px}
.lfoot h4::before,.lfoot h4::after{content:"";width:30px;height:1px;background:rgba(255,255,255,.18)}
.lfoot .map{position:relative;max-width:300px;margin:0 auto}
.lfoot .map i.world{font-size:118px;color:#4c534f}
.lfoot .map .pin{position:absolute;left:50%;top:42%;transform:translate(-50%,-100%);color:var(--amber);font-size:30px}
.lfoot .where{font-style:italic;color:#b6bbb6;margin-top:8px}
.lfoot-soc{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 18px;max-width:340px;margin:0 auto}
.lfoot-soc a{display:flex;flex-direction:column;align-items:center;gap:9px;color:#e7eae6}
.lfoot-soc a i{font-size:22px}
.lfoot-soc a span{font-family:'Josefin Sans';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#adb2ae}
.lfoot-soc a:hover,.lfoot-soc a:hover span{color:var(--amber)}
.lfoot-nav{display:flex;flex-direction:column;align-items:center;gap:11px;font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.lfoot-nav a{color:#cdd2ce}
.lfoot-nav a:hover{color:var(--amber)}
.lfoot .news-in{max-width:340px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.lfoot .news-in input{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#F3F0EA;padding:14px 16px;font-family:'Open Sans';font-size:15px}
.lfoot .news-in input::placeholder{color:#adb2ae}
.lfoot .news-in input:focus{outline:2px solid var(--amber)}
.lfoot .news-in button{background:var(--green);color:var(--paper);border:none;padding:14px 16px;font-family:'Josefin Sans';font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:12px;cursor:pointer;transition:.2s}
.lfoot .news-in button:hover{background:var(--amber)}
.lfoot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:58px;padding:22px 0 36px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-family:'Josefin Sans';font-size:11px;letter-spacing:.06em;color:#adb2ae}
.lfoot-bottom .mini{display:flex;flex-wrap:wrap;gap:22px;letter-spacing:.14em;text-transform:uppercase}
.lfoot-bottom .mini a:hover{color:var(--amber)}

.lp-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:55;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s ease;cursor:pointer;border:none}
.lp-top.show{opacity:1;transform:none;pointer-events:auto}
.lp-top:hover{background:var(--amber)}

/* ---------- Hamburger + mobiles Vollbild-Menü ---------- */
/* Grundregeln des Menue-Knopfs stehen weiter unten bei der Balken-Optik. */
.mnav{position:fixed;inset:0;background:var(--blue);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a{font-family:'Josefin Sans';font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:18px;color:#eef0ec}
.mnav a:hover{color:var(--amber)}
.mnav .mclose{position:absolute;top:20px;right:22px;background:none;border:none;color:#eef0ec;font-size:32px;line-height:1;cursor:pointer}
.mnav .mclose:hover{color:var(--amber)}
.mnav .mbrand{position:absolute;top:26px;left:24px;font-family:'Sacramento',cursive;font-size:26px;color:#eef0ec}
.mnav .msoc{display:flex;gap:22px;margin-top:16px;color:#adb2ae}
.mnav .msoc a{font-size:22px}
[data-r]{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
[data-r].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-r]{opacity:1;transform:none;transition:none}}

@media(min-width:840px){
  section{padding:90px 0}
  .lfoot-cols{grid-template-columns:1fr 1fr 1fr;gap:40px}
  .prevnext{grid-template-columns:1fr 1fr}
}

/* Kategorie-Labels im Nebelblau */
.post .cat-lab,.feat .cat-lab,.testi .cat-lab,.single-head .cat-lab,.rlist a .c,.tslide .txt .cat-lab{color:var(--label)}

/* ---------- Karussell (Slider mit Pfeilen, Auto-Wechsel) ---------- */
.carousel{position:relative}
.cviewport{overflow:hidden}
.ctrack{display:flex;gap:18px;transition:transform .6s cubic-bezier(.6,0,.2,1);will-change:transform}
.carrow{position:absolute;top:46%;transform:translateY(-50%);z-index:3;background:none;border:none;cursor:pointer;font-size:26px;color:var(--ink);line-height:1;padding:6px;transition:color .2s}
.carrow:hover{color:var(--amber)}
.carrow.prev{left:0}.carrow.next{right:0}
/* Aussen stehen die Pfeile erst, wenn der Bildschirm breiter ist als der
   Inhalt (1300px) plus beide Pfeile. Vorher lag die Grenze bei 900px,
   dadurch ragte der rechte Pfeil auf jedem iPad 34 Pixel ueber den Rand
   und das Dokument liess sich seitlich wischen. */
@media(min-width:1400px){.carrow.prev{left:-34px}.carrow.next{right:-34px}}

/* oberer Beitrags-Slider (drei quer) */
.recent{padding:24px 0 80px}
.recent .ctrack>*{flex:0 0 100%}
@media(min-width:560px){.recent .ctrack>*{flex:0 0 calc((100% - 18px)/2)}}
@media(min-width:900px){.recent .ctrack>*{flex:0 0 calc((100% - 36px)/3)}}
.rc-card{display:block;text-align:center;border:1px solid var(--line);background:var(--paper)}
.rc-card .pic{aspect-ratio:4/3;overflow:hidden;background:#e9e4db}
.rc-card .pic img{width:100%;height:100%;object-fit:cover;transition:.6s}
.rc-card:hover .pic img{transform:scale(1.05)}
.rc-card .body{padding:20px 16px 26px}
.rc-card .place{font-size:26px;line-height:1.2;margin-bottom:10px}
.rc-card h3,.rc-card h2{font-family:'Josefin Sans';font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:17px;line-height:1.45;margin-top:0}
.rc-card:hover h3,.rc-card:hover h2{color:var(--amber)}
.rc-card .rc-date{font-family:'Open Sans';font-size:12.5px;letter-spacing:.03em;color:var(--grey);margin-top:12px}

/* Berg-Block mit Bild rechts */
.feature .fgrid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.feature .fgrid figure{aspect-ratio:4/3}
@media(min-width:840px){.feature .fgrid{grid-template-columns:1fr 1fr;gap:56px}}

/* ---------- Stellplätze: Übersicht + Einzelbeitrag ---------- */
.cat-intro{text-align:center;max-width:640px;margin:0 auto 38px}
.cat-intro h1{font-size:clamp(30px,5vw,54px);letter-spacing:.1em;text-transform:uppercase;font-weight:300;margin-top:2px}
.cat-intro p{color:var(--grey);margin-top:14px}
.stars{display:inline-flex;gap:3px;color:var(--amber);font-size:16px;line-height:1}
.stars .off{color:#cdc6ba}
.stars.lg{font-size:23px;gap:5px}
.filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px;border-bottom:1px solid var(--line);max-width:720px;margin:0 auto 40px;padding-bottom:0}
.filter a{font-family:'Josefin Sans';font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);cursor:pointer;padding-bottom:14px;border-bottom:2px solid transparent;transition:.2s}
.filter a:hover{color:var(--ink)}
.filter a.active{color:var(--ink);border-color:var(--amber)}
.places{display:grid;grid-template-columns:1fr;gap:32px}
.place-card{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.place-card .pic{aspect-ratio:16/10;overflow:hidden;background:#e9e4db}
/* Die Anschaffungen standen als einzige Uebersicht im Format 16:10 und wirkten
   dadurch flacher als Logbuch, Reisen und Ratgeber. Jetzt ueberall 4:3.
   Die Stellplaetze behalten bewusst 16:10, dort passt das Querformat zu den
   Platzaufnahmen. */
.post-type-archive-anschaffung .place-card .pic{aspect-ratio:4/3}
.place-card .pic img{width:100%;height:100%;object-fit:cover;transition:.6s}
.place-card:hover .pic img{transform:scale(1.05)}
.place-card .body{padding:20px 22px 24px;text-align:center}
.place-card h3{font-family:'Josefin Sans';font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:19px}
.place-card:hover h3{color:var(--amber)}
.place-card .ort{font-size:15px;color:var(--grey);margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.place-card .anbieter{font-family:'Josefin Sans';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-top:8px}
.place-card .stars{margin-top:13px}
@media(min-width:640px){.places{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.places{grid-template-columns:repeat(3,1fr)}}

.sp-head{max-width:760px;margin:0 auto;text-align:center}
.sp-head .place{font-size:30px}
.sp-head h1{font-family:'Josefin Sans';font-weight:300;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(28px,4.5vw,48px);margin-top:2px}
.sp-head .loc{font-size:16px;color:var(--grey);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px}
.sp-head .overall{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.sp-head .overall .num{font-family:'Josefin Sans';font-size:20px;letter-spacing:.06em;color:var(--ink)}
.sp-head .sp-anbieter{font-family:'Josefin Sans';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-top:12px}
.sp-ratings{display:grid;grid-template-columns:1fr;gap:16px 44px;max-width:620px;margin:34px auto;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-rate{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sp-rate .lab{font-family:'Josefin Sans';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
@media(min-width:620px){.sp-ratings{grid-template-columns:1fr 1fr}}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.gallery figure{aspect-ratio:4/3}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}}

/* Feature-/Zitat-Slider mit Bild rechts */
.testi .ctrack>*{flex:0 0 100%}
.tslide{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.tslide .txt{text-align:left}
.tslide .txt .place{font-size:30px}
.tslide .txt h3{font-size:clamp(22px,3vw,30px);letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin-top:2px}
.tslide .txt .cat-lab{font-family:'Josefin Sans';font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:12px}
.tslide .txt p{color:var(--grey);margin-top:16px}
.tslide figure{aspect-ratio:16/11}
@media(min-width:840px){.tslide{grid-template-columns:1fr 1.15fr;gap:50px}}

/* ---------- SEO-H1 der Startseite ---------- */
/* Unsichtbar, aber fuer Suchmaschinen und Screenreader vorhanden (nicht display:none). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Sichtbare Variante, falls im Backend eingeschaltet. */
.ll-h1{font-family:'Josefin Sans',sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.14em;text-align:center;font-size:clamp(20px,3vw,30px);color:var(--ink);max-width:900px;margin:0 auto;padding:6px 28px 26px}

/* Knopf zur Website oder Buchungsseite eines Stellplatzes.
   Steht im Kopf der Platzseite und noch einmal unter der Galerie. */
.sp-cta{margin-top:22px;text-align:center}
.sp-cta .btn{gap:8px}
.sp-cta-note{display:block;margin-top:8px;font-size:12px;color:var(--grey)}
.sp-cta--unten{margin-top:40px}

/* Platzseite: kompakter Kopf, damit das Beitragsbild frueh sichtbar wird.
   Reihenfolge: Titel, Bild, dann Bewertung, Anbieter und der Knopf zum Platz. */
.sp-single{padding-top:26px}
.sp-single .sp-head .place{font-size:24px}
.sp-single .sp-head h1{margin-top:0}
.sp-single .sp-head .loc{margin-top:8px}
.sp-single .shero{margin:18px 0 0}
.sp-fakten{max-width:760px;margin:0 auto;text-align:center;padding-top:20px}
.sp-fakten .overall{display:flex;align-items:center;justify-content:center;gap:12px}
.sp-fakten .overall .num{font-family:'Josefin Sans';font-size:20px;letter-spacing:.06em;color:var(--ink)}
.sp-fakten .sp-anbieter{font-family:'Josefin Sans';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-top:10px}
@media(max-width:640px){
  .sp-single{padding-top:18px}
  .sp-single .sp-head .place{font-size:20px}
}
.sp-rate-offen{font-size:13px;color:var(--grey);font-style:italic}

/* Ueber uns: Ueberschrift oben, darunter Bild links und die drei Bloecke rechts.
   Ohne Bild rueckt die Liste zentriert ueber die volle Breite. */
.about-top{padding-top:52px}
.about-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.about-split.ohne-bild{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.about-portrait{margin:0;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--soft)}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.about-liste{display:grid;gap:36px;align-content:start}
.about-liste h3{text-transform:uppercase;letter-spacing:.16em;font-weight:400;font-size:16px;margin-bottom:14px}
.about-liste p{color:#5d5a54;font-size:17px;margin:0 0 14px}
.about-liste p:last-of-type{margin-bottom:0}
.about-liste .lnk{margin-top:14px}
@media(max-width:860px){
  .about-split{grid-template-columns:1fr;gap:30px}
  .about-portrait{max-width:520px;margin:0 auto}
}

/* Einheitliche Eckenrundung fuer Bilder und Karten.
   Vorbild waren die Karte auf der Stellplatz-Uebersicht und das Bild auf "Ueber uns". */
.rc-card,.place-card,.ll-stop,.feat figure,.shero,.gallery figure,
.about-portrait,.ll-map,.post figure,.tslide figure,.beitrags-karte,
.ess-item .ph,.iggrid figure,.post .pic,.sig figure,.feature .fgrid figure,
.bighero figure{
  border-radius:var(--radius);
  overflow:hidden;
}
/* Bilder in diesen Behaeltern bekommen bewusst KEINE eigene Rundung.
   Der Behaelter schneidet sie mit overflow:hidden sauber zu. Zwei Rundungen
   uebereinander erzeugen sonst sichtbare Zwickel an der Unterkante. */
.rc-card .pic,.place-card .pic,.beitrags-karte .bk-bild,
.shero img,.feat figure img,.post figure img,.gallery img{border-radius:0}
/* Ausnahme: Bei den Anschaffungen ist die Fläche transparent und das Foto liegt
   kleiner darin. Das Bild-Element passt sich deshalb der Bildgröße an (width/height
   auto statt 98/98), sonst säße die Rundung am leeren Elementrand und der sichtbare
   Bildrand bliebe eckig. */
.ess-item .ph img{border-radius:var(--radius)}

/* Beitrags-Raster fuer Blog- und Kategorieseiten (drei Spalten). */
.beitrags-raster{display:grid;grid-template-columns:1fr;gap:34px 26px;margin-top:8px}
@media(min-width:700px){.beitrags-raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.beitrags-raster{grid-template-columns:repeat(3,1fr)}}

.beitrags-karte{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.beitrags-karte .bk-bild{display:block;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.beitrags-karte .bk-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.beitrags-karte:hover .bk-bild img{transform:scale(1.04)}
.beitrags-karte .bk-text{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.beitrags-karte .bk-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-family:'Josefin Sans';font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.beitrags-karte .bk-kat{color:var(--amber)}
.beitrags-karte h2{margin:12px 0 0;font-family:'Josefin Sans';font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:18px;line-height:1.4}
.beitrags-karte h2 a{color:var(--ink);text-decoration:none}
.beitrags-karte:hover h2 a{color:var(--amber)}
.beitrags-karte p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:#5d5a54}
.beitrags-karte .lnk{margin-top:16px;align-self:flex-start}

.older{margin-top:52px;text-align:center}
.older .nav-links{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center}
.older .page-numbers{font-family:'Josefin Sans';font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:8px}
.older .page-numbers.current{color:var(--paper);background:var(--green);border-color:var(--green)}
.older .page-numbers:hover{color:var(--ink)}

/* Beitragsbild im Einzelbeitrag: schmaler und im selben Format wie die Karten im Archiv. */
.shero--beitrag{aspect-ratio:auto;max-width:1080px;margin:30px auto 14px}
.shero--beitrag img{width:100%;height:auto;display:block}
@media(max-width:640px){.shero--beitrag{margin-top:18px}}

/* ---- Einzelbeitrag: eine Spalte, keine Seitenleiste ---- */
.singlelayout{display:grid;grid-template-columns:1fr;gap:0;margin-top:10px;max-width:820px;margin-left:auto;margin-right:auto}

/* Voriger und naechster Beitrag: zwei gleichwertige Karten */
.beitragsnav{display:grid;grid-template-columns:1fr;gap:14px;margin:44px 0 8px}
@media(min-width:700px){.beitragsnav{grid-template-columns:1fr 1fr}}
.beitragsnav .bn{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);text-decoration:none;transition:.2s}
.beitragsnav .bn:hover{border-color:var(--amber)}
.beitragsnav .bn img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.beitragsnav .bn-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.beitragsnav .bn-label{font-family:'Josefin Sans';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.beitragsnav .bn-titel{font-family:'Josefin Sans';font-size:15px;line-height:1.35;color:var(--ink)}
.beitragsnav .bn:hover .bn-titel{color:var(--amber)}
.beitragsnav .bn--next{grid-column:2}
@media(max-width:699px){.beitragsnav .bn--next{grid-column:1}}

/* Autorenbox */
.autorbox{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:36px 0}
.autorbox img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;background:#efeae3}
.autorbox-text{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.autorbox-label{font-family:'Josefin Sans';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.autorbox-name{font-family:'Josefin Sans';font-size:19px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
/* Der Name verlinkt aufs Autorenarchiv. Globale Links erben Farbe und tragen
   keine Unterstreichung, deshalb waere er sonst nicht als Link erkennbar.
   Farbwechsel und Unterstreichung folgen dem Muster von .lnk. */
.autorbox-name a{color:inherit;text-decoration:none;transition:color .2s ease}
.autorbox-name a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:4px}
.autorbox-name a:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.autorbox p{margin:8px 0 0;font-size:16px;line-height:1.6;color:#5d5a54}

/* Kommentare */
.cform-title{font-family:'Josefin Sans';text-transform:uppercase;letter-spacing:.16em;font-weight:400;font-size:20px;margin:44px 0 10px}
.cform-hinweis{font-size:14px;color:var(--grey);margin:0 0 20px}
.kommentarformular{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.kommentarformular{grid-template-columns:1fr 1fr}.cf-feld--breit,.cf-absenden{grid-column:1/-1}}
.cf-feld{margin:0;display:flex;flex-direction:column;gap:6px}
.cf-feld label{font-family:'Josefin Sans';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.cf-feld input,.cf-feld textarea{width:100%;font-family:'Open Sans',sans-serif;font-size:16px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.cf-feld textarea{resize:vertical;min-height:150px;line-height:1.6}
.cf-feld input:focus,.cf-feld textarea:focus{outline:none;border-color:var(--amber)}
.cf-absenden{margin:0}
.comments{margin-top:40px}
.comments .cmt{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.comments .cmt img{width:52px;height:52px;border-radius:50%;flex:none}
.comments .who{font-family:'Josefin Sans';letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:var(--ink);margin-right:10px}
.comments .when{font-size:15px;color:var(--grey)}
.comments .cmt p{margin:8px 0 0;font-size:16px;line-height:1.65;color:#46443f}
.comments .reply-lnk a{font-family:'Josefin Sans';font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);text-decoration:none}
.comments .cmt.reply{margin-left:46px}

/* ---------- Mobiler Feinschliff (11.08.2026) ----------
   Fuenf Befunde aus der Messung bei 375 Pixel Breite. */

/* 1. Der Hamburger klebte mit right:0 exakt am Bildschirmrand und wirkte
      neben dem grossen Logo zu klein. */
/* (Die frueheren Groessenregeln fuer den Icon-Knopf sind mit der Balken-Optik entfallen.) */

/* 2. Der Claim brach mitten im letzten Teil um ("... ein / Wohnmobil").
      Auf schmalen Schirmen stehen die drei Teile jetzt untereinander,
      ab 560 Pixeln wieder nebeneinander mit Trennpunkt. */
.lb-tag-teile{display:flex;flex-direction:column;align-items:center;gap:7px;line-height:1.45}
.lb-tag-teile .trenner{display:none}
@media(min-width:560px){
  .lb-tag-teile{flex-direction:row;justify-content:center;gap:0;line-height:inherit}
  .lb-tag-teile .trenner{display:inline;margin:0 .5em}
}

/* 4. Zwischen den Bausteinen stand auf dem Handy zu viel Luft,
      am deutlichsten unter "Alle Stationen ansehen" (196 Pixel bis zum
      naechsten Text). */
@media(max-width:640px){
  section{padding:52px 0}
  .feature{padding:60px 0}
}

/* 5. Im Footer standen Impressum und Datenschutz nebeneinander und die
      Cookie-Einstellungen allein in der zweiten Zeile. Jetzt alle drei
      untereinander, darunter der Trennstrich mit der Copyright-Zeile. */
@media(max-width:640px){
  .lfoot-bottom{flex-direction:column;align-items:center;text-align:center;gap:0;border-top:none;margin-top:44px;padding:0 0 34px}
  .lfoot-bottom .mini{flex-direction:column;gap:13px;order:-1;width:100%}
  .lfoot-bottom > span{width:100%;margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);line-height:1.6}
}

/* ---------- Besuchs-Logbuch am Stellplatz ---------- */
.sp-logbuch{max-width:760px;margin:40px auto 0;padding:26px 28px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius)}
.sp-logbuch-titel{font-family:'Josefin Sans';font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--grey);margin:0 0 16px}
.sp-besuche{list-style:none;margin:0;padding:0}
.sp-besuche li{position:relative;padding:0 0 16px 22px;border-left:1px solid var(--line)}
.sp-besuche li:last-child{padding-bottom:0;border-left-color:transparent}
.sp-besuche li::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.sp-besuch-datum{display:block;font-family:'Josefin Sans';font-size:14px;letter-spacing:.06em;color:var(--ink);font-weight:500}
.sp-besuch-notiz{display:block;margin-top:4px;font-size:15px;line-height:1.6;color:var(--grey)}
.where-datum{font-size:12px;color:#adb2ae;margin-top:2px}
.lfoot .where a{border-bottom:1px solid rgba(255,255,255,.25)}
.lfoot .where a:hover{color:var(--amber);border-color:var(--amber)}
@media(max-width:600px){
	.sp-logbuch{padding:20px 18px;margin-top:30px}
}

/* ---------- Bildergalerie als Slider ([ll_galerie]) ---------- */
.ll-gal{--ll-gal-verhaeltnis:4/3;margin:28px 0}
.ll-gal__buehne{position:relative}
.ll-gal__spur{position:relative;display:flex;gap:12px;list-style:none;margin:0;padding:0 8%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.ll-gal__spur::-webkit-scrollbar{display:none}
.ll-gal__spur:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.ll-gal__folie{flex:0 0 84%;scroll-snap-align:center;margin:0}

.ll-gal__bild{margin:0;aspect-ratio:var(--ll-gal-verhaeltnis);display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:var(--radius);overflow:hidden}
/* Zwei Klassen im Selektor, weil .prose figure img sonst mit hoeherer
   Spezifitaet width:100% erzwingt und das Bild wieder verzerrt. */
.ll-gal .ll-gal__bild img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;border-radius:0}
.ll-gal__text{margin:0;padding:8px 14px 10px;font-size:.86rem;line-height:1.45;color:var(--grey);text-align:center}
.ll-gal__pfeil{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s ease}
.ll-gal__pfeil:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.ll-gal__pfeil:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ll-gal__pfeil--zurueck{left:10px}
.ll-gal__pfeil--vor{right:10px}
.ll-gal__leiste{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.ll-gal__punkte{display:flex;align-items:center;justify-content:center;gap:8px}
.ll-gal__punkt{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s ease,transform .2s ease}
.ll-gal__punkt.is-aktiv{background:var(--amber);transform:scale(1.25)}
.ll-gal__punkt:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.ll-gal__pause{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--grey);font-size:1rem;line-height:1;cursor:pointer}
.ll-gal__pause:hover{color:var(--ink)}
.ll-gal__pause:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ll-gal__ikon{display:block}
.ll-gal__ikon--play{display:none}
.ll-gal.is-angehalten .ll-gal__ikon--pause{display:none}
.ll-gal.is-angehalten .ll-gal__ikon--play{display:block}
.ll-gal--einzeln .ll-gal__spur{overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
.ll-gal--einzeln .ll-gal__folie{flex:0 0 100%}
@media(max-width:520px){
  .ll-gal__pfeil{width:36px;height:36px;font-size:1.05rem}
  .ll-gal__pfeil--zurueck{left:6px}
  .ll-gal__pfeil--vor{right:6px}
}
@media(prefers-reduced-motion:reduce){
  .ll-gal__spur{scroll-behavior:auto}
  .ll-gal__pfeil:hover{transform:translateY(-50%)}
}

/* Sternchen an den Pflichtfeldern im Kommentarformular */
.cf-pflicht{color:var(--amber)}

/* Datum der letzten Ergaenzung, eigene Zeile unter Kategorie und Datum */
.cat-lab-ergaenzt{display:block;margin-top:6px;color:var(--amber)}

/* Kopf unterhalb von 1200 Pixeln: Logo links, Claim direkt daneben.
   Vorher stand das Logo mittig und der Claim in drei Zeilen darunter, was auf
   dem Handy fast die halbe erste Bildschirmhoehe kostete. */
@media(max-width:1199px){
  .logoblock{padding:14px 0 12px}
  .logoblock-in{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding-right:44px}
  .lb-center{display:flex;align-items:center;gap:16px;text-align:left;min-width:0}
  .lb-center img{max-height:96px;max-width:176px}
  .lb-tag{margin-top:0;font-size:11px;letter-spacing:.18em}
  .lb-tag-teile{align-items:flex-start;gap:3px;line-height:1.4}
}

/* Menue-Knopf als zwei Balken, die sich beim Oeffnen zum Kreuz drehen.
   Dieselbe Machart wie auf der Artrium-Seite, dort bewaehrt. */
.hburger{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:34px;height:34px;background:none;border:0;padding:0;cursor:pointer;position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:60}
.hburger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .3s ease,width .3s ease}
.hburger span:nth-child(1){width:30px}
.hburger span:nth-child(2){width:22px}
body.menu-offen .hburger span:nth-child(1){transform:translateY(4.25px) rotate(45deg);width:30px}
body.menu-offen .hburger span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);width:30px}
@media(prefers-reduced-motion:reduce){.hburger span{transition:none}}
/* Ab der Icon-Leiste wird der Knopf nicht mehr gebraucht. Diese Regel muss
   nach der Balken-Optik stehen, sonst gewinnt dort das display:flex. */
@media(min-width:1200px){.hburger{display:none}}

/* Geoeffnetes Menue: Der Kopf bleibt stehen, damit das Logo an seinem Platz
   bleibt und der Knopf an genau derselben Stelle zum Kreuz wird. Vorher schob
   sich ein Overlay mit Schriftzug und eigenem X darueber, wodurch beides
   sprang. Der Kopf behaelt seinen hellen Grund, das Logo ist schwarz und waere
   auf dem dunklen Menue unsichtbar. */
body.menu-offen .logoblock{position:relative;z-index:120;background:var(--blue)}
body.menu-offen .hburger{z-index:130}
body.menu-offen .hburger span{background:#eef0ec}
body.menu-offen .lb-tag{display:none}
/* Das Logo ist ein reines Schwarzweiss-Strichlogo. invert(1) dreht es in die
   helle Fassung, ohne dass eine zweite Bilddatei geladen werden muss. */
body.menu-offen .lb-center img{filter:invert(1)}
.mnav .mbrand,.mnav .mclose{display:none}

/* Kennzeichnung hinter Affiliate-Links im Fliesstext. Klein und ruhig, aber
   dauerhaft sichtbar, damit die Werbung am Link selbst erkennbar bleibt. */
.ll-affi{font-size:.82em;color:var(--grey);white-space:nowrap}

/* Fliesstext unter dem Anschaffungs-Raster. Steht bewusst unter der Liste,
   damit die Karten sofort sichtbar sind, und traegt die Keyword-Substanz der
   Uebersichtsseite. Die erste Ueberschrift braucht oben weniger Luft als im
   Beitrag, weil das Raster darueber schon einen Abstand setzt. */
.ansch-text{padding:8px 0 76px}
.ansch-text .prose>h2:first-child{margin-top:0}