/* LIMITLESSME CI: Anthrazit #333432, Sand #E1D9C2, Bronze #A69075 als einziger Akzent.
   Schrift: URBANIST, selbst gehostet in assets/fonts (seit 08.10.2026), Ersatz fuer Urbane.
   Farben Pruemaran seit 08.10.2026: warmes Hell statt Weiss, Holz statt Nacht, Bronze bleibt. Light 300 traegt erst ab 24px.
   Keine Verläufe, keine Schatten, keine runden Ecken. */
:root{
  --anthrazit:#333432; --tief:#211915; --nacht:#2A201B; /* Holz, aus den Pruemaran-Fotos */
  --sand:#E1D9C2; --sand-hell:#F2EEE6; --weiss:#FFFFFF;
  --grund:#F2EEE6; --flaeche:#EAE4D4; /* warmes Hell, ruhige Zweitflaeche */
  --bronze:#A69075; --bronze-tief:#8a7760;
  --text:#333432; --text-koerper:#55564f; --text-leise:#5f5b55;
  --hell-leise:rgba(255,255,255,.82);
  --linie:rgba(51,52,50,.18); --linie-hell:rgba(255,255,255,.22);
  --rand:clamp(20px,5.5vw,88px);
  --schrift:"Urbanist","Urbane","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
/* 11.10.2026: kein scroll-behavior:smooth mehr, Sprünge landen direkt am Ziel (unten, «Sprünge»). Heller Grund schon auf html, damit beim Laden nichts dunkel aufblitzt */
html{-webkit-text-size-adjust:100%;background:var(--grund)}
body{margin:0;font-family:var(--schrift);font-weight:400;color:var(--text-koerper);background:var(--grund);line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0;color:var(--text)}
h2{font-size:clamp(34px,5.4vw,68px);line-height:1;margin-bottom:28px}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15;margin-bottom:10px}
p{margin:0 0 16px}
.kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--bronze);margin-bottom:20px}
section{padding:clamp(80px,12vw,160px) var(--rand)}
.innen{max-width:1240px;margin:0 auto}
.gross{font-size:clamp(19px,1.9vw,23px);line-height:1.5}
.knopf{display:inline-block;padding:16px 28px;border:1px solid currentColor;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:500;cursor:pointer;background:transparent;color:inherit;font-family:inherit}
.knopf.voll{background:var(--bronze);border-color:var(--bronze);color:var(--weiss)}
.knopf.voll:hover{background:var(--bronze-tief);border-color:var(--bronze-tief)}
.knopf:not(.voll):hover{background:rgba(255,255,255,.08)}
.knopf:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ---------- Bildflächen hinter Text ----------
   Das Bild füllt die ganze Breite, eine ruhige, flache Abdunklung legt sich darüber. */
.bildgrund{position:relative;color:var(--weiss);background-color:var(--nacht);isolation:isolate;overflow:hidden}
.bildgrund > img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);z-index:-2}
.bildgrund::before{content:"";position:absolute;inset:0;background:var(--decke,rgba(28,20,16,.62));z-index:-1}
.bildgrund h1,.bildgrund h2,.bildgrund h3,.abschluss h2,.hero h1,.hero h2,.hero h3{color:var(--weiss)}
.bildgrund p{color:var(--hell-leise)}
.bildgrund .gross{color:rgba(255,255,255,.92)}
.bildgrund .kicker{color:var(--sand)}

/* Navigation */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,36px);padding:calc(16px + env(safe-area-inset-top,0px)) var(--rand) 16px;color:var(--weiss);transition:background .35s}
/* 10.10.2026, Cla: beim Scrollen verzog sich oben Logo und Schrift. Seither bleibt alles gleich gross, nur der Hintergrund kommt dazu. */
.nav.fest{background:rgba(42,32,27,.94)}
.marke{display:block;text-decoration:none;flex:none;line-height:0}
.marke img{display:block;height:52px;width:auto}
@media (max-width:1100px){.marke img{height:46px}}
@media (max-width:860px){.marke img{height:40px}}
@media (max-width:640px){.marke img{height:34px}}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14px;letter-spacing:.09em;font-weight:500;text-transform:uppercase}
.nav ul a{text-decoration:none;color:rgba(255,255,255,.9)}
.nav ul a:hover{color:var(--weiss)}
.nav .knopf{padding:13px 24px;font-size:12.5px;letter-spacing:.13em}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:140px var(--rand) clamp(56px,9vw,110px);color:var(--weiss);background:var(--nacht);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,20,16,.94) 0%,rgba(28,20,16,.86) 34%,rgba(28,20,16,.6) 62%,rgba(28,20,16,.3) 100%)}
.hero .innen{position:relative;z-index:1;width:100%;max-width:none}
.hero .kicker{color:var(--sand)}
.nur-breit{display:inline}
@media (max-width:700px){.nur-breit{display:none}}
.hero h1{font-size:clamp(38px,6.6vw,96px);line-height:1;letter-spacing:-.035em;margin-bottom:22px;text-wrap:balance}
.hero .lead{font-size:clamp(24px,3.2vw,40px);font-weight:300;line-height:1.15;margin-bottom:14px}
.hero p{max-width:560px;color:rgba(255,255,255,.92)}
.hero .fenster{color:var(--sand);font-size:15px;letter-spacing:.06em;margin-top:6px}
.hero .reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.scroll-hinweis{position:absolute;right:var(--rand);bottom:clamp(56px,9vw,110px);z-index:1;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);text-decoration:none}

/* Randlose Zweiteilung: Text auf der einen, Bild bis an den Rand auf der anderen Seite */
.split{display:grid;grid-template-columns:1fr 1fr;padding:0;min-height:92vh}
.split .text{padding:clamp(80px,10vw,150px) var(--rand);display:flex;flex-direction:column;justify-content:center}
.split .text > *{max-width:560px}
.split .bild{position:relative;min-height:60vh}
.split .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split.umgekehrt .bild{order:-1}

