/* Gestaltung Privatzimmer im Alstertal, Layout von Entwurf 2 (Entscheidung
   des Users am 04.11.2026, vorher 1:1-Nachbau der WordPress-Seite, siehe Git-
   Historie). Farben und Schriften des Kunden bleiben (Weinrot, Roboto), neu
   sind Weissraum, runde Ecken, weiche Schatten und die Anordnung. Keine
   Gestaltung im HTML, die Sicherheits-Header blockieren style="..." und <style>. */

/* Schriften lokal, variable Schriften decken alle Staerken ab. Pfad relativ,
   damit er auch im Vorschau-Unterordner stimmt (CSS-url wird beim Bau nicht
   umgeschrieben). */
@font-face{font-family:"Roboto";src:url("../fonts/roboto.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Titelschrift der alten Seite (Roboto Condensed Light). Fehlte in der ersten
   Fassung von Entwurf 2, die Ueberschriften wirkten wie eine Textvorlage
   (Rueckmeldung 12.10.2026) */
@font-face{font-family:"Roboto Condensed";src:url("../fonts/roboto-condensed.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --text:#000;
  --text-leise:#555;
  --grund:#fff;
  --flaeche:#f6f5f2;
  --linie:#e6e3de;
  --akzent:#964c5d;
  --akzent-dunkel:#7d3d4c;
  --fehler:#b3261e;
  --fehler-flaeche:#fbeceb;
  --rund:14px;
  --rund-klein:10px;
  --schatten:0 6px 24px rgba(0,0,0,.08);
  --schrift:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --schrift-titel:"Roboto Condensed","Arial Narrow",var(--schrift);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
/* Spalte ueber die volle Hoehe: auf kurzen Seiten (Danke, 404) sitzt der
   Fussbereich sonst mitten im Fenster */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--schrift);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--grund);-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
img,svg,picture{max-width:100%;height:auto;display:block}
/* Ueberschriften wie auf der alten Seite: Roboto Condensed Light in Weinrot */
h1,h2,h3{font-family:var(--schrift-titel);font-weight:300;line-height:1.35;margin:0 0 .55em;color:var(--akzent);overflow-wrap:break-word}
/* Groessen wie auf der alten Seite gemessen (12.10.2026): h1 32px, h2 28px,
   h3 24px, Fliesstext 17px/1.6 */
h1{font-size:2rem}
h2{font-size:1.75rem}
h3{font-size:1.5rem}
p{margin:0 0 1em}
a{color:var(--akzent)}
/* :where() gibt der Grundregel die Gewichtung null, sonst schlaegt sie die
   Abstaende einzelner Listen (Fotostreifen, Menue) */
:where(ul[role="list"]){list-style:none;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--text);color:#fff;padding:.7rem 1rem}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.e2-icon{width:1.4em;height:1.4em;flex:none}
.e2-leise{color:var(--text-leise)}
.telefon{color:inherit;text-decoration:none}
.telefon:hover{text-decoration:underline}
/* Einleitung: groesser und leichter als der Fliesstext */
.e2-gross{max-width:38em;margin-bottom:1.6rem}
/* Kleine Zeile ueber dem Titel: Versalien mit Sperrung */
.e2-dachzeile{font-family:var(--schrift-titel);font-weight:400;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin:0 0 .5rem}
.e2-rahmen{max-width:72rem;margin-inline:auto;padding-inline:1.5rem}

/* Knoepfe */
.e2-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--akzent);color:#fff;border:1px solid var(--akzent);border-radius:var(--rund-klein);padding:.8rem 1.5rem;font-family:var(--schrift);font-size:1rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s}
.e2-knopf:hover{background:var(--akzent-dunkel);color:#fff}
.e2-knopf--klein{padding:.55rem 1rem;font-size:.95rem}
.e2-knopf--breit{width:100%}
.e2-knopf--rand{background:#fff;color:var(--text);border-color:var(--text)}
.e2-knopf--rand:hover{background:var(--flaeche);color:var(--text)}

/* Kopf: schmal, bleibt oben stehen */
/* Deckend weiss: halb durchsichtig schien beim Scrollen Text durch das Menue */
/* z-index ueber der Anfrage-Leiste (60): das Handy-Menue liegt im Kopf und
   muss die Leiste verdecken */
.e2-kopf{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--linie)}
.e2-kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.5rem}
.e2-kopf__logo img{width:120px}
.e2-kopf__nav ul{display:flex;gap:1.75rem}
.e2-kopf__nav a{font-family:var(--schrift);font-size:1.0625rem;color:var(--text);text-decoration:none}
.e2-kopf__nav a:hover{color:var(--akzent)}
/* Aktuelle Seite: Weinrot mit Unterstrich, nicht nur ueber die Farbe erkennbar */
.e2-kopf__nav a[aria-current="page"]{color:var(--akzent);text-decoration:underline;text-underline-offset:.35em}
.e2-kopf__aktionen{display:flex;align-items:center;gap:.75rem}

/* Handy-Menue: Knopf und Vollbild-Liste, Verhalten in main.js */
.nav-toggle{display:none;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--linie);border-radius:var(--rund-klein);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle__icon,.nav-toggle__icon::before,.nav-toggle__icon::after{content:"";display:block;position:relative;width:1.25rem;height:2px;background:var(--akzent)}
.nav-toggle__icon::before{position:absolute;top:-6px}
.nav-toggle__icon::after{position:absolute;top:6px}
.mobile-nav{position:fixed;inset:0;z-index:500;background:#fff;padding:4.5rem 1.5rem 2rem}
.mobile-nav[hidden]{display:none}
.mobile-nav__close{position:absolute;top:.75rem;right:1rem;background:none;border:0;font-size:2.25rem;line-height:1;cursor:pointer;color:var(--text)}
.mobile-nav a{display:block;padding:.8rem 0;border-bottom:1px solid var(--linie);color:var(--text);font-family:var(--schrift-titel);font-size:1.4rem;text-decoration:none}
.mobile-nav a[aria-current="page"]{color:var(--akzent)}

/* Titel: steht unter dem Hausbild, ruhig und mit Luft */
.e2-fotos{margin-top:1.5rem}
.e2-titel{padding-top:2.75rem;padding-bottom:.5rem}
.e2-titel h1{margin-bottom:.6rem}
.e2-titel__ort{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;color:var(--text-leise);font-size:1rem;margin:0}
.e2-titel__ort .e2-icon{color:var(--akzent);width:1.15em;height:1.15em}

/* Fotoraster Startseite: oben breit das Hausbild der alten Startseite
   (Wunsch des Kunden), darunter eine Reihe Zimmerfotos */
.e2-fotos{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:26rem 11rem;gap:8px;border-radius:var(--rund);overflow:hidden}
.e2-fotos__link{position:relative;display:block;overflow:hidden;background:var(--flaeche)}
.e2-fotos__link:first-child{grid-column:1 / -1}
.e2-fotos__link picture,.e2-fotos__link img{width:100%;height:100%}
.e2-fotos__link img{object-fit:cover;transition:filter .2s}
.e2-fotos__link:hover img{filter:brightness(.88)}
.e2-fotos__link--weitere{display:none}
.e2-fotos__alle{position:absolute;right:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--text);border:1px solid var(--text);border-radius:var(--rund-klein);padding:.5rem .95rem;font-family:var(--schrift-titel);font-size:1rem;letter-spacing:.02em;cursor:pointer}
.e2-fotos__alle .e2-icon{width:1.1em;height:1.1em}

/* Kopfbild der Unterseiten (Umgebung, Kontakt): breit und rund wie das
   Hausbild der Startseite */
.e2-kopfbild{margin-top:1.5rem;border-radius:var(--rund);overflow:hidden;height:22rem;background:var(--flaeche)}
.e2-kopfbild picture,.e2-kopfbild img{width:100%;height:100%}
.e2-kopfbild img{object-fit:cover}

/* Zwei Spalten: Inhalt und mitlaufender Kasten */
.e2-spalten{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:4rem;padding-block:2.5rem 4rem}
/* Seiten ohne Kasten (Rechtstexte): eine Spalte in Lesebreite */
.e2-spalten--einzeln{grid-template-columns:minmax(0,48rem)}
.e2-abschnitt{padding-block:2rem;border-bottom:1px solid var(--linie)}
.e2-abschnitt:first-child{padding-top:0}
.e2-abschnitt:last-child{border-bottom:0}
.e2-abschnitt > :last-child{margin-bottom:0}

.e2-gastgeber{display:flex;align-items:center;gap:1rem;background:var(--flaeche);border-radius:var(--rund);padding:1rem 1.25rem}
.e2-gastgeber p{margin:0}
.e2-gastgeber__kreis{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--akzent);color:#fff;font-family:var(--schrift-titel);font-size:1.1rem;letter-spacing:.05em;flex:none}

.e2-merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2rem;margin-bottom:2rem}
.e2-merkmale li{display:flex;align-items:center;gap:.8rem}
.e2-merkmale .e2-icon{color:var(--akzent)}

