/* ==========================================================================
   Hotel Walfisch – Master-Stylesheet (1:1-Nachbau des Dev-Servers)
   Quelle der Werte: Astra-Theme + Elementor-Seiten-CSS auf dev.walfisch.wela.digital
   Breakpoints wie im Bestand: 1024 (Elementor Tablet), 921 (Astra-Kopf mobil),
                               767 (Elementor Mobil), 544 (Astra Schriftgröße mobil)
   ========================================================================== */

/* ---------- Schriften (lokal, identisch zum Bestand) ---------- */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/barlow-condensed-300.woff2") format("woff2"); 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: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed-400.woff2") format("woff2"); 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: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-500.woff2") format("woff2"); 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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); 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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); 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: "Barlow Condensed"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/barlow-condensed-300-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); }

/* ---------- Tokens (Werte aus dem Bestand) ---------- */
:root {
  --pfirsich: #FFDCB6;          /* Seitenhintergrund */
  --fuss-oben: #F6C89B;         /* Footer oben */
  --fuss-unten: #E4B483;        /* Footer Copyright-Leiste */
  --text: #4B4F58;              /* Astra Grundtext */
  --text-hotel: #4B4B4B;        /* Text Hotel-Sektion */
  --text-lage: #282828;         /* Text Lage/Team */
  --titel: #1C1C1C;             /* Überschriften Lage/Team/Bewertung */
  --titel-hotel: #4B4B4B;
  --intro: #464646;             /* Intro-Zeilen unter dem Hero */
  --theme-h: #3A3A3A;           /* Astra-Überschriften (h2 im Text, Footer) */
  --link: #0170B9;              /* Astra Linkfarbe */
  --rot: #E63946;               /* Button Google-Profil */
  --stern: #F0AD4E;
  --stern-leer: #CCD6DF;
  --f: "Barlow Condensed", sans-serif;
  --f-roboto: "Roboto", sans-serif;
}