/* Zitat über Winternacht */
.zitat{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;--decke:rgba(14,16,22,.42)}
.zitat blockquote{margin:0 auto;max-width:980px;font-size:clamp(34px,5.8vw,82px);line-height:1.04;letter-spacing:-.035em;font-weight:300;color:var(--weiss)}
.zitat small{display:block;margin-top:28px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}

/* Randloses Bildband mit einer Zeile */
.band{min-height:86vh;display:flex;align-items:flex-end;--decke:linear-gradient(to top,rgba(28,20,16,.8) 0%,rgba(28,20,16,.62) 24%,rgba(28,20,16,.26) 52%,rgba(28,20,16,.1) 100%)}
.band p{font-size:clamp(28px,4.4vw,60px);line-height:1.05;letter-spacing:-.03em;font-weight:300;color:var(--weiss);max-width:900px;margin:0}

details .anreise{margin:0 0 14px;display:grid;grid-template-columns:auto;gap:0}
details .anreise dt{font-weight:600;color:var(--text);margin-top:14px}
details .anreise dt:first-child{margin-top:0}
details .anreise dd{margin:4px 0 0}
.anreise-videos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 22px}
.anreise-videos figure{margin:0}
.anreise-videos video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:var(--nacht)}
.anreise-videos figcaption{margin-top:8px;font-size:14.5px;line-height:1.45;color:var(--text-leise)}
@media (max-width:700px){.anreise-videos{grid-template-columns:1fr}}

.zwei-sp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);margin-top:clamp(38px,4.5vw,58px)}
.zwei-sp small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bronze);margin-bottom:12px}
.zwei-sp p{margin:0;font-size:17px;line-height:1.62}
@media (max-width:760px){.zwei-sp{grid-template-columns:1fr;gap:28px}}

/* Lage: eine gezeichnete Hoehenskizze, keine Fremdkarte */
.lage{margin:clamp(30px,4vw,46px) 0 0;padding:0;max-width:560px}
.lage svg{display:block;width:100%;height:auto}
.lage .hang{fill:rgba(166,144,117,.13)}
.lage .kante{fill:none;stroke:var(--bronze);stroke-width:1.6}
.lage .marke circle{fill:var(--bronze)}
.lage .haus-marke path{fill:var(--bronze);stroke:none}
.lage .haus-marke line{stroke:var(--bronze);stroke-width:1.6}
.lage .marke text{font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--text-leise)}
.lage .haus-marke text{fill:var(--bronze-tief);font-weight:600}
.lage figcaption{margin-top:14px;font-size:14.5px;color:var(--text-leise)}
.lage figcaption a{color:var(--bronze-tief);text-underline-offset:3px}
@media (max-width:560px){.lage .marke text{font-size:16px}}

/* Was man hier tun kann */
.tun-kopf{max-width:720px;margin-bottom:clamp(40px,5vw,66px)}

/* Bevor du buchst: die Einwaende frueh und sichtbar, statt im Fliesstext */
.klarheit{background:var(--flaeche)}
.klarheit-kopf{max-width:760px;margin-bottom:clamp(44px,5.5vw,72px)}
.klarheit-kopf h2{margin-bottom:22px}
.klarheit-liste{list-style:none;margin:0;padding:0;counter-reset:kl;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,96px)}
.klarheit-liste li{counter-increment:kl;padding:26px 0 24px;border-top:1px solid var(--linie)}
.klarheit-liste li h3{font-size:clamp(18px,1.9vw,21px);line-height:1.25;margin-bottom:8px;
  display:flex;gap:14px;align-items:baseline}
.klarheit-liste li h3::before{content:counter(kl,decimal-leading-zero);font-size:12px;letter-spacing:.14em;
  font-weight:600;color:var(--bronze);flex:none}
.klarheit-liste li p{margin:0 0 0 30px;font-size:16px;line-height:1.6;color:var(--text-koerper)}
.klarheit-liste li.breit{grid-column:1 / -1}
.klarheit-liste li.breit p{max-width:none}
.klarheit-mehr{margin:clamp(34px,4vw,52px) 0 0;font-size:16px;color:var(--text-leise)}
.klarheit-mehr a{color:var(--bronze-tief);text-underline-offset:3px}
@media (max-width:860px){
  .klarheit-liste{grid-template-columns:1fr}
  .klarheit-liste li p{margin-left:0}
}

/* Das Haus */
.haus{padding-bottom:0}
.haus-kopf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,110px);align-items:start}
@media (min-width:981px){
  .haus-kopf > div:first-child{position:relative}
  .haus-kopf > div:first-child .kicker{position:absolute;bottom:100%;left:0;margin:0 0 14px}
  .haus-kopf > div:first-child h2{margin-top:.12em}
}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(220px,26vw,420px);grid-auto-flow:dense;gap:3px;margin:clamp(56px,7vw,90px) calc(-1 * var(--rand)) 0;background:var(--nacht)}
.galerie button{padding:0;border:0;background:var(--tief);cursor:zoom-in;overflow:hidden;display:block;height:100%}
.galerie button.breit{grid-column:span 2}
.galerie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s ease,opacity .4s}
.galerie button:hover img{transform:scale(1.04)}
.bildnote{font-size:13px;color:var(--text-leise);margin-top:14px}
.bildgrund .bildnote{color:rgba(255,255,255,.76)}
.wichtig{border-left:2px solid var(--bronze);padding-left:18px}
.wichtig + .wichtig{margin-top:10px}

/* Versorgung über Feuer */
.versorgung{background:var(--flaeche)}
.vier{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linie);margin-top:56px}
.vier div{padding:32px 26px 0 0;border-right:1px solid var(--linie);margin-right:26px}
.vier div:last-child{border-right:0;margin-right:0}
.vier small{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:14px}
.vier.drei-spalten{grid-template-columns:repeat(3,1fr)}
.vier .geplant{font-size:13px;color:var(--bronze-tief)}

