/* Entwurf V3 (Robert 14.10.2026)
   Schrift aus der Claude-Design-Vorlage vom 25.07.2026: Instrument Serif fuer die
   grossen Ueberschriften, Plus Jakarta Sans fuer Text und Bedienung. Dazu ein
   Breitbild ueber die volle Breite oben. Die Farben bleiben die Hausmarke von
   campingamsee.com (site.css), nur die Schrift und der Auftakt aendern sich.
   Wird nur mit STIL=v3 gebaut (build.mjs), die normale Vorschau bleibt unberuehrt. */

@font-face{
  font-family:"Instrument Serif";
  src:url("fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("fonts/instrument-serif-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Schrift ---------- */
.stil-v3{
  --schrift-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --schrift-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --schrift-text:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:16.5px;
}
/* Serife nur fuer die grossen Ueberschriften, wie in der Vorlage. Sie hat nur
   einen Schnitt (400): fett gesetzt wuerde der Browser sie kuenstlich verdicken. */
.stil-v3 h1,
.stil-v3 h2{font-family:var(--schrift-serif); font-weight:400; letter-spacing:-.012em; line-height:1.02}
.stil-v3 h2{font-size:clamp(32px,4.6vw,52px)}
.stil-v3 h3,.stil-v3 h4{font-weight:650; letter-spacing:-.01em}
.stil-v3 .seitenkopf h1{font-size:clamp(44px,6.4vw,84px); max-width:14ch; letter-spacing:-.018em; line-height:.98}
.stil-v3 .stimmen-wert b,
.stil-v3 .banderole-worte p{font-family:var(--schrift-serif); font-weight:400; letter-spacing:-.01em}
.stil-v3 .banderole-worte p{font-size:clamp(28px,3.4vw,42px); line-height:1.1}
/* Grosse Zahlen in der Serife, kleine Werte bleiben in der Textschrift */
.stil-v3 .belegung-klappe summary strong{font-family:var(--schrift-serif); font-weight:400; font-size:clamp(26px,3vw,34px)}

/* ---------- Breitbild auf der Startseite ---------- */
.stil-v3 .buehne-breit{
  position:relative; overflow:clip; padding:0; background:var(--tiefe);
  height:clamp(520px, 43vw, 82vh);          /* 21:9 am Desktop, nie hoeher als der Schirm */
  display:flex; flex-direction:column; justify-content:flex-end;
}
.stil-v3 .breit-bilder{position:absolute; inset:0; z-index:0; touch-action:pan-y; cursor:grab}
.stil-v3 .breit-bilder:active{cursor:grabbing}
.stil-v3 .breit-motiv{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--kurve)}
.stil-v3 .breit-motiv.an{opacity:1}
.stil-v3 .breit-motiv figure,.stil-v3 .breit-motiv picture{display:block; height:100%; margin:0}
.stil-v3 .breit-motiv img{width:100%; height:100%; object-fit:cover; object-position:50% 60%;
  -webkit-user-drag:none; user-select:none}
/* Langsames Heranfahren auf dem aktiven Bild */
.stil-v3 .breit-motiv.an img{animation:v3-heran 9s linear both}
@keyframes v3-heran{from{transform:scale(1.06)} to{transform:scale(1)}}
.stil-v3 .breit-schleier{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,13,.38) 0%, rgba(20,17,13,0) 28%),
    linear-gradient(0deg, rgba(20,17,13,.78) 0%, rgba(20,17,13,.30) 42%, rgba(20,17,13,0) 70%);
}
.stil-v3 .breit-worte{position:relative; z-index:2; color:#fff; padding-bottom:var(--s5)}
.stil-v3 .breit-zeile{font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.86); margin:0 0 var(--s3)}
.stil-v3 .buehne-breit h1{
  color:#fff; max-width:15ch; font-size:clamp(46px,7.4vw,104px); line-height:.96; letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.stil-v3 .buehne-breit h1 .sonne{color:var(--sonne); font-style:italic}
.stil-v3 .buehne-breit .buehne-unter{color:rgba(255,255,255,.88); max-width:46ch; margin-top:var(--s4)}
.stil-v3 .buehne-breit .buehne-steuer{position:relative; z-index:2; margin-block:0; padding-bottom:calc(var(--s7) + 34px)}
.stil-v3 .buehne-breit .buehne-titel{color:rgba(255,255,255,.8)}
.stil-v3 .buehne-breit .buehne-punkte button{background:rgba(255,255,255,.35)}
.stil-v3 .buehne-breit .buehne-pause{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){ .stil-v3 .buehne-breit .buehne-pause:hover{background:rgba(255,255,255,.12)} }

/* Suche liegt halb auf dem Bild, wie in der Vorlage */
.stil-v3 .breit-suche{position:relative; z-index:5; margin-top:calc(var(--s7) * -1 - 10px); padding-bottom:0}
.stil-v3 .breit-suche .suche{border:0; box-shadow:0 2px 4px -2px rgba(34,31,26,.14), 0 30px 60px -36px rgba(34,31,26,.75)}
.stil-v3 .breit-wegweiser{margin:var(--s6) 0 var(--s4)}

@media (max-width:899px){
  .stil-v3 .buehne-breit{height:min(78svh,640px); min-height:480px}
  .stil-v3 .breit-motiv img{object-position:50% 50%}
  .stil-v3 .buehne-breit .buehne-steuer{padding-bottom:calc(var(--s6) + 30px)}
  .stil-v3 .breit-suche{margin-top:calc(var(--s6) * -1)}
}

/* ---------- Breiter Seitenkopf auf den Unterseiten ---------- */
.stil-v3 .seitenkopf{padding:0; position:relative; overflow-x:clip}
.stil-v3 .seitenkopf-raster{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  min-height:clamp(440px, 38vw, 72vh); padding-block:var(--s7) var(--s6); color:#fff;
}
.stil-v3 .seitenkopf-raster > div:first-child{position:relative; z-index:2}
.stil-v3 .seitenkopf-bilder{
  position:absolute; z-index:0; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  min-height:0; aspect-ratio:auto; margin:0;
}
.stil-v3 .seitenkopf-bilder .seitenkopf-bild-gross{position:absolute; inset:0; width:100%; height:100%; border-radius:0; box-shadow:none}
.stil-v3 .seitenkopf-bilder::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,17,13,.8) 0%, rgba(20,17,13,.32) 48%, rgba(20,17,13,.05) 78%);
}
.stil-v3 .seitenkopf h1{color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.25)}
.stil-v3 .seitenkopf .vorspann{color:rgba(255,255,255,.9)}
.stil-v3 .seitenkopf .pfad,.stil-v3 .seitenkopf .pfad a{color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.4)}
.stil-v3 .seitenkopf-fuss{margin-top:var(--s5)}