/* Zimmerkarten */
.e2-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:1.5rem 0}
.e2-karte{border:1px solid var(--linie);border-radius:var(--rund);overflow:hidden;background:#fff;box-shadow:var(--schatten)}
.e2-karte__bild,.e2-karte__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.e2-karte__text{padding:1rem 1.1rem 1.2rem}
.e2-karte h3{font-size:1.375rem;margin-bottom:.35rem}
.e2-preis{margin:0;line-height:1.5}
.e2-preis strong{font-family:var(--schrift-titel);font-weight:400;font-size:1.125rem;color:var(--akzent)}
.e2-haken{margin-bottom:1rem}
.e2-haken li{display:flex;gap:.6rem;margin-bottom:.5rem}
.e2-haken .e2-icon{color:var(--akzent);margin-top:.15rem}

/* Lage und Anfahrt */
.e2-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:2rem}
.e2-wege li{display:flex;gap:.8rem;align-items:flex-start;background:var(--flaeche);border-radius:var(--rund);padding:1rem;line-height:1.4}
.e2-wege .e2-icon{color:var(--akzent);width:1.8rem;height:1.8rem}
/* Wegeboxen: Kennzahl in der Titelschrift */
.e2-wege strong{font-family:var(--schrift-titel);font-weight:400;font-size:1.0625rem}
/* Anfahrt: laengere Texte, deshalb untereinander statt nebeneinander */
.e2-wege--untereinander{grid-template-columns:1fr}
.e2-wege--untereinander li{padding:1.25rem 1.5rem;line-height:1.6}
.e2-wege--untereinander strong{font-size:1.25rem}
.e2-streifen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:2rem 0 2.5rem}
.e2-streifen a{position:relative;display:block;border-radius:var(--rund-klein);overflow:hidden;aspect-ratio:1}
.e2-streifen picture,.e2-streifen img{width:100%;height:100%}
.e2-streifen img{object-fit:cover;transition:filter .2s}
.e2-streifen a:hover img{filter:brightness(.88)}
/* Grosse Galerien auf Unterseiten: vier Spalten, groessere Vorschaubilder */
.e2-streifen--gross{grid-template-columns:repeat(4,minmax(0,1fr))}
.e2-anfahrt{background:var(--flaeche);border-radius:var(--rund);padding:1.25rem 1.5rem}
.e2-anfahrt p:last-child{margin:0}