/* Für wen */
.fuer-wen{--decke:linear-gradient(to bottom,rgba(28,20,16,.82) 0%,rgba(28,20,16,.68) 40%,rgba(28,20,16,.8) 100%)}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--linie-hell)}
.drei div{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px) 0 0;border-right:1px solid var(--linie-hell);margin-right:clamp(20px,2.4vw,36px)}
.drei div:last-child{border-right:0;margin-right:0}
.drei .nr{font-size:13px;color:var(--bronze);font-weight:600;letter-spacing:.16em;margin-bottom:26px;display:block}

/* Gastgeber */
/* Gastgeber: der Text ist laenger als das Bild hoch ist. Ohne diese Regel muesste
   das Portraet auf die volle Spaltenhoehe skalieren und wuerde auf
   einen schmalen Streifen beschnitten. Darum laeuft es als sticky mit. */
@media (min-width:981px){
  .gastgeber .bild{min-height:0}
  .gastgeber .bild img{position:sticky;inset:auto;top:0;height:100vh;max-height:900px;
    object-position:50% 38%}
}
@media (max-width:980px){
  .gastgeber .bild img{object-position:50% 30%}
}
.gastgeber{background:var(--flaeche)}
.gastgeber blockquote{margin:0 0 24px;font-size:clamp(22px,2.6vw,32px);line-height:1.25;font-weight:300;letter-spacing:-.01em}
.gruss{font-size:16px;line-height:1.5;margin-top:0;padding:15px 0;border-bottom:1px solid var(--linie)}
.gruss b{font-weight:600;color:var(--text)}
.gruss a{text-decoration:none;border-bottom:1px solid var(--bronze);white-space:nowrap}
.leistet{list-style:none;padding:0;margin:14px 0 0}
.leistet li{padding:15px 0;border-top:1px solid var(--linie);font-size:16px;line-height:1.5}
.leistet li:last-child{border-bottom:0}
.leistet b{font-weight:600}
.leistet a{text-decoration:none;border-bottom:1px solid var(--bronze);white-space:nowrap}

/* Preise */
.preise{background:var(--grund)}
.preistabelle{width:100%;border-collapse:collapse;margin-top:40px;font-size:16px}
.preistabelle th,.preistabelle td{text-align:left;padding:20px 16px 20px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.preistabelle th{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-leise);font-weight:600}
.preistabelle td.preis{font-size:clamp(24px,2.6vw,34px);font-weight:300;white-space:nowrap}
.preistabelle .saisonname{font-weight:600;display:flex;align-items:center;gap:10px}
.punkt{width:12px;height:12px;display:inline-block;flex:none}
.p-weihnachten{background:var(--bronze-tief)}.p-hochsaison,.p-sportferien{background:var(--bronze)}.p-ferienzeit{background:#cdbfa9}.p-nebensaison{background:#fff;border:1px solid var(--linie)}
.tabelle-scroll{overflow-x:auto}
.listen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:64px}
.listen ul{list-style:none;padding:0;margin:0}
.listen li{padding:11px 0;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:12px;font-size:15px}
.listen li span:last-child{white-space:nowrap;text-align:right}

/* Buchung über Winterfenster */
/* Stimmen von Gästen, direkt nach dem Preis (web-standard §4) */
.stimmen{background:var(--sand)}
.stimmen .kicker{color:var(--bronze-tief)}
.stimmen-reihe{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie);margin-top:56px}
.stimme{margin:0;padding:34px 30px 0 0;border-right:1px solid var(--linie);margin-right:30px;display:flex;flex-direction:column}
.stimme:last-child{border-right:0;margin-right:0}
.stimme blockquote{margin:0 0 26px;font-size:clamp(21px,2vw,27px);line-height:1.3;font-weight:300;letter-spacing:-.01em;color:var(--text)}
.stimme figcaption{margin-top:auto;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bronze-tief)}
.stimme figcaption.mit-bild{display:flex;align-items:center;gap:16px}
.stimme figcaption.mit-bild img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.stimme.platzhalter blockquote,.stimme.platzhalter figcaption{color:var(--text-leise);font-style:italic}
@media (max-width:860px){
  .stimmen-reihe{grid-template-columns:1fr}
  .stimme{border-right:0;margin-right:0;padding:30px 0 34px;border-bottom:1px solid var(--linie)}
  .stimme:last-child{border-bottom:0}
}
.buchen{background:var(--flaeche)}
.buchen .kicker{color:var(--bronze)}
.versorgung .kicker{color:var(--bronze)}
.buchung{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);margin-top:48px;align-items:start}
.kalender{background:var(--weiss);color:var(--text);padding:clamp(18px,2.4vw,32px);border:1px solid var(--linie)}
.kal-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.kal-kopf button{background:none;border:1px solid var(--linie);width:42px;height:42px;cursor:pointer;font-size:18px;color:var(--text)}
.kal-kopf button:disabled{opacity:.3;cursor:default}
.monate{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.monat h4{margin:0 0 10px;font-size:15px;font-weight:600;text-align:center;letter-spacing:.02em}
.wochentage,.tage{display:grid;grid-template-columns:repeat(7,1fr)}
.wochentage span{font-size:11px;text-align:center;color:var(--text-leise);padding:4px 0;letter-spacing:.06em}
.tag{position:relative;aspect-ratio:1/1;border:0;background:none;font:inherit;font-size:14px;cursor:pointer;color:var(--text);padding:0}
.tag::after{content:"";position:absolute;left:18%;right:18%;bottom:12%;height:3px}
.tag.s-weihnachten::after{background:var(--bronze-tief)}
.tag.s-hochsaison::after,.tag.s-sportferien::after{background:var(--bronze)}
.tag.s-ferienzeit::after{background:#cdbfa9}
.tag:hover:not(:disabled){background:var(--sand-hell)}
.tag:disabled{color:#c4c1bb;cursor:default}
.tag.belegt{text-decoration:line-through;color:#b5b1aa}
.tag.im-bereich{background:var(--sand)}
.tag.start,.tag.ende{background:var(--anthrazit);color:var(--weiss)}
.legende{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:var(--text-leise);margin-top:16px;padding-top:14px;border-top:1px solid var(--linie)}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{display:inline-block;width:14px;height:3px}
.hinweis{font-size:14px;margin-top:14px;min-height:22px;color:var(--bronze-tief)}
.hinweis.fehler{color:#9b3d2e}
.formular{background:var(--weiss);padding:clamp(20px,2.6vw,36px);border:1px solid var(--linie)}
.formular label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise);margin:14px 0 6px}
.formular input,.formular select,.formular textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--linie);color:var(--text);font:inherit;font-size:16px;padding:8px 0;border-radius:0}
.formular input:focus,.formular select:focus,.formular textarea:focus{border-bottom-color:var(--bronze)}
.formular textarea{min-height:80px;resize:vertical}
.formular .paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zusammenfassung{margin:22px 0 6px;border-top:1px solid var(--linie);background:var(--sand-hell);padding:0 14px}
.zusammenfassung div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linie);font-size:15px}
.zusammenfassung div.total{font-size:20px;font-weight:600;border-bottom:0;padding:14px 0}
.zusammenfassung .leer{color:var(--text-leise);font-size:15px;padding:14px 0;display:block;border:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:18px 0}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--bronze)}
.formular .knopf{width:100%;margin-top:6px}
.formular .klein{font-size:13px;color:var(--text-leise);margin-top:14px}
.danke{display:none;padding:10px 0}
/* Zweiter Weg zu Cla, falls jemand kein Formular mag */
.wa{display:inline-flex;align-items:center;gap:10px;margin-top:22px;text-decoration:none;font-size:15px;border-bottom:1px solid var(--bronze);padding-bottom:3px}
.wa svg{width:19px;height:19px;flex:none;fill:#25D366}

/* FAQ */
.fragen-kopf{position:sticky;top:110px}
@media (min-width:981px){
  .fragen-kopf .kicker{position:absolute;bottom:100%;left:0;margin:0 0 14px}
  .fragen-kopf h2{margin-top:calc(22px + .12em)}
}
.kontakt{font-size:clamp(19px,1.9vw,23px);line-height:1.6}
.kontakt a{text-decoration:none;border-bottom:1px solid var(--bronze)}
details{border-bottom:1px solid var(--linie);padding:22px 0}
details summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-weight:300;font-size:24px;line-height:1;color:var(--bronze)}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;max-width:760px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,110px)}