@media (prefers-reduced-motion:reduce){
  .stil-v3 .breit-motiv{transition:none}
  .stil-v3 .breit-motiv.an img{animation:none}
}

/* ---------- Ruhiger Kopf am Handy/Tablet (Robert 17.10.: "total ueberladen") ----------
   Menue und Konto ohne Rahmen, feinere Symbole; der Frei-Knopf nicht mehr orange
   gefuellt, nur noch duenner Rand mit oranger Lupe. Desktop bleibt wie er ist. */
@media (max-width:1079px){
  .stil-v3 .kopf-inner{min-height:68px; gap:2px}
  .stil-v3 .marke img{width:52px; height:54px}
  .stil-v3 .menue-knopf,
  .stil-v3 .kopf-konto{width:44px; height:44px; border:0; background:transparent; color:#4a453d}
  .stil-v3 .menue-knopf svg,
  .stil-v3 .kopf-konto svg{width:17px; height:17px}
  .stil-v3 .kopf-konto svg{width:15px; height:15px}
  .stil-v3 .kopf-aktion{
    min-height:38px; padding:0 13px; gap:7px; font-size:14px; font-weight:600;
    background:transparent; color:var(--tinte); border:1px solid var(--linie);
  }
  .stil-v3 .kopf-aktion svg{color:var(--sonne-tief); width:.95em; height:.95em}
  .stil-v3 .kopf-aktion:active{background:var(--papier)}
}
@media (max-width:1079px) and (hover:hover) and (pointer:fine){
  .stil-v3 .kopf-aktion:hover{background:var(--papier); border-color:var(--sand)}
}
/* Die Schublade hat ihren eigenen Schliessen-Knopf, der bleibt unveraendert gross genug */
.stil-v3 .schublade-kopf .menue-knopf{color:var(--tinte)}