/* ===========================================================================
   AUSSEHEN DER SEITE - fuer beide Sprachfassungen dieselbe Datei
   ---------------------------------------------------------------------------
   Frueher stand das hier direkt in index.html. Seit der italienischen Fassung
   (27.08.2026) gibt es zwei HTML-Dateien - zwei Kopien dieser 200 Zeilen
   waeren bei der naechsten Farbaenderung auseinandergelaufen.

   NEBENEFFEKT, DER UNS HILFT: Adressen in url() zaehlen ab DIESER Datei, nicht
   ab der HTML-Datei. Schriften und das Winterfoto findet deshalb auch
   it/index.html, obwohl es einen Ordner tiefer liegt.

   HIER STEHEN KEINE PREISE UND KEINE TEXTE.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   Hausschrift Urby. Liegt lokal - die Seite laedt nichts von fremden Servern,
   deshalb braucht sie kein Cookie-Banner.
   --------------------------------------------------------------------------- */
@font-face { font-family:'Urby'; src:url('assets/fonts/urby-thin.ttf');    font-weight:100; font-display:swap; }
@font-face { font-family:'Urby'; src:url('assets/fonts/urby-light.ttf');   font-weight:300; font-display:swap; }
@font-face { font-family:'Urby'; src:url('assets/fonts/urby-regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Urby'; src:url('assets/fonts/urby-bold.ttf');    font-weight:700; font-display:swap; }
@font-face { font-family:'Urby'; src:url('assets/fonts/urby-black.ttf');   font-weight:900; font-display:swap; }

:root{
  --dunkel:#3A2E26;
  --gold:#9C7B4A;
  --creme:#F6F2EA;
  --karte:#FBF9F5;
  --grau:#6E625A;
  --linie:#D8CEC0;
  --weiss:#fff;
  --warnung:#8C4A3A;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Urby','Segoe UI',-apple-system,Helvetica,Arial,sans-serif;
  font-weight:300;
  background:var(--creme);
  color:var(--dunkel);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:76px; /* Platz fuer die Leiste unten */
}
.wrap{max-width:640px;margin:0 auto;padding:0 22px}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:76vh;display:flex;align-items:flex-end;
  background:
    linear-gradient(180deg,rgba(30,22,16,.20) 0%,rgba(30,22,16,.86) 100%),
    radial-gradient(120% 90% at 50% 0%, #5a4636 0%, #2a211a 70%);
  background-size:cover;background-position:center;
  color:var(--weiss);text-align:center;
}
/* Sobald das Winterfoto in assets liegt, legt es sich darueber. */
.hero.mit-bild{
  background:
    linear-gradient(180deg,rgba(30,22,16,.20) 0%,rgba(30,22,16,.86) 100%),
    url('assets/schloss-winter.jpg') center/cover no-repeat, #2a211a;
}
.hero-inner{width:100%;padding:0 22px 52px}

/* ---------- Sprachumschalter ----------
   Oben rechts im Kopfbereich, auf beiden Fassungen an derselben Stelle.
   Dezent in der Hausfarbe, keine Flaggen (Vorgabe Hias, 27.08.2026) - eine
   Flagge steht fuer ein Land, nicht fuer eine Sprache, und Suedtirol waere
   damit ohnehin falsch beschrieben.
   Die Flaechen sind bewusst grosszuegig gepolstert: auf dem Handy sitzt der
   Umschalter im Daumenbereich und muss ohne Zielen zu treffen sein. */
.sprachwahl{
  position:absolute;top:14px;right:14px;z-index:6;display:flex;gap:4px;align-items:center;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;
}
.sprachwahl a,.sprachwahl span{
  display:block;padding:9px 12px;border-radius:8px;line-height:1;text-decoration:none;
  border:1px solid transparent;
}
.sprachwahl .aktiv{
  color:var(--gold);border-color:rgba(156,123,74,.75);background:rgba(156,123,74,.20);
}
.sprachwahl a{color:rgba(255,255,255,.78)}
.sprachwahl a:hover,.sprachwahl a:focus{color:#fff;border-color:rgba(255,255,255,.36)}
.logo{
  height:44px;margin:0 auto 26px;display:block;opacity:.95;
  filter:brightness(0) invert(1); /* macht das dunkle Logo weiss */
}
.hero h1{font-family:'Urby';font-weight:700;font-size:2.2rem;line-height:1.16;letter-spacing:-.4px;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.hero p{font-size:1rem;opacity:.9;max-width:410px;margin:0 auto}
.scrollhint{margin-top:28px;font-size:.72rem;letter-spacing:.18em;opacity:.72;text-transform:uppercase}

/* ---------- Grundbausteine ---------- */
section{padding:48px 0}
.kicker{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px;text-align:center}
h2{font-family:'Urby';font-weight:700;font-size:1.5rem;text-align:center;margin-bottom:6px;letter-spacing:-.2px}
.untertitel{text-align:center;color:var(--grau);font-size:.94rem;margin-bottom:28px}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:20px;margin-bottom:16px}
.feld{margin-bottom:22px}
.feld:last-child{margin-bottom:0}
.feld > label,.feldtitel{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);font-weight:700;margin-bottom:10px}
.beschreibung{font-size:.87rem;color:var(--grau);line-height:1.5;margin:-4px 0 11px}

/* Zweiwege-Umschalter (Haus, Ja/Nein) */
.schalter{display:flex;gap:8px}
.schalter button{
  flex:1;padding:13px 10px;border:1px solid var(--linie);background:var(--weiss);
  color:var(--dunkel);border-radius:10px;font-family:inherit;font-size:.95rem;
  font-weight:300;cursor:pointer;transition:all .15s;line-height:1.3;
}
.schalter button small{display:block;font-size:.72rem;color:var(--grau);margin-top:3px}
.schalter button[aria-pressed="true"]{background:var(--dunkel);color:var(--weiss);border-color:var(--dunkel);font-weight:400}
.schalter button[aria-pressed="true"] small{color:rgba(255,255,255,.72)}

/* Zaehler */
.zaehler{display:flex;align-items:center;gap:12px}
.zaehler button{
  width:42px;height:42px;flex:0 0 42px;border:1px solid var(--linie);background:var(--weiss);
  border-radius:10px;font-size:1.3rem;color:var(--dunkel);cursor:pointer;font-family:inherit;line-height:1;
}
.zaehler button:disabled{opacity:.32;cursor:default}
.zaehler input{
  flex:1;min-width:0;text-align:center;font-family:inherit;font-size:1.15rem;font-weight:400;
  padding:11px 6px;border:1px solid var(--linie);border-radius:10px;background:var(--weiss);color:var(--dunkel);
}
.zaehler .wert{flex:1;text-align:center;font-size:1.05rem;font-weight:400}

.zeile{display:flex;gap:10px}
.zeile > div{flex:1;min-width:0}
select,input[type="text"],input[type="email"],input[type="tel"],input[type="date"],textarea{
  width:100%;padding:12px;border:1px solid var(--linie);border-radius:10px;background:var(--weiss);
  font-family:inherit;font-size:.98rem;font-weight:300;color:var(--dunkel);
}
textarea{resize:vertical;min-height:92px}

.hinweis{
  margin-top:12px;padding:12px 14px;border-radius:10px;font-size:.87rem;line-height:1.5;
  background:#F2EADF;border-left:3px solid var(--gold);color:#5A4A3A;
}
.hinweis.warnung{background:#F6E7E3;border-left-color:var(--warnung);color:#6E3A2E}
.hinweis strong{font-weight:700}

/* ---------- Aufstellung: erst was drin ist ----------
   Bewusst helle Karte und offen sichtbar. Der Gast soll sehen, was er bekommt,
   bevor er sieht, was es kostet - deshalb steht sie VOR der Summe.          */
.aufstellung{padding:20px}
.aufstellung .zusatz{font-size:.86rem;color:var(--grau);margin:-4px 0 14px}
.posten{text-align:left;font-size:.92rem}
.posten .p{display:flex;justify-content:space-between;gap:12px;padding:7px 0}
.posten .p .bez{color:var(--dunkel)}
.posten .p .bez small{display:block;font-size:.79rem;color:var(--grau);margin-top:3px;line-height:1.42}
.posten .p .btr{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--dunkel)}
.posten .gruppe{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:18px 0 6px;padding-top:14px;border-top:1px solid var(--linie);
}
.posten .gruppe:first-child{margin-top:0;padding-top:0;border-top:none}
.posten .p.summe{
  border-top:1px solid var(--linie);margin-top:8px;padding-top:11px;font-weight:400;
}
.infobtn{
  border:none;background:var(--linie);color:var(--dunkel);width:17px;height:17px;
  border-radius:50%;font-size:.66rem;cursor:pointer;font-family:inherit;margin-left:6px;
  line-height:17px;padding:0;vertical-align:middle;
}
.infotext{display:none;font-size:.82rem;color:var(--grau);padding:2px 0 9px;line-height:1.45}
.infotext.offen{display:block}

/* ---------- Summe: erst danach der Preis ---------- */
.ergebnis{background:var(--dunkel);color:var(--weiss);border-radius:14px;padding:22px 20px}
.summen{display:flex;gap:8px;align-items:stretch;text-align:center}
.summen > div{flex:1;padding:4px 2px}
.summen .k{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;opacity:.56;line-height:1.35}
.summen .v{font-size:1.04rem;font-weight:400;margin-top:5px;font-variant-numeric:tabular-nums}
.summen .prokopf{
  background:rgba(156,123,74,.22);border:1px solid rgba(156,123,74,.55);
  border-radius:10px;padding:8px 4px;
}
.summen .prokopf .k{opacity:.9;color:var(--gold);font-weight:700}
.summen .prokopf .v{font-family:'Urby';font-weight:700;font-size:1.5rem;letter-spacing:-.5px;margin-top:3px}
.mwstzeile{
  text-align:center;font-size:.76rem;opacity:.56;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.14);
}
.richtwert{margin-top:12px;font-size:.78rem;opacity:.6;line-height:1.5;text-align:center}