/* Abschluss */
.abschluss{min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;--decke:linear-gradient(to bottom,rgba(28,20,16,.7) 0%,rgba(28,20,16,.58) 45%,rgba(28,20,16,.66) 100%)}
.abschluss h2{color:var(--weiss);margin-bottom:34px}

/* Footer */
footer{background:var(--nacht);color:rgba(255,255,255,.78);padding:72px var(--rand) calc(40px + env(safe-area-inset-bottom,0px));font-size:15px}
footer .reihe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
footer a{text-decoration:none;color:var(--sand);border-bottom:1px solid rgba(225,217,194,.35);padding-bottom:1px}
footer a:hover{color:var(--weiss);border-bottom-color:var(--weiss)}
footer .unten a{color:inherit;border-bottom-color:var(--linie-hell)}
footer .logo{width:160px;opacity:.95}
footer .fuss-marke img{display:block;width:100%;max-width:252px;height:auto;margin-bottom:22px}
footer .fuss-titel{color:var(--weiss);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
footer .fuss-zweit{margin-top:10px}
footer .reihe > div{flex:1 1 230px;min-width:0;line-height:1.75}
@media (max-width:620px){footer .fuss-marke img{max-width:210px}}
footer .unten{margin-top:48px;padding-top:20px;border-top:1px solid var(--linie-hell);font-size:13px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}

/* Einblenden beim Scrollen, ruhig */
.auf{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.auf.da{opacity:1;transform:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .auf{opacity:1;transform:none;transition:none;animation:auftauchen linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
    @keyframes auftauchen{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}

/* Sprunglink für Tastatur und Screenreader */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--nacht);color:#fff;padding:14px 20px;text-decoration:none}
.sprung:focus{left:12px;top:12px}

/* Mitlaufender Balken auf dem Telefon */
.balken{display:none}
@media (max-width:760px){
  .balken{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:12px;
          background:rgba(42,32,27,.96);color:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));font-size:14px}
  .balken b{font-weight:600}
  .balken > div:first-child{line-height:1.25;max-width:9.5em}
  .hero{padding-bottom:calc(clamp(56px,9vw,110px) + 72px)}
  .balken .knopf{padding:11px 16px;font-size:11px}
  /* 11.10.2026, Cla: WhatsApp ohne Grün, nur das Zeichen in der Schriftfarbe des Balkens, Tippfläche 44 × 44 */
  .balken-wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -9px;color:inherit}
  .balken-wa svg{width:26px;height:26px;fill:currentColor}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* Rechtliches */
.recht{background:var(--tief);color:rgba(255,255,255,.82);padding-top:clamp(56px,7vw,86px);padding-bottom:clamp(56px,7vw,86px)}
.recht h2{color:var(--weiss);font-size:clamp(26px,3.4vw,40px);margin-bottom:22px}
.recht details{border-bottom:1px solid var(--linie-hell)}
.recht summary{color:#fff;font-size:16px}
.recht p,.recht li{color:rgba(255,255,255,.8);font-size:15px}
.recht a{color:var(--sand)}
.recht ul{padding-left:18px;margin:12px 0 0}
.recht li{padding:3px 0}

/* Lightbox */
dialog.leuchte{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
dialog.leuchte::backdrop{background:rgba(12,12,11,.95)}
dialog.leuchte img{max-width:96vw;max-height:86vh;object-fit:contain;margin:0 auto}
dialog.leuchte p{color:rgba(255,255,255,.82);text-align:center;font-size:14px;margin:12px 0 0}
dialog.leuchte .zu{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:18px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:44px;height:44px;font-size:22px;cursor:pointer}
dialog.leuchte .vor,dialog.leuchte .zurueck{position:fixed;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:40px;cursor:pointer;padding:16px}
dialog.leuchte .zurueck{left:6px} dialog.leuchte .vor{right:6px}

@media (max-width:980px){
  .nav ul{display:none}
  .split,.haus-kopf,.zwei,.buchung{grid-template-columns:1fr}
  .split{min-height:0}
  .split .bild{min-height:70vh}
  .split.umgekehrt .bild{order:0}
  .vier,.vier.drei-spalten{grid-template-columns:1fr;border-top:0}
  .vier div{border-right:0;margin-right:0;border-top:1px solid var(--linie)}
  .drei{grid-template-columns:1fr;border-top:0}
  .drei div{border-right:0;margin-right:0;border-top:1px solid var(--linie-hell);padding-bottom:10px}
  .listen{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(200px,42vw,400px)}
  .fragen-kopf{position:static}
  .scroll-hinweis{display:none}
  .band,.zitat{min-height:70vh}
}
@media (max-width:700px){
  /* Eine Spalte, sonst stehen wieder zwei Innenaufnahmen nebeneinander */
  .galerie{grid-template-columns:1fr;grid-auto-rows:clamp(230px,62vw,360px)}
  .galerie button.breit{grid-column:span 1}
}
@media (max-width:620px){
  body{font-size:16px}
  .monate{grid-template-columns:1fr}
  .monat + .monat{display:none}
  .vier{grid-template-columns:1fr}
  .formular .paar{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.galerie img{transition:none}.auf{opacity:1;transform:none;transition:none}.ruhig{background-attachment:scroll}}

/* 09.10.2026 (Cla): Knöpfe mit abgerundeten Ecken wie auf clamosca.ch, weniger leere Fläche */
.knopf{border-radius:8px}
section{padding-top:clamp(64px,8vw,116px);padding-bottom:clamp(64px,8vw,116px)}
.split .text{padding-top:clamp(64px,8vw,116px);padding-bottom:clamp(64px,8vw,116px)}
.gastgeber .bild img{object-position:50% 18%}
/* Buchung: der Kalender wandert neben dem langen Formular mit, damit links keine leere Fläche steht */
@media (min-width:981px){.kalender{position:sticky;top:110px}}

/* =====================================================================
   11.10.2026: Unterseiten und Handy-Check (Arbeit/2026-10-11_Handy-Check-Pruemaran-Fliegenfischen.md, P1 bis P8)
   ===================================================================== */

/* Kopfzeile: rechts Links, Knopf und Menü. Höhe und Logo bleiben gleich (10.10.2026) */
.nav-rechts{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px)}
.nav ul a[aria-current="page"]{color:var(--sand)}
.nav:has(.menue[open]){background:rgba(42,32,27,.94)}
/* P5: am Handy verschwindet der Kopf beim Runterscrollen und kommt beim Hochscrollen zurück */
.nav{transition:background .35s,transform .3s ease}
@media (max-width:760px){.nav.weg{transform:translateY(-100%)}}
/* Seiten ohne Bild oben: Kopf von Anfang an dunkel */
.ohne-bild .nav{background:rgba(42,32,27,.94)}

/* P1: Menü mit drei Strichen, Cla 11.10.2026 */
.menue{position:relative;display:none;border:0;padding:0}
.menue>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;color:rgba(255,255,255,.92)}
.menue>summary::-webkit-details-marker{display:none}
.menue>summary::after,.menue[open]>summary::after{content:none;display:none}
.menue-striche{position:relative;display:block;flex:none;width:24px;height:16px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menue-striche::after,.menue-striche::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor}
.menue-striche::before{display:none}
.menue[open] .menue-striche{border-color:transparent}
.menue[open] .menue-striche::after{transform:rotate(45deg)}
.menue[open] .menue-striche::before{display:block;transform:rotate(-45deg)}
.menue-liste{position:absolute;right:0;top:calc(100% + 14px);width:min(300px,calc(100vw - 2 * var(--rand)));background:rgba(42,32,27,.98);border:1px solid var(--linie-hell);padding:6px 22px 22px;display:flex;flex-direction:column}
.menue-liste a{display:block;padding:13px 0;text-decoration:none;font-size:17px;font-weight:500;color:var(--weiss);border-bottom:1px solid var(--linie-hell)}
.menue-liste a[aria-current="page"]{color:var(--sand)}
.menue-liste a.knopf{margin-top:18px;border:1px solid var(--bronze);text-align:center;font-size:13px;padding:15px 20px}
@media (max-width:1100px){.nav ul{display:none}.menue{display:block}}
@media (max-width:760px){.nav-rechts > .knopf{display:none}}

/* Kopf der Unterseiten: Bild mit Titel */
.seitenkopf{min-height:64vh;display:flex;align-items:flex-end;padding-top:150px;--decke:linear-gradient(to top,rgba(28,20,16,.9) 0%,rgba(28,20,16,.72) 40%,rgba(28,20,16,.38) 100%)}
.seitenkopf .innen{width:100%}
.seitenkopf h1{font-size:clamp(38px,6vw,84px);line-height:1;letter-spacing:-.035em;margin-bottom:24px;text-wrap:balance}
.seitenkopf .gross{max-width:640px;margin-bottom:0}
@media (max-width:760px){.seitenkopf{min-height:0;padding-top:140px}}
/* Seiten ohne Bild oben */
.ohne-bild main > section:first-child{padding-top:calc(84px + clamp(40px,6vw,90px))}
.ohne-bild h1{font-size:clamp(34px,5.4vw,68px);line-height:1;margin-bottom:28px}
@media (min-width:981px){.fragen-kopf h1{margin-top:calc(22px + .12em)}}

/* Startseite: kurzer Blick ins Haus */
.teaser-bilder{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:clamp(40px,5vw,64px) calc(-1 * var(--rand)) clamp(32px,4vw,48px);background:var(--nacht)}
.teaser-bilder a{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--tief)}
.teaser-bilder img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.teaser-bilder a:hover img{transform:scale(1.04)}
@media (max-width:700px){.teaser-bilder{grid-template-columns:repeat(2,1fr)}}
.haus-teaser .gross,.preis-teaser .gross{max-width:720px}
.preis-teaser{background:var(--grund)}

/* P3: Galerie am Handy als waagrechte Wischreihe */
.wisch-hinweis{display:none}
@media (max-width:700px){
  .galerie{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--rand);padding:0 var(--rand);gap:3px;background:transparent;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .galerie::-webkit-scrollbar{display:none}
  .galerie button,.galerie button.breit{flex:0 0 80%;height:auto;aspect-ratio:3/4;scroll-snap-align:start}
  .wisch-hinweis{display:block;font-size:15px;color:var(--text-leise);margin:12px 0 0}
}
.haus-galerie{padding-top:0}
.haus-galerie .galerie{margin-top:0}
.seitenkopf + section:not(.haus-galerie){padding-top:clamp(40px,5vw,72px)}
.seitenkopf + .preise .preistabelle{margin-top:0}
/* Der Tag gehört dir: auf hellem Grund dunkle Linien, Jahreszeit als kleine Überzeile */
.tun .drei{border-top-color:var(--linie)}
.tun .drei div{border-color:var(--linie)}
.drei small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bronze);margin-bottom:10px}
/* Zwei gleiche Flächen nacheinander auseinanderhalten */
.klarheit + .versorgung{background:var(--grund)}
/* Leere Fehlerzeilen im Formular nehmen keinen Platz */
.formular .hinweis:empty{min-height:0;margin:0}