/* Gut zu wissen, Kontaktdaten */
.e2-liste{margin:0 0 1rem}
.e2-liste div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-top:1px solid var(--linie)}
.e2-liste div:first-child{border-top:0}
.e2-liste dt{font-family:var(--schrift-titel);font-size:1.0625rem;color:var(--akzent)}
.e2-liste dd{margin:0}

/* Mitlaufender Kasten rechts: Anfrage (alle Seiten) oder Lage (Kontakt) */
.e2-buchung__kasten{position:sticky;top:6.5rem;border:1px solid var(--linie);border-radius:var(--rund);padding:1.5rem;box-shadow:var(--schatten);background:#fff}
.e2-buchung__preis{font-size:1.1rem;margin-bottom:.4rem}
.e2-buchung__preis strong{font-family:var(--schrift-titel);font-weight:300;font-size:1.75rem;color:var(--akzent)}
.e2-buchung__tel{text-align:center;font-size:.95rem;margin:.8rem 0 1rem}
.e2-buchung__inkl{border-top:1px solid var(--linie);padding-top:1rem;font-size:.95rem}
.e2-buchung__inkl li{display:flex;gap:.5rem;margin-bottom:.3rem}
.e2-buchung__inkl .e2-icon{color:var(--akzent);width:1.2em;height:1.2em;margin-top:.2rem}
.e2-buchung__titel{font-size:1.5rem;margin-bottom:.8rem}
.e2-buchung__symbol{width:2.25rem;height:2.25rem;color:var(--akzent);margin-bottom:.8rem}
.e2-buchung__hinweis{font-size:.85rem;color:var(--text-leise);margin:.6rem 0 0}

/* Formular (gleiches Bauteil wie im Nachbau) */
.form{display:grid;gap:1rem;margin-top:1rem;max-width:40rem}
.form__pflicht{margin:0;font-size:.95rem}
.form__stern{color:var(--fehler)}
.form__feld{display:grid;gap:.3rem}
.form__feld label{font-weight:500;font-size:.95rem}
.form input[type="text"],.form input[type="email"],.form textarea{width:100%;font:inherit;color:var(--text);background:#fff;border:1px solid #b9b4ad;border-radius:var(--rund-klein);padding:.75rem .9rem}
.form input:focus,.form textarea:focus{border-color:var(--akzent)}
.form__feld--checkbox{grid-template-columns:auto 1fr;align-items:start;gap:.6rem}
.form__feld--checkbox input{width:1.15rem;height:1.15rem;margin-top:.25rem}
.form .btn{justify-self:start;background:var(--akzent);color:#fff;border:0;border-radius:var(--rund-klein);padding:.8rem 1.6rem;font:inherit;font-weight:600;cursor:pointer}
.form .btn:hover{background:var(--akzent-dunkel)}
.form .btn[disabled]{opacity:.6;cursor:not-allowed}
.form__vorschau{margin:0;font-size:.85rem;color:var(--text-leise)}
/* Honigtopf: aus dem Bild geschoben statt display:none, manche Bots
   ueberspringen versteckte Felder */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-hinweis{background:var(--fehler-flaeche);border:1px solid var(--fehler);color:var(--fehler);border-radius:var(--rund-klein);padding:.8rem 1rem;font-weight:600}

/* Rechtstexte: lange Woerter und Adressen umbrechen */
.e2-rechtstext{overflow-wrap:break-word}
.e2-rechtstext h2{font-size:1.6rem;margin-top:1.6em}
.e2-rechtstext h3{font-size:1.3rem;margin-top:1.3em}

/* Danke-Seite und Fehlerseite: ein ruhiger Kasten */
.e2-kasten{max-width:44rem;margin:3rem auto 4rem;border:1px solid var(--linie);border-radius:var(--rund);padding:2.5rem;box-shadow:var(--schatten);background:#fff}
.e2-kasten .e2-gross{font-size:1.15rem;color:var(--text-leise)}
.e2-aktionen{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.e2-linkliste{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:2rem}

/* Fuss */
.e2-fuss{background:var(--flaeche);border-top:1px solid var(--linie);padding-block:2rem;font-size:.95rem}
.e2-fuss__innen{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.e2-fuss p{margin:0}
.e2-fuss ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.e2-fuss a{color:var(--text)}
/* Nummer nicht an den Bindestrichen umbrechen (Handy) */
.e2-nummer{white-space:nowrap}

/* Grossansicht fuer alle Galerien */
.bildansicht{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:3.5rem 4rem;border:0;background:rgba(10,10,10,.94);color:#fff}
.bildansicht::backdrop{background:rgba(0,0,0,.6)}
.bildansicht[open]{display:flex;align-items:center;justify-content:center}
.bildansicht__figur{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-height:100%}
.bildansicht__bild{max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;border-radius:var(--rund-klein)}
.bildansicht__text{font-size:.95rem;text-align:center}
.bildansicht__knopf{position:absolute;background:none;border:0;color:#fff;font-size:2.8rem;line-height:1;cursor:pointer;padding:.3rem .8rem}
.bildansicht__knopf--zu{top:.5rem;right:.8rem}
.bildansicht__knopf--zurueck{left:.5rem;top:50%;transform:translateY(-50%)}
.bildansicht__knopf--weiter{right:.5rem;top:50%;transform:translateY(-50%)}

/* Tablet und Handy */
@media (max-width:1000px){
  .e2-spalten{grid-template-columns:1fr;gap:0}
  /* Anfrage-Kasten wird zur Leiste unten am Bildschirmrand */
  .e2-buchung{position:fixed;left:0;right:0;bottom:0;z-index:60}
  .e2-buchung__kasten{position:static;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem 1rem;border-radius:0;border-width:1px 0 0;padding:.7rem 1rem;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .e2-buchung__preis{margin:0}
  .e2-buchung__preis strong{font-size:1.25rem}
  .e2-buchung .e2-knopf{grid-column:2;grid-row:1 / span 2;width:auto}
  .e2-buchung__tel,.e2-buchung__inkl{display:none}
  /* Lage-Kasten (Kontakt) bleibt im Seitenfluss unter dem Inhalt */
  .e2-buchung--lage{position:static}
  .e2-buchung--lage .e2-buchung__kasten{display:block;border-radius:var(--rund);border-width:1px;padding:1.5rem;box-shadow:var(--schatten)}
  /* Platz fuer die Leiste, nur auf Seiten, die sie haben */
  body:has(.e2-buchung:not(.e2-buchung--lage)) .e2-fuss{padding-bottom:6.5rem}
  .e2-karten{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .e2-rahmen{padding-inline:1rem}
  .e2-kopf__nav{display:none}
  /* Anfrage-Knopf steckt auf dem Handy in der Leiste unten */
  .e2-kopf__aktionen .e2-knopf{display:none}
  .nav-toggle{display:inline-flex}
  /* Ortszeile: Trennpunkt hing sonst allein am Zeilenende */
  .e2-titel__trenner{display:none}
  .e2-titel__bahn{flex-basis:100%;padding-left:1.6rem}
  .e2-titel{padding-top:2rem}
  h1{font-size:1.75rem}
  .e2-fotos{grid-template-columns:1fr 1fr;grid-template-rows:15rem 8rem}
  .e2-fotos__link:first-child{grid-column:1 / -1}
  .e2-fotos__link:nth-child(4),.e2-fotos__link:nth-child(5){display:none}
  .e2-kopfbild{height:13rem}
  .e2-merkmale,.e2-karten,.e2-wege{grid-template-columns:1fr}
  .e2-streifen,.e2-streifen--gross{grid-template-columns:repeat(3,minmax(0,1fr))}
  .e2-liste div{grid-template-columns:1fr;gap:.2rem}
  .e2-kasten{padding:1.5rem;margin-top:2rem}
  .bildansicht{padding:3rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Danke-Seite (Standard: Foto, Dank, Karten zum Weiterlesen) */
.e2-danke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.5rem;align-items:center;margin:3rem 0 2.5rem}
.e2-danke__bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rund);box-shadow:var(--schatten)}
.e2-danke .e2-gross{margin-bottom:0}
.e2-karten--danke .e2-karte__text{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.e2-danke__zurueck{margin:2rem 0 4rem}

/* Sitemap-Seite und gestaltete sitemap.xml */
.e2-seitenliste{list-style:none;padding:0;margin:1.5rem 0;border-top:1px solid var(--linie)}
.e2-seitenliste li{border-bottom:1px solid var(--linie);padding:.7rem 0;overflow-wrap:anywhere}

@media (max-width:760px){
  .e2-danke{grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
}