/* ---------- Formular ---------- */
.formularkarte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:22px}
.pflicht{color:var(--gold)}
.knopf{
  display:block;width:100%;padding:15px;border:none;border-radius:10px;background:var(--gold);
  color:var(--weiss);font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.04em;cursor:pointer;
}
.knopf:disabled{opacity:.55;cursor:default}
.knopf.sekundaer{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.zusammenfassung{
  background:#F2EADF;border-radius:10px;padding:14px;font-size:.86rem;line-height:1.55;
  margin-bottom:18px;color:#5A4A3A;
}
.zusammenfassung .t{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:6px;color:var(--gold)}
.datenschutzzeile{font-size:.78rem;color:var(--grau);margin:14px 0 16px;line-height:1.5}
.datenschutzzeile a{color:var(--gold)}
.danke{display:none;text-align:center;padding:22px 6px}
.danke h3{font-family:'Urby';font-weight:700;font-size:1.3rem;margin-bottom:8px}
.danke p{color:var(--grau);font-size:.94rem}

/* ---------- Leiste unten ---------- */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(58,46,38,.97);
  padding:11px 16px;box-shadow:0 -6px 22px rgba(0,0,0,.16);
}
.leiste a{
  display:block;max-width:600px;margin:0 auto;text-align:center;
  background:var(--gold);color:var(--weiss);text-decoration:none;padding:13px 17px;
  border-radius:9px;font-size:.92rem;font-weight:700;letter-spacing:.03em;
}

/* ---------- Fuss ---------- */
footer{background:var(--dunkel);color:rgba(255,255,255,.62);padding:34px 0 40px;font-size:.82rem;text-align:center;line-height:1.7}
footer a{color:rgba(255,255,255,.82)}
footer .trenn{opacity:.34;margin:0 8px}
footer .adr{margin-bottom:12px;color:rgba(255,255,255,.82)}

@media (min-width:620px){
  .hero h1{font-size:2.7rem}
  .kopfpreis{font-size:3.6rem}
  .wrap{padding:0 30px}
}