/* P4: Preistabelle am Handy als Karten untereinander */
@media (max-width:700px){
  .tabelle-scroll{overflow:visible}
  .preistabelle,.preistabelle tbody,.preistabelle tr,.preistabelle td{display:block;width:100%}
  .preistabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .preistabelle tr{background:var(--weiss);border:1px solid var(--linie);padding:18px 18px 14px;margin-bottom:12px}
  .preistabelle td{border:0;padding:3px 0}
  .preistabelle td[data-label]::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);font-weight:600;margin-top:10px}
  .preistabelle td.preis{font-size:30px}
}

/* P6: Hinweise mindestens 15 px */
.bildnote,.formular .klein{font-size:15px}
.legende{font-size:14px}
footer .unten{font-size:14px}

/* P7: Häkchen 24 px, ganze Zeile antippbar, Felder mindestens 44 px hoch */
.formular input,.formular select{min-height:44px}
.formular label.check{display:flex;align-items:center;gap:12px;min-height:44px;margin:8px 0;padding:4px 0;cursor:pointer;text-transform:none;letter-spacing:0;font-size:15px;color:var(--text-koerper)}
.formular label.check input{width:24px;height:24px;min-height:0;flex:none;margin:0}
.formular label.check.agb{align-items:flex-start}
.formular label.check.agb input{margin-top:1px}