/* ---------- Basis (Astra) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pfirsich);
  color: var(--text);
  font-family: var(--f);
  font-weight: 400;
  font-size: .9375rem;          /* 15px, mobil 13,68px */
  line-height: 1.65em;          /* wie Astra: vererbt als fester Pixelwert */
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 921px) { html { font-size: 91.2%; } }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
p { margin: 0 12px 1.6em 0; }
h1, h2, h3 { margin: 0; font-family: var(--f); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; color: #000; padding: 10px 20px; }
.skip:focus { left: 10px; top: 10px; }
:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

/* ==========================================================================
   Kopf (Astra Header Builder)
   ========================================================================== */
.kopf { position: relative; z-index: 999; }
.kopf__oben { height: 30px; padding: 0 47px 0 35px; display: flex; justify-content: flex-end; align-items: center; }
.kopf__service { display: flex; align-items: center; gap: 0; font-size: .9375rem; line-height: 1.65em; }
.kopf__service a { color: #010101; }
.kopf__service a + a { margin-left: 24px; }
.kopf__service a + a + a { margin-left: 33px; }
.kopf__service .kopf__zeiten { text-decoration: underline; }
.kopf__sprache { display: flex; gap: 22px; margin-left: 44px; }
.kopf__sprache img { width: 20px; height: 13px; }

.kopf__haupt { position: relative; height: 105px; padding: 0 35px; }
.kopf__logo { position: absolute; left: 35px; top: -3px; display: block; }
.kopf__logo img { width: 240px; height: auto; }
.kopf__nav { position: absolute; right: 47px; max-width: calc(100% - 354px); top: 42px; transform: translateY(-50%); }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.kopf__nav a {
  display: block; height: 34px; color: #030303;
  font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 1px;
  border-bottom: 4px solid transparent;
}
.kopf__nav a[aria-current="page"] { color: #001C2E; border-bottom-color: #001C2E; }
.kopf__nav a:hover { color: var(--link); }
.kopf__pfad { position: absolute; left: 35px; top: 80px; height: 25px; font-size: 15px; line-height: 21px; }
.kopf__pfad span { font-size: 18px; line-height: 25.2px; color: var(--text); }
.kopf__pfad a { color: var(--text); }

.kopf__buchung { height: 85px; background: #fff; border-bottom: 1px solid #E5E5E5; padding: 0 35px; }
.kopf__buchung .spider { width: 65%; margin: 0 auto; }

/* Buchungs-Widget: Anpassungen wie im Bestand (Astra „Zusätzliches CSS“) */
.spiderBooking-input-block__input .input,
.spiderBooking-input-block__input .spiderDatepicker-input,
.spiderBooking-input-block__input .spiderSelect-single { height: 34px; border: 0; }
.spiderSelect-container { width: 20% !important; }
.spiderBooking-form__actions-toolbar button.spiderBooking-form__button { height: 34px !important; padding-top: 10px !important; width: 60%; }
/* Astra-Grundstile für Formularelemente, die das Widget erbt */
.spider input, .spider select, .spider textarea { color: #808285; line-height: 1.65em; font-family: inherit; }
.spider button { font-family: inherit; padding: 15px 30px; }
input.input.spiderDatepicker-input.form-control.input { background: transparent; }

/* Mobile Bedienelemente – auf Desktop aus */
.kopf__menue-knopf, .kopf__sprache--mobil, .kopf-schublade { display: none; }

/* --- Fixierter Kopf beim Scrollen (Astra Sticky Header) --- */
.kopf-platz { display: none; }
.ist-fixiert .kopf-platz { display: block; }
.ist-fixiert .kopf { position: fixed; top: 0; left: 0; right: 0; }
.ist-fixiert .kopf__oben, .ist-fixiert .kopf__haupt { background: var(--pfirsich); }
.ist-fixiert .kopf__haupt { height: 87px; }
.ist-fixiert .kopf__logo { top: 8px; }
.ist-fixiert .kopf__logo img { width: 200px; }
.ist-fixiert .kopf__nav { top: 32px; }
.ist-fixiert .kopf__nav a { color: var(--text); }
.ist-fixiert .kopf__nav a[aria-current="page"] { color: var(--link); border-bottom-color: var(--link); }
.ist-fixiert .kopf__pfad { top: 62px; }
.ist-fixiert .kopf__buchung { background: #EEEEEE; }

/* ==========================================================================
   Hero mit Hintergrundvideo
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; min-height: 650px;
  background: url("../img/hero-drohne-poster.webp") 50% 50% / cover;
  box-shadow: 0 5px 15px 5px rgba(0, 0, 0, .25);
}
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 1024px) { .hero { min-height: 400px; background-image: url("../img/hero-drohne-poster-1024.webp"); } }
@media (max-width: 767px)  { .hero { min-height: 240px; } }

/* ==========================================================================
   Elementor-Raster
   ========================================================================== */
.reihe { position: relative; display: flex; }
.reihe > .spalte { width: 50%; display: flex; position: relative; }
.reihe--mitte > .spalte { align-items: center; }
.spalte__inhalt { width: 100%; display: flex; flex-direction: column; }
.spalte__inhalt > * { flex: none; }
.box { max-width: 1140px; margin: 0 auto; }
.box > .spalte__inhalt { padding: 10px; }
.pad-100 { padding: 30px 100px; }
@media (max-width: 1024px) { .pad-100 { padding: 50px 20px; } }
@media (max-width: 767px) {
  .reihe { flex-wrap: wrap; }
  .reihe > .spalte { width: 100%; }
}

/* Überschriften und Text wie Elementor-Widgets */
.w { margin-bottom: 20px; }
.w:last-child { margin-bottom: 0; }
.titel { font-size: 36px; font-weight: 500; line-height: 1.3; }
@media (max-width: 767px) { .titel--m32 { font-size: 32px; } }
.fliess { font-size: 20px; font-weight: 400; }
.fliess p { margin-right: 12px; }
.fliess a { color: #000; text-decoration: underline; }
.fliess h2 { font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--theme-h); margin-bottom: 22px; }
@media (max-width: 921px) { .fliess h2 { font-size: 25px; margin-bottom: 16px; } }
.fliess strong, .fliess b { font-weight: 700; }

/* Pfeil-Link „JETZT ENTDECKEN >“ */
.pfeil-link { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; line-height: 20px; color: #000; }
.pfeil-link svg { width: 12.5px; height: 20px; fill: #000; }

/* ---------- Intro ---------- */
.intro { margin-top: 70px; }
.intro h1 { font-size: 30px; font-weight: 300; line-height: 1.4; color: var(--intro); text-align: center; }
.intro__link { text-align: center; font-size: 30px; font-weight: 300; line-height: 1; }
.intro__link a { color: var(--intro); text-decoration: underline; }
@media (max-width: 1024px) { .intro { margin-top: 20px; } }
@media (max-width: 767px) {
  .intro h1, .intro__link { font-size: 25px; line-height: 1.1em; }
}

/* ---------- Hotel ---------- */
.hotel { margin-top: 20px; }
.hotel .titel { color: var(--titel-hotel); }
.hotel .fliess { color: var(--text-hotel); }
.hotel .fliess--breit { width: 99.099%; margin-bottom: 0; }
@media (max-width: 767px) { .hotel { margin-top: 0; } }

.knoepfe { display: flex; margin-top: 20px; }
@media (max-width: 1024px) { .knoepfe { margin-top: 0; } }
.knoepfe__a { width: 30%; }
.knoepfe__b { width: 70%; display: flex; align-items: flex-start; }
.knopf-rahmen {
  display: inline-block; cursor: pointer; background: transparent;
  font: 500 20px/20px var(--f); color: #262626; text-align: center;
  border: 1px solid #262626; padding: 13px 30px;
  transition: color .3s, background-color .3s;
}
.knopf-rahmen:hover { color: #fff; background: #000; }
.knopf-rahmen--panorama { padding: 12px 20px; }
.knoepfe__buchen { width: 41%; }
.knoepfe__panorama { width: 36.763%; display: flex; justify-content: center; }
.knopf-schwarz {
  display: inline-block; background: #000; color: #fff; border: 1px solid #000;
  font: 500 18px/18px var(--f); padding: 12px 24px; text-align: center;
}
.knopf-schwarz:hover { color: #fff; }
.knopf-schwarz:focus { background: transparent; color: #000; }
@media (max-width: 1024px) and (min-width: 768px) {
  .knoepfe__a, .knoepfe__b { width: 50%; }
  .knoepfe__b { flex-wrap: wrap; }
  .knoepfe__buchen { width: 158.281px; }
  .knoepfe__panorama { width: 316.25px; }
}
@media (max-width: 767px) {
  .knoepfe__a, .knoepfe__b { width: 50%; }
  .knoepfe__buchen { width: 169.547px; }
  .knoepfe__panorama { display: none; }
}

/* Bild-Slider (Nachbau Revolution Slider, Stil „Hesperiden“/„Gyges“) */
.slider { width: 100%; }
.slider__bild { position: relative; aspect-ratio: 700 / 550; max-height: 550px; overflow: hidden; background: #000; }
.slider__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transition: opacity .3s linear;
}
.slider__bild img.ist-aktiv { opacity: 1; }
.slider__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, .5); display: grid; place-items: center;
}
.slider__pfeil:hover { background: #000; }
.slider__pfeil svg { width: 10px; height: 16px; fill: #fff; }
.slider__pfeil--links { left: 30px; }
.slider__pfeil--rechts { right: 30px; }
.slider__leiste { padding: 5px; overflow: hidden; margin-bottom: 21px; }
.slider__spur { display: flex; gap: 5px; transition: transform .3s ease; }
.slider__daumen {
  flex: none; width: 183px; height: 105px; padding: 3px; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .25);
}
.slider__daumen.ist-aktiv { background: linear-gradient(to bottom, #fff 0%, #777 100%); }
.slider__daumen img { width: 177px; height: 99px; object-fit: cover; }
.slider__daumen:not(.ist-aktiv) img { opacity: 1; }
/* Seitenverhältnisse wie die Revolution-Slider-Stufen (700×550, 1024×768, 778×960, 480×720) */
@media (max-width: 1023px) { .slider__bild { aspect-ratio: 1024 / 768; max-height: none; } }
@media (max-width: 777px)  { .slider__bild { aspect-ratio: 778 / 960; } }
@media (max-width: 479px)  { .slider__bild { aspect-ratio: 480 / 720; } }

/* ---------- Lage ---------- */
.lage .titel { color: var(--titel); }
.lage .fliess { color: var(--text-lage); }
.karte { width: 100%; height: 750px; margin-bottom: 10px; border: 0; display: block; }
.karte-huelle { width: 100%; padding-bottom: 7px; margin-bottom: 20px; }

/* ---------- Abstandhalter ---------- */
.abstand { height: 70px; }
.abstand-box { padding: 10px; }

/* ---------- Überblick ---------- */
.ueberblick > .spalte { align-items: flex-start; }
.ueberblick .spalte__inhalt { padding: 10px; }
.ueberblick img { width: 100%; }
.ueberblick h3 { font-size: 36px; font-weight: 500; line-height: 1.3; color: #000; }
.ueberblick .fliess { color: #000; }
.ueberblick .fliess a { color: var(--link); text-decoration: underline; }
.ueberblick .fliess p { margin-right: 12px; }

/* ---------- Team ---------- */
.team { margin-top: -10px; padding-bottom: 100px; background: var(--pfirsich); z-index: 3; }
.team .titel { color: var(--titel); }
.team .fliess { color: var(--text-lage); }
.team img { width: 100%; }
@media (max-width: 1024px) { .team { padding-bottom: 50px; } }

/* ---------- Bewertungen ---------- */
.stimmen-kopf { max-width: 1300px; margin: 0 auto 50px; }
.stimmen-kopf .spalte__inhalt { padding: 10px; }
.stimmen-kopf .titel { text-align: center; color: var(--titel); }
.stimmen .spalte__inhalt { padding: 10px; }
.stimmen .spalte__inhalt > * { margin-bottom: 10px; }
.stimmen .spalte__inhalt > *:last-child { margin-bottom: 0; }
.stimmen__text { font-family: var(--f-roboto); text-align: center; color: #000; }
.stimmen__text a { color: var(--link); text-decoration: underline; }
.stimmen__urteil { text-align: center; font-size: 40px; font-weight: 400; color: #000; padding-bottom: 2px; }
.sterne { display: flex; justify-content: center; gap: 10px; margin-top: -45px !important; padding-bottom: 9px; }
.stern { position: relative; width: 35px; height: 35px; }
.stern svg { position: absolute; inset: 0; width: 35px; height: 35px; }
.stern .leer { fill: var(--stern-leer); }
.stern .voll { fill: var(--stern); }
.knopf-rot {
  display: inline-block; background: var(--rot); color: #fff; border-radius: 3px;
  font: 500 20px/20px var(--f-roboto); padding: 12px 24px;
}
.knopf-rot:hover { color: #fff; }
.stimmen__knopf { text-align: center; }
@media (max-width: 921px) { .sterne { padding-bottom: 13px; } }  /* gemessen: Sternzeile im Bestand mobil 4 px höher */

/* ---------- Kacheln ---------- */
.kacheln { margin-top: 50px; }
.kachel { position: relative; display: block; width: 50%; overflow: hidden; }
.kachel img { width: 100%; filter: brightness(65%); transition: filter .5s, transform .5s; }
.kachel:hover img { filter: brightness(100%); transform: scale(1.08); }
.kachel span {
  position: absolute; left: 0; right: 0; top: 47%; margin-top: .8075em;
  text-align: center; color: #fff; font-size: 40px; font-weight: 500;
}
.kachel-reihe { display: flex; }
@media (max-width: 1024px) {
  .kacheln { margin-top: 0; }
  .kachel span { font-size: 25px; }
}
@media (max-width: 767px) { .kachel-reihe { flex-wrap: wrap; } .kachel { width: 100%; } }

/* ==========================================================================
   Fuß (Astra Footer Builder)
   ========================================================================== */
.fuss__oben { background: var(--fuss-oben); padding: 45px 0; }
.fuss__raster { max-width: 1200px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 50px; }
.fuss h2 { font-size: 1.3125rem; font-weight: 600; line-height: 1.3; color: var(--theme-h); margin-bottom: .9em; }
.fuss p { margin: 0 12px 1.75em 0; }
.fuss p b { font-weight: 700; }
.fuss__unten { background: var(--fuss-unten); border-top: 1px solid #E5E5E5; padding: 5px 0; }
.fuss__unten-innen { min-height: 80px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 3fr 1fr; column-gap: 50px; align-items: center; }
.fuss__unten-innen p { grid-column: 2; }
.fuss__unten p { color: #2F3032; text-align: center; }
.fuss__unten a { color: #003252; }
@media (max-width: 921px) {
  .fuss__raster { text-align: center; }
  .fuss__unten-innen { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 544px) {
  .fuss__raster { grid-template-columns: 1fr; }
  .fuss__unten-innen { grid-template-columns: 1fr; }
  .fuss__unten-innen p { grid-column: 1; }
  .fuss__spalte { margin-bottom: 34px; }
  .fuss__spalte:nth-child(3) { margin-bottom: 38px; }
  .fuss__spalte p:last-child { margin-bottom: 0; }
  .fuss__spalte:empty { display: none; }
}

/* ==========================================================================
   Pop-ups (Anfrage, 360° Panorama)
   ========================================================================== */
.popup { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.popup::backdrop { background: rgba(11, 11, 11, .8); }
.popup__zu {
  position: absolute; right: 8px; top: 0; width: 44px; height: 44px; border: 0; background: none;
  font: 28px/44px Arial, sans-serif; color: #333; cursor: pointer; opacity: .65;
}
.popup__zu:hover { opacity: 1; }
.popup--anfrage { width: 600px; max-width: calc(100vw - 16px); margin-top: 2px; height: calc(100vh - 3px); }
.popup--anfrage .popup__fenster { background: #fff; padding: 36px 40px 40px; height: 100%; overflow-y: auto; position: relative; font-family: var(--f-roboto); color: var(--text); }
.popup--panorama { width: 712px; max-width: calc(100vw - 16px); }
.popup--panorama .popup__fenster { position: relative; background: var(--pfirsich); border: 1px solid #000; padding: 54px 10px 32px; }
.popup--panorama iframe { width: 100%; height: 560px; border: 0; display: block; }

.anfrage-titel { font: 600 25px/1.3 var(--f-roboto); color: var(--text); margin: 0 0 30px; }
.anfrage-titel + .anfrage-titel { margin-bottom: 45px; }
.formular { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 15px; row-gap: 14px; }
.ff { grid-column: span 6; display: flex; flex-direction: column; }
.ff--halb { grid-column: span 3; }
.ff--drittel { grid-column: span 2; }
.ff label { font: 500 15px/24.75px var(--f-roboto); color: var(--text); margin-bottom: 4px; }
.ff label .pflicht { color: #FF0000; margin-left: 6px; }
.ff input, .ff textarea {
  font: 600 15px/15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #606266; background: #fff;
  border: 1px solid #E5E5E5; border-radius: 0; padding: 6px 10px; height: 33px; width: 100%;
}
.ff textarea { height: 90px; border-color: #DADBDD; border-radius: 7px; resize: vertical; }
.ff--zustimmung label.check { display: block; font-weight: 600; line-height: 28px; margin: 0; }
.ff--zustimmung input { width: auto; height: auto; margin: 0 4px 0 0; vertical-align: -2px; }
.ff--hinweis { font: 600 15px/24.75px var(--f-roboto); color: var(--text); margin-top: 4px; }
.knopf-senden { width: 100%; height: 42px; border: 1px solid transparent; background: #ABABAB; color: #fff; font: 500 16px/24px var(--f-roboto); padding: 8px 20px; text-transform: uppercase; cursor: pointer; margin-top: 30px; }
@media (max-width: 767px) { .ff--halb, .ff--drittel { grid-column: span 6; } }

/* ==========================================================================
   Kopf mobil (Astra ab 921 px)
   ========================================================================== */
@media (max-width: 921px) {
  .kopf__oben { padding: 0 35px 0 20px; justify-content: center; }
  .kopf__service a + a { margin-left: 25px; }
  .kopf__service a + a + a { margin-left: 31px; }
  .kopf__sprache--desktop { display: none; }
  .kopf__haupt { height: 108px; padding: 0 20px; }
  .kopf__logo { left: 20px; top: 13px; }
  .kopf__logo img { width: 240px; }
  .kopf__nav, .kopf__buchung { display: none; }
  .kopf__sprache--mobil { display: flex; position: absolute; right: 91px; top: 35px; gap: 22px; margin-left: 0; }
  .kopf__sprache--mobil img { width: 20px; height: 13px; }
  .kopf__menue-knopf {
    display: grid; place-items: center; position: absolute; right: 20px; top: 22px;
    width: 39px; height: 39px; border: 0; background: none; padding: 0; cursor: pointer;
  }
  .kopf__menue-knopf svg { width: 20px; height: 23.33px; fill: #4F4F4F; }
  .kopf__pfad { left: 20px; top: 84px; }

  .ist-fixiert .kopf__haupt { height: 80px; }
  .ist-fixiert .kopf__logo { top: 9px; }
  .ist-fixiert .kopf__logo img { width: 130px; }
  .ist-fixiert .kopf__pfad { top: 50px; }

  .kopf-schublade { display: block; position: fixed; inset: 0; z-index: 100000; visibility: hidden; }
  .kopf-schublade__grund { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .3s; }
  .kopf-schublade__innen {
    position: absolute; top: 0; right: 0; bottom: 0; width: 90%; background: #FAFAFA; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s;
  }
  .kopf-schublade.ist-offen { visibility: visible; }
  .kopf-schublade.ist-offen .kopf-schublade__grund { opacity: 1; }
  .kopf-schublade.ist-offen .kopf-schublade__innen { transform: none; }
  .kopf-schublade__zu { display: flex; justify-content: flex-end; padding: 14px 20px 0; }
  .kopf-schublade__zu button { border: 0; background: none; width: 30px; height: 30px; cursor: pointer; padding: 0; }
  .kopf-schublade__zu svg { width: 18px; height: 18px; fill: #3A3A3A; }
  .kopf-schublade ul { list-style: none; margin: 0; padding: 0 20px; }
  .kopf-schublade a { display: block; font-size: 18px; line-height: 30px; color: var(--link); }
  .kopf-schublade a[aria-current="page"] { color: var(--link); }
  .kopf-schublade hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .1); margin: 20px; }
  .kopf-schublade .spider { padding: 0 20px 20px; }
}
@media (max-width: 544px) {
  .kopf__haupt { height: 89px; }
  .kopf__logo img { width: 160px; }
  .kopf__sprache--mobil { right: 85px; top: 25px; gap: 16px; }
  .kopf__menue-knopf { top: 12px; }
  .kopf__pfad { top: 64px; }
}