/* P8: vor dem Kalender der Weg zu den Fragen */
.vorher{font-size:16px;margin:0 0 4px;color:var(--text-leise)}
.vorher a{color:var(--bronze-tief);text-underline-offset:3px;font-weight:600}

/* Ein Abschluss pro Seite. Auf den Unterseiten kürzer */
.abschluss.kompakt{min-height:58vh}
.abschluss .knoepfe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:760px){.abschluss.kompakt{min-height:0}}
.abschluss.kompakt .knopf:not(.voll){color:var(--weiss)}

/* Handy straffen, Cla 11.10.2026: «unter dem Testimonial von Lisa war noch ziemlich viele Farbflächen.
   Und dasselbe könnte auch zutreffen für Bilder.» Keine Strecke ohne Text oder Bild über rund 120 px. */
@media (max-width:640px){
  section{padding-top:44px;padding-bottom:44px}
  .split .text{padding-top:44px;padding-bottom:44px}
  .seitenkopf + section:not(.haus-galerie){padding-top:32px}
  .haus-galerie .galerie{margin-top:20px}
  .drei div:last-child{padding-bottom:0}
  .ohne-bild main > section:first-child{padding-top:116px}
  .seitenkopf{padding-top:128px;padding-bottom:40px}
  h2{margin-bottom:20px}
  .split .bild{min-height:0;aspect-ratio:4/5}
  .zitat,.band{min-height:0;padding-top:120px;padding-bottom:120px}
  .zitat small{margin-top:18px}
  .abschluss,.abschluss.kompakt{min-height:0;padding-top:96px;padding-bottom:96px}
  .abschluss h2{margin-bottom:22px}
  .tun-kopf,.klarheit-kopf{margin-bottom:24px}
  .drei,.vier{margin-top:28px}
  .drei div{padding-top:22px;padding-bottom:18px}
  .drei .nr{margin-bottom:12px}
  .stimmen-reihe{margin-top:24px}
  .stimme{padding:22px 0 24px}
  .stimme blockquote{margin-bottom:14px}
  .listen{margin-top:36px}
  .preistabelle{margin-top:24px}
  .buchung{margin-top:24px}
  .galerie,.teaser-bilder{margin-top:28px}
  .teaser-bilder{margin-bottom:24px}
  .klarheit-mehr{margin-top:24px}
  .lage{margin-top:22px}
  .zwei{gap:28px}
  details{padding:18px 0}
  footer{padding-top:40px}
  footer .unten{margin-top:32px}
}

/* 11.10.2026, Cla: Bildansicht grösser, Sprungziele nicht unter der Kopfzeile */
section[id]{scroll-margin-top:84px}
@media (max-width:640px){
  dialog.leuchte{max-width:100vw;max-height:100vh;width:100vw;margin:auto}
  dialog.leuchte img{width:100vw;max-width:100vw;max-height:88vh;height:auto}
  dialog.leuchte .vor,dialog.leuchte .zurueck{padding:10px;font-size:34px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
}

/* =====================================================================
   11.10.2026, Cla: Bildausschnitte am Handy und Nachtrag (Kopfzeile, Wischreihe, Cla Mosca, WhatsApp)
   ===================================================================== */
/* Kopfzeile bleibt am Handy immer stehen (Cla: «wenn man wischt, geht Logo und Prümaran weg»).
   Das Ausblenden aus P5 ist im Skript abgeschaltet, diese Regel greift auch bei einem alten Skript im Cache. */
.nav.weg{transform:none}

@media (max-width:640px){
  /* Hero: im Hochformat bleiben 37 % der Bildbreite. Vorher die Mitte mit Dachkehle, Giebel und Kamin abgeschnitten.
     Jetzt der linke Giebel ganz: Dachspitze, Kamin, Fenster. */
  .hero img{object-position:9% 40%}

  /* Startseite, «Das Haus heute»: die vier Bilder als Wischreihe wie die Galerie auf «Das Haus» */
  .teaser-bilder{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--rand);padding:0 var(--rand);
    gap:3px;background:transparent;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .teaser-bilder::-webkit-scrollbar{display:none}
  .teaser-bilder a{flex:0 0 80%;scroll-snap-align:start}
  .haus-teaser .innen > .knopf{display:none}

  /* «Warum ich das Haus vermiete»: Bild von Cla gleich unter der Überschrift, nicht am Ende */
  .gastgeber .text{display:contents}
  .gastgeber .text > *{margin-left:var(--rand)!important;margin-right:var(--rand)!important}
  .gastgeber .text > :first-child{margin-top:44px!important}
  .gastgeber .text > :last-child{margin-bottom:44px}
  .gastgeber .text > .kicker:first-child,.gastgeber .text > h2:nth-child(2){order:-2}
  .split.umgekehrt.gastgeber .bild{order:-1;margin-bottom:28px}
}
/* Startseite: die vier zusätzlichen Galeriebilder nur in der Wischreihe am Handy */
.teaser-bilder .nur-handy{display:none}
@media (max-width:640px){.teaser-bilder .nur-handy{display:block}}

/* =====================================================================
   11.10.2026, Cla: Sprünge, Wischreihe auf «Das Haus», Abstände «Cla Mosca», kein dunkler Blitz beim Laden
   ===================================================================== */
/* Sprünge: Ein Link auf eine Stelle einer anderen Seite (Menü «Cla Mosca» → ../#gastgeber, «Anfragen» → anfrage/#formular,
   «Impressum und Daten» → fragen/#rechtliches) landet sofort dort. Vorher glitt die Seite mit scroll-behavior:smooth von oben
   an die Stelle. Das Ziel beginnt genau unter der Kopfzeile: --kopf ist ihre Höhe (höchstes Element plus 2 × 16 px), am Handy 76 px. */
:root{--kopf:calc(84px + env(safe-area-inset-top,0px))}
@media (max-width:1100px){:root{--kopf:calc(80px + env(safe-area-inset-top,0px))}} /* Knopf «Anfragen» 48 px */
@media (max-width:760px){:root{--kopf:calc(76px + env(safe-area-inset-top,0px))}}  /* Knopf weg, Menü 44 px */
section[id]{scroll-margin-top:var(--kopf)}
/* Das Formular ist ein weisser Kasten, er bekommt Luft zur Kopfzeile */
#formular{scroll-margin-top:calc(var(--kopf) + 16px)}

/* Kopfbilder: Bis das Foto geladen ist, liegt eine winzige Vorschau desselben Fotos (im HTML, rund 600 Byte) als Hintergrund.
   Vorher war die Fläche bis dahin einfarbig dunkel (--nacht) und das Bild kam erst danach. */
.hero,.seitenkopf{background-size:cover;background-repeat:no-repeat;background-position:center 40%}
.seitenkopf{background-position:center}
@media (max-width:640px){.hero{background-position:9% 40%}}

@media (max-width:700px){
  /* «Das Haus»: die Wischreihe schliesst direkt an den Seitenkopf an. Vorher stand dazwischen ein heller Streifen von 20 px.
     Grund wie auf dem Laptop dunkel, auch neben dem ersten Bild und in den Fugen. */
  .haus-galerie .galerie{margin-top:0;background:var(--nacht)}
}
@media (max-width:640px){
  /* Startseite: der Knopf «Das Haus ansehen» unter der Wischreihe fällt am Handy weg, sein Abstand darüber jetzt auch.
     Vorher 24 + 44 px bis «Cla Mosca», jetzt 44 px wie bei allen Abschnitten. */
  .haus-teaser .teaser-bilder{margin-bottom:0}
  /* «Warum ich das Haus vermiete»: Überzeile → Überschrift → Bild → Text in gleichen Schritten, sichtbar je rund 30 px.
     Die Überzeile behält ihre 20 px wie überall, Überschrift und Bild bekommen 24 px (vorher 20 und 28). */
  .gastgeber .text > h2:nth-child(2){margin-bottom:24px}
  .split.umgekehrt.gastgeber .bild{margin-bottom:24px}
}

/* 11.10.2026, Cla («Ja, beide»): Clas Foto bei «Cla Mosca» (#gastgeber) lädt ohne Verzögerung. Bis es da ist, liegt wie bei den
   Seitenköpfen eine winzige Vorschau desselben Fotos (im HTML, rund 600 Byte) im Bildrahmen, im gleichen Ausschnitt wie das Foto. */
.gastgeber .bild img{background-size:cover;background-repeat:no-repeat;background-position:50% 18%}

/* 11.10.2026, Nachtrag Cla: Wischreihen und Startbild am Handy */
@media (max-width:700px){
  /* «Das Haus»: Die Wischreihe hört auf, wenn das letzte Bild bündig am rechten Rand steht. Vorher folgte noch ein Streifen von 20 px. */
  .galerie{padding-right:0;scroll-padding-right:0}
  /* Bilder gleich gross wie vorher: 80 % der Breite ohne die beiden Ränder */
  .galerie button,.galerie button.breit{flex-basis:calc((100% - var(--rand)) * .8)}
}
@media (max-width:640px){
  /* Startseite, «Das Haus heute»: gleich wie auf «Das Haus», das letzte Bild schliesst rechts bündig ab */
  .teaser-bilder{padding-right:0;scroll-padding-right:0}
  .teaser-bilder a{flex-basis:calc((100% - var(--rand)) * .8)}
  /* Startseite: Die Wischreihe schliesst den Abschnitt ab, darunter kein heller Streifen von 44 px mehr.
     Bis zur Überzeile «Cla Mosca» bleiben die 44 px des nächsten Abschnitts, gleich wie auf «Das Haus». */
  .haus-teaser{padding-bottom:0}
  /* Startbild: Unter «Das Haus ansehen» bis zur Unterkante des Bildes 44 px, gleich viel wie von der Unterkante bis «Der Name».
     Vorher 128 px. Das Bild wird dafür unten um 84 px kürzer, der Text darin steht an derselben Stelle. */
  .hero{padding-bottom:44px;min-height:calc(100vh - 84px);min-height:calc(100svh - 84px)}
}

/* 24.10.2026: Blog. Übersicht (blog/index.html) und Beitrag (Vorlage blog/_vorlage-artikel/). Nur Farben, Grössen und Linien der Seite. */
.blog-kopf .gross{max-width:640px}
.blog-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px)}
.blog-karten:empty,.blog-karten:not(:has(.karte)){display:none}
.blog-karten .karte{border-top:1px solid var(--linie);padding-top:22px}
.blog-karten .karte a{display:block;text-decoration:none;color:inherit}
.blog-karten .karte img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-bottom:20px}
.blog-karten .karte time,.artikel-meta{display:block;font-size:14px;color:var(--text-leise);margin-bottom:10px}
.blog-karten .karte h2{font-size:clamp(22px,2.2vw,28px);line-height:1.15;margin-bottom:10px}
.blog-karten .karte p{margin:0}
.blog-karten .karte a:hover h2{color:var(--bronze-tief)}
.blog-leer{max-width:640px}
.blog-karten:has(.karte) ~ .blog-leer{display:none}
.themen{background:var(--sand-hell)}
.blog-liste + .themen{padding-top:0}
.themen-liste{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie)}
.themen-liste li{padding:30px clamp(18px,2.4vw,36px) 0 0;margin-right:clamp(18px,2.4vw,36px);border-right:1px solid var(--linie)}
.themen-liste li:last-child{border-right:0;margin-right:0}
.themen-liste .nr{display:block;font-size:13px;color:var(--bronze-tief);font-weight:600;letter-spacing:.16em;margin-bottom:18px}
.themen-liste h3{font-size:clamp(22px,2.2vw,28px);line-height:1.15;margin-bottom:14px}
.themen-liste p{margin:0;font-size:16px}
.themen-hinweis{margin:36px 0 0;font-size:15px;color:var(--text-leise)}
@media (max-width:980px){.blog-karten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .themen-liste{grid-template-columns:1fr;margin-top:32px}
  .themen-liste li{border-right:0;margin-right:0;padding:26px 0 28px;border-bottom:1px solid var(--linie)}
  .themen-liste li:last-child{border-bottom:0}
}
@media (max-width:620px){.blog-karten{grid-template-columns:1fr}}
/* Beitrag */
.artikel-kopf .innen,.artikel-text .innen{max-width:760px}
.artikel-kopf h1{font-size:clamp(34px,5vw,60px);line-height:1.04;margin-bottom:24px;text-wrap:balance}
.artikel-kopf .gross{margin-bottom:20px}
.artikel-text{padding-top:0}
.artikel-text h2{font-size:clamp(26px,3vw,38px);line-height:1.1;margin:48px 0 18px}
.artikel-text blockquote{margin:32px 0;padding:0 0 0 22px;border-left:2px solid var(--bronze);font-size:clamp(21px,2vw,26px);line-height:1.35;font-weight:300;color:var(--text)}
.artikel-text blockquote p{margin:0}
.artikel-text ul{padding-left:20px;margin:0 0 16px}
.artikel-text li{margin:6px 0}
.artikel-text a{color:var(--text);text-decoration-color:var(--bronze);text-underline-offset:3px}
.artikel-bild{margin:0;padding:0 var(--rand) clamp(36px,5vw,64px)}
.artikel-bild img{width:100%;height:auto}
.krumen{font-size:14px;color:var(--text-leise);margin-bottom:24px}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.krumen li+li::before{content:"/";margin-right:10px;color:var(--bronze)}
.krumen a{text-decoration:none;border-bottom:1px solid var(--linie)}
/* 24.10.2026: mit dem sechsten Punkt «Blog» wurde die Zeile unter 1250 px zu eng, «Das Haus» und «Cla Mosca» brachen um. Darum Wörter nie umbrechen, Abstand kleiner bis 1400 px und die drei Striche schon bis 1180 px. */
.nav ul li{white-space:nowrap}
@media (max-width:1400px){.nav ul{gap:22px}}
@media (max-width:1180px){.nav ul{display:none}.menue{display:block}}
/* Beitrag: der Kopf steht in <article>, darum eigener Abstand unter der festen Kopfzeile (wie die erste Sektion der Unterseiten) */
.ohne-bild .artikel-kopf{padding-top:calc(84px + clamp(40px,6vw,90px));padding-bottom:clamp(28px,4vw,48px)}
@media (max-width:760px){.ohne-bild .artikel-kopf{padding-top:116px}}