/* daniels-online.de – eigenes Stylesheet
   Optik nach der bisherigen Seite (Türkis, Roboto, heller Grundton, dunkler Fuß).
   Farben 1:1 wie bisher (Entscheidung 06.11.2026). Kontraste von Grau und Türkis liegen
   dadurch unter WCAG 2.1 AA, siehe Prüfbericht. Fokus ist immer sichtbar. */


/* Schriftdateien und Schnitte 1:1 von der alten Seite (ältere Roboto-Fassung). Bewusst ohne local():
   Besucher sehen alt die Webfont, nicht eine lokal installierte Roboto (gemessen 09.11.2026).
   Roboto Condensed gibt es alt nur in 300 und 400: Stärke 100 wird als 300 dargestellt, 700 als künstlich fette 400. */
@font-face { font-family: "Roboto"; font-weight: 100; font-display: swap; src: url("../schriften/alt/Roboto-Thin-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap; src: url("../schriften/alt/Roboto-Light-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../schriften/alt/Roboto-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../schriften/alt/Roboto-Bold-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 300; font-display: swap; src: url("../schriften/alt/RobotoCondensed-Light-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-display: swap; src: url("../schriften/alt/RobotoCondensed-Regular-latin.woff2") format("woff2"); }

:root {
  --tuerkis: #4a9aa6;          /* Markenfarbe: Flächen, Linien */
  --tuerkis-text: #4a9aa6;     /* Türkis für Text und Links, 1:1 wie bisher (3,25:1, unter WCAG AA) */
  --tuerkis-flaeche: #4a9aa6;  /* Türkis-Fläche mit weißer Schrift, 1:1 wie bisher (3,25:1, unter WCAG AA) */
  --text: #777;                /* Fließtext 1:1 wie bisher (4,48:1, knapp unter WCAG AA) */
  --text-grau-flaeche: #777;   /* 1:1 wie bisher (4,22:1 auf Hellgrau) */
  --ueberschrift: #5b5e60;
  --hellgrau: #f8f8f8;
  --linie: #e6e6e6;
  --fuss: #0d0d0d;
  --fuss-text: #ececec;
  --breite: 1170px;
  --schrift: "Roboto Condensed", sans-serif;        /* wie alt: fast alles in Roboto Condensed */
  --schrift-schmal: "Roboto Condensed", sans-serif;
  --schrift-menue: "Roboto", sans-serif;           /* wie alt: nur Hauptmenü und „zurück zur Startseite“ in Roboto */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--schrift);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--tuerkis-text); }
a:hover { color: var(--ueberschrift); }
:focus-visible { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }
strong { font-weight: 500; }

h1, h2, h3, h4 { color: var(--ueberschrift); font-weight: 400; line-height: 1.3; margin: 0 0 15px; }
p, ul, ol, table, address { margin: 0 0 15px; }
address { font-style: normal; }

.behaelter { max-width: var(--breite); margin: 0 auto; padding: 0 15px; }

.nur-vorleser {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.springen {
  position: absolute; left: 10px; top: -60px; z-index: 1000;
  background: var(--tuerkis-flaeche); color: #fff; padding: 10px 16px; text-decoration: none; font-weight: 500;
}
.springen:focus { top: 10px; }

/* --- Kopf ------------------------------------------------------------------------ */
/* Maße 1:1 nach der alten Seite (gemessen 06.11.2026):
   oben 140 px durchsichtig, Logo 400 × 63 px; beim Scrollen 50 px Türkis, weißes Logo.
   Menü Roboto Light 14 px, Großbuchstaben, Innenabstand 90/20/35 px (gescrollt 15/20/21 px). */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: background-color .3s;
}
.kopf.ist-geschrumpft,
body:not(.startseite) .kopf { background: var(--tuerkis); }
.kopf-innen {
  max-width: 1326px; margin: 0 auto; padding: 0 15px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; height: 140px;
  transition: height .3s;
}
.kopf.ist-geschrumpft .kopf-innen { height: 50px; }
.logo { display: block; flex: 0 0 auto; margin-top: 39px; transition: margin-top .3s; }
.logo img { display: block; width: 400px; height: 63px; transition: width .3s, height .3s; }
.logo .logo-weiss { display: none; }
.kopf.ist-geschrumpft .logo { margin-top: 10px; }
.kopf.ist-geschrumpft .logo img { width: 190px; height: 30px; }
.kopf.ist-geschrumpft .logo .logo-farbig { display: none; }
.kopf.ist-geschrumpft .logo .logo-weiss { display: block; }  /* Jakob: beim Scrollen weißes Logo (alt ohne Logo) */

.hauptmenue { border-bottom: 1px solid rgba(207,207,207,.4); }  /* wie alt: feine Linie unter den Menüpunkten */
.hauptmenue > ul { list-style: none; margin: 0; padding: 0; display: flex; }
.hauptmenue > ul > li { position: relative; }
.hauptmenue > ul > li > a {
  display: block; padding: 90px 20px 35px;
  color: #fff; text-decoration: none;
  font-family: var(--schrift-menue); font-size: 14px; font-weight: 300; line-height: 14px; text-transform: uppercase;
  transition: padding .3s, background-color .2s, color .2s;
}
.hauptmenue > ul > li > a:hover,
.hauptmenue > ul > li > a.ist-aktiv,
.hauptmenue > ul > li > a[aria-current="page"],
.hauptmenue > ul > li:focus-within > a { background: var(--tuerkis); color: #fff; }
.kopf.ist-geschrumpft .hauptmenue > ul > li > a { padding: 15px 20px 21px; }
.kopf.ist-geschrumpft .hauptmenue > ul > li > a:hover,
.kopf.ist-geschrumpft .hauptmenue > ul > li > a.ist-aktiv,
.kopf.ist-geschrumpft .hauptmenue > ul > li > a[aria-current="page"],
.kopf.ist-geschrumpft .hauptmenue > ul > li:focus-within > a { background: #fff; color: var(--tuerkis); }

/* Pfeil am Punkt mit Untermenü */
/* Pfeil wie alt: Zeichen „angle-down“ aus der alten Symbolschrift in 12 px, 6 px Abstand, rechts 15 px Innenabstand */
.hauptmenue .hat-untermenue > a, .kopf.ist-geschrumpft .hauptmenue .hat-untermenue > a { padding-right: 15px; }
.hauptmenue .hat-untermenue > a::after {
  content: ""; display: inline-block; width: 7.71px; height: 12px; margin-left: 6px; vertical-align: -1.8px;
  background: currentColor; -webkit-mask: url("/bilder/sozial/pfeil-unten.svg") center / contain no-repeat; mask: url("/bilder/sozial/pfeil-unten.svg") center / contain no-repeat;
}

/* Untermenü: 170 px, halbtransparent schwarz, 11 px */
.hauptmenue .untermenue {
  display: none; position: absolute; top: 100%; left: 0; z-index: 10;
  list-style: none; margin: 0; padding: 10px 0 9px; width: 170px; background: rgba(0,0,0,.5);
}
.hauptmenue .hat-untermenue:hover > .untermenue,
.hauptmenue .hat-untermenue:focus-within > .untermenue { display: block; }
.hauptmenue .untermenue a {
  display: block; padding: 7px 20px; color: #fff; text-decoration: none;
  font-family: var(--schrift-menue); font-size: 11px; font-weight: 300; line-height: 16.5px; text-transform: uppercase;
}
.hauptmenue .untermenue a:hover, .hauptmenue .untermenue a:focus-visible { background: var(--tuerkis); }

.menue-knopf {
  display: none; align-items: center; gap: 8px; margin-top: 20px;
  background: transparent; border: 2px solid #fff; color: #fff; border-radius: 3px;
  padding: 8px 12px; font: 400 15px var(--schrift); cursor: pointer;
}
.menue-knopf-linien, .menue-knopf-linien::before, .menue-knopf-linien::after {
  display: block; width: 20px; height: 2px; background: #fff; position: relative; content: "";
}
.menue-knopf-linien::before { position: absolute; top: -6px; }
.menue-knopf-linien::after { position: absolute; top: 6px; }

@media (max-width: 1200px) {
  .logo img { width: 300px; height: 47px; }
  .hauptmenue > ul > li > a { padding-left: 12px; padding-right: 12px; }
}
/* Ohne JavaScript ist das Menü immer offen */
.kein-js .hauptmenue { display: block; }
.kein-js .menue-knopf { display: none; }

/* --- Slider ------------------------------------------------------------------------ */
/* 1:1 nach der alten Seite (gemessen 09.11.2026, 360 bis 1440 px): Faktor s = Breite / 1130, höchstens 1
   (setzt slider.js als --s und --h). Höhe = Fensterhöhe × s, Text 80 px × s bei 43 % und 57 % der Höhe.
   Ab 1130 px füllt das Bild die Fläche, darunter steht es in Originalgröße 1024 × 487 px × s mittig auf Türkis. */
.slider { position: relative; background: #387d84; overflow: hidden; height: var(--h, 900px); }
.slider-folie, .slider-folie img { position: absolute; inset: 0; }
.slider-folie img { width: 100%; height: 100%; object-fit: cover; }
/* unter 1130 px randlos (Jakob): Bild füllt die Fläche, beide Textzeilen mittig untereinander */
.slider.ist-skaliert .slider-zeile1 { top: 50%; transform: translateY(-100%); }
.slider.ist-skaliert .slider-zeile2 { top: 50%; transform: none; }
.slider-text { position: absolute; top: 0; bottom: 0; left: max(0px, calc((100% - 1130px) / 2)); width: 100%; z-index: 2; margin: 0; color: #fff; text-align: center; font-family: var(--schrift); font-weight: 300; }  /* wie alt (Entscheidung Jakob): ab 1130 px Breite rückt der Text um (Breite − 1130) / 2 nach rechts */
.slider-zeile1, .slider-zeile2 { position: absolute; left: 0; right: 0; font-size: calc(80px * var(--s, 1)); line-height: calc(104px * var(--s, 1)); transform: translateY(-50%); }
.slider-zeile1 { top: 43%; }
.slider-zeile2 { top: 57%; }
.slider-steuerung { position: absolute; z-index: 3; left: 50%; top: 800px; transform: translateX(-50%); display: flex; gap: 4px; }
.slider-steuerung button {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 2px;
  font: 300 22px/1 var(--schrift); cursor: pointer;
}
.slider-steuerung .slider-pause { font-size: 11px; letter-spacing: -2px; }
.slider-steuerung button:hover, .slider-steuerung button:focus-visible { background: var(--tuerkis); border-color: var(--tuerkis); }
@media (max-width: 991px) {
  .slider { height: var(--h, 60vh); }
}
@media (max-width: 1199px) {
  .slider-steuerung { top: auto; bottom: 20px; }
}
/* Ab 1200 px wie alt (Entscheidung Jakob 09.11.2026): keine Knöpfe, nur der Tastatur-Hinweis mit vier Kästen
   40 × 40 px, die nacheinander aufleuchten und nach 10 s ausblenden. Blättern mit den Pfeiltasten (slider.js).
   Hinweis: ohne Anhalten-Knopf erfüllt der selbst wechselnde Slider WCAG 2.2.2 nicht (bewusst so entschieden). */
.slider-tasten { display: none; }
@media (min-width: 1200px) {
  .slider-steuerung { display: none; }
  .slider-tasten {
    display: block; position: absolute; bottom: 100px; left: 50%; z-index: 10; width: 132px; margin: 0 0 0 -66px; padding: 0;
    list-style: none; font-size: 0; text-align: center; animation: tasten-aus .35s ease 10s both;
  }
  .slider-tasten li { position: relative; display: inline-block; width: 40px; height: 40px; margin: 2px; vertical-align: top; border: 1px solid #cfcfcf; border-radius: 6px; background: transparent; }
  .slider-tasten li::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--taste) center / var(--taste-b) 18px no-repeat; mask: var(--taste) center / var(--taste-b) 18px no-repeat; }
  .slider-tasten .t-hoch { display: block; margin: 2px auto; --taste: url("/bilder/sozial/taste-hoch.svg"); --taste-b: 15.55px; animation: taste-an 1s ease 5s both; }
  .slider-tasten .t-links { --taste: url("/bilder/sozial/taste-links.svg"); --taste-b: 8.37px; animation: taste-an 1s ease 4s both; }
  .slider-tasten .t-runter { --taste: url("/bilder/sozial/taste-runter.svg"); --taste-b: 15.59px; animation: taste-an 1s ease 5.5s both; }
  .slider-tasten .t-rechts { --taste: url("/bilder/sozial/taste-rechts.svg"); --taste-b: 8.37px; animation: taste-an 1s ease 4.5s both; }
}
@keyframes taste-an { 0% { background-color: transparent; box-shadow: 0 0 0 transparent; } 50% { border-color: transparent; background-color: #4a9aa6; box-shadow: 0 0 8px rgba(0,194,169,.5); } 100% { background-color: transparent; box-shadow: 0 0 0 transparent; } }
@keyframes tasten-aus { to { opacity: 0; } }

/* --- Abschnitte -------------------------------------------------------------------- */
/* 1:1 nach der alten Seite (gemessen 06.11.2026): 100 px oben, Titel Roboto Thin 60 px Türkis in Großbuchstaben,
   graue Linie 158 × 2 px, Untertitel 24 bzw. 20 px. */
main { display: block; }
.abschnitt { padding: 100px 0 0; background: #fff; color: #777; font-family: var(--schrift); font-weight: 300; }
.abschnitt .behaelter { max-width: 1170px; padding: 0 20px; }
.titelgruppe { position: relative; text-align: center; padding-bottom: 15px; margin-bottom: 30px; }
.titelgruppe::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 158px; height: 2px; margin-left: -79px; background: #ececec; }  /* wie alt: Linie liegt im unteren Innenabstand */
.abschnitt-titel {
  margin: 0 0 20px; font-family: var(--schrift); font-size: 60px; font-weight: 100; line-height: 66px;
  color: var(--tuerkis); text-transform: uppercase; white-space: pre-wrap;
}
.abschnitt-untertitel { margin: 0 0 15px; font-size: 24px; font-weight: 300; line-height: 31.2px; color: #5b5e60; }
.abschnitt-verkauf .abschnitt-untertitel, .abschnitt-kontakt .abschnitt-untertitel { font-size: 20px; line-height: 26px; padding: 20px 0 30px; }
.abschnitt-verkauf .titelgruppe, .abschnitt-service .titelgruppe { margin-bottom: 30px; }  /* 30 px unter der Linie bis zum Inhalt (Jakob) */
.abschnitt-kontakt .titelgruppe { margin-bottom: 30px; }
.abschnitt-kontakt .abschnitt-titel { margin-bottom: 0; }
.titel-zeile { display: block; margin-bottom: 20px; }
.abschnitt-kontakt .abschnitt-untertitel { margin-top: 0; white-space: pre-wrap; }
.untertitel-gross { font-size: 32px; }
/* Handy: große Zeile mit 40 px Zeilenhöhe, Adresse sauber umbrechen (Straße / Ort, ohne „|“), Jakob 09.11.2026 */
@media (max-width: 767px) {
  .untertitel-gross { line-height: 40px; }
  .untertitel-trenner { display: block; height: 0; overflow: hidden; }
}
.abschnitt-verkauf .untertitel-gross { color: #333; }
/* Trennlinie wie alt (2 px wie die alte schwarze Linie: 1 + 1 px #333), aber in #4a9aa6: vor Vermietung, Service und Kontakt
   (Jakob 09.11.2026, vor Vermietung ergänzt 10.11.2026) */
.abschnitt + .abschnitt-verkauf, .abschnitt + .abschnitt-service, .abschnitt + .abschnitt-kontakt { border-top: 2px solid #4a9aa6; }
.abschnitt-ueber-uns .behaelter { display: flow-root; }  /* wie alt: 30 px unter der Titelgruppe bleiben im Abschnitt */
.abschnitt-verkauf .abschnitt-titel { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* Social-Symbole 1:1 wie alt (Kontakt und Fuß): Kästen 40 × 40 px, Rand hell, 3 px Rundung, Symbole aus der
   alten Symbolschrift (bilder/sozial/*.svg) in #a0a0a0 und 20 px, beim Überfahren Farbe des Netzwerks. */
.kontakt-sozial, .sozial { list-style: none; padding: 0; font-size: 0; }
.kontakt-sozial { margin: 0 0 20px; text-align: center; }
.kontakt-sozial li, .sozial li { display: inline-block; margin: 0 5px 5px 0; vertical-align: top; }
.kontakt-sozial a, .sozial a { position: relative; display: block; width: 40px; height: 40px; border: 1px solid rgba(207,207,207,.33); border-radius: 3px; transition: all .25s ease; }
.kontakt-sozial a::before, .sozial a::before { content: ""; position: absolute; inset: 0; background: #a0a0a0; -webkit-mask: var(--symbol) center / var(--symbol-breite) 20px no-repeat; mask: var(--symbol) center / var(--symbol-breite) 20px no-repeat; }
.s-twitter a, .sozial-twitter a { --symbol: url("/bilder/sozial/twitter.svg"); --symbol-breite: 18.57px; }
.s-facebook a, .sozial-facebook a { --symbol: url("/bilder/sozial/facebook.svg"); --symbol-breite: 8.57px; }
.s-youtube a, .sozial-youtube_kanal a { --symbol: url("/bilder/sozial/youtube.svg"); --symbol-breite: 17.14px; }
.kontakt-sozial a:hover, .kontakt-sozial a:focus-visible, .sozial a:hover, .sozial a:focus-visible { border-color: transparent; }
.s-twitter a:hover, .s-twitter a:focus-visible, .sozial-twitter a:hover, .sozial-twitter a:focus-visible { background-color: #47c0d8; }
.s-facebook a:hover, .s-facebook a:focus-visible, .sozial-facebook a:hover, .sozial-facebook a:focus-visible { background-color: #49699f; }
.s-youtube a:hover, .s-youtube a:focus-visible, .sozial-youtube_kanal a:hover, .sozial-youtube_kanal a:focus-visible { background-color: #b72d24; }
.kontakt-sozial a:hover::before, .kontakt-sozial a:focus-visible::before, .sozial a:hover::before, .sozial a:focus-visible::before { background: #fff; }

/* Team: zwei Karten 250 px, Foto 250 × 268, Kasten mit Name 24 px und Funktion 16 px */
.abschnitt-ueber-uns-service { background: #f8f8f8; padding-bottom: 120px; }  /* wie alt 631 px hoch */
.team { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 40px; }
.team li { width: 250px; }
.team img { display: block; width: 250px; height: 268px; object-fit: cover; }
.team-text { margin-top: 10px; padding: 25px 20px; background: #fcfcfc; border: 1px solid #e0e0e0; }
.team-text h3 { margin: 0 0 3px; font-size: 24px; font-weight: 400; line-height: 31.2px; color: #5b5e60; }
.team-text p { margin: 0 0 5px; font-size: 16px; font-weight: 400; line-height: 20.8px; color: #000; min-height: 41.6px; }  /* wie alt: Funktion mit Leerzeile darunter */

/* Teaser: fünf Bilder 204 × 282 über 1130 px verteilt */
/* Teaser wie alt (Tabelle mit 2 px Rand): Bilder 206 × 283 px im Abstand von 230 px, Block 296 px hoch */
.abschnitt-verkauf { padding-bottom: 100px; }
.teaser { list-style: none; margin: 0 auto; padding: 2px 2px 11px; max-width: 1130px; display: flex; justify-content: flex-start; gap: 24px; }
.teaser img { display: block; width: 206px; height: 283px; }
.teaser a:focus-visible img { outline: 3px solid var(--tuerkis); outline-offset: 2px; }

/* Service: Text linksbündig 18,67 px, darunter Produkt- und Partnerbilder in voller Breite */
.abschnitt-service { padding-bottom: 100px; }
/* Service 1:1 wie alt (gemessen 09.11.2026): 14-pt-Zeilen im 27-px-Raster, je eine Leerzeile zwischen den Blöcken,
   Bilder wie alt in der Zeile (8 px Unterlänge darunter), vor den Partnerleisten zwei Leerzeilen. */
.abschnitt-service p { margin: 0 0 27.25px; font-size: 18.6667px; line-height: 27.25px; color: #000; text-align: left; }
.abschnitt-service .service-bilder { margin: 0; }
.abschnitt-service .partner-bilder { margin: 0; padding: 54.5px 0 0; }
/* Bilder wie alt in der Textzeile (27,25 px): große Bilder bekommen 8 px Unterlänge, kleine auf dem Handy stehen in der Zeile */
.abschnitt-service .service-bilder, .abschnitt-service .partner-bilder { line-height: 27.25px; }
.abschnitt-service img { display: inline; vertical-align: baseline; width: 100%; height: auto; }

/* Kontakt: drei Spalten 403 px mit unterstrichenen Spaltenköpfen */
.abschnitt-kontakt { padding-bottom: 0; }
.abschnitt-kontakt .behaelter { max-width: 1170px; }  /* Jakob: Containerbreite überall gleich (alt 1250 px) */
/* Kontaktspalten 1:1 wie alt: Zeilen 14 pt #333 im 27-px-Raster, Überschrift mit 1-px-Linie unter dem Wort,
   eine Leerzeile darunter, unten wie alt eine Leerzeile und drei leere Zeilen (107 px) bis zum Abschnittsende. */
.kontakt-spalten { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 0 106px; }
.kontakt-spalten > div { padding: 0 20px; font-size: 15px; line-height: 26.25px; }
.kontakt-spalten h3 { display: inline; margin: 0; font-size: 18.6667px; font-weight: 300; line-height: 26.25px; color: #333; border-bottom: 1px solid #4a9aa6; }
.kontakt-spalten p { margin: 28px 0 0; font-size: 18.6667px; line-height: 27px; color: #333; }
.kontakt-spalten a { color: #333; text-decoration: none; }
.kontakt-spalten a:hover { color: var(--tuerkis); }

/* Karte: volle Breite, 400 px, Zustimmungstext, Laden erst nach Klick */
/* Vorschau wie alt (Befund 15): Bilder aus der Joomla-Erweiterung jmggooglemapsdsgvo (joomega, GNU GPL v2 oder neuer):
   Stadtplan als Fläche, Stecknadel mittig, Rahmen 1 px #ddd mit 3 px Rundung und Schatten */
.karte {
  position: relative; height: 400px; padding: 20px; text-align: center; color: #222; border: 1px solid #ddd; border-radius: 3px;
  background-color: #eee;
  background-image: url("/bilder/karte/karte-symbol.png"), url("/bilder/karte/karte-vorschau.png");
  background-position: 50% 50%, 50% 50%; background-size: auto, cover; background-repeat: no-repeat, no-repeat;
  box-shadow: 2px 2px 17px -8px rgba(0,0,0,.25);
}
.karte-hinweis h2 { margin: 0 0 15px; font-size: 16.8px; font-weight: 400; line-height: 21.84px; color: #222; }
.karte-hinweis p { margin: 0 auto; max-width: 1372px; font-size: 18.6667px; line-height: 26.5px; color: #222; }
.karte-hinweis a { color: #5b5e60; text-decoration: none; }
.karte-laden { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); background: none; border: 0; padding: 0; font: 400 15px Arial, sans-serif; color: #000; cursor: pointer; }
.karte-laden:hover, .karte-laden:focus-visible { text-decoration: underline; }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 991px) {
  .team { flex-wrap: wrap; }
  .teaser { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .kontakt-spalten { grid-template-columns: 1fr; gap: 20px; }
  .karte { height: auto; min-height: 400px; }
}

/* Inhaltsseiten (Konditionen, AGB, Impressum, Datenschutz, Barrierefreiheit) */
.abschnitt-seite .seiten-titel {
  text-align: center; margin: 0 0 20px; font-size: 60px; font-weight: 100; line-height: 66px; color: var(--tuerkis); text-transform: uppercase;
}
.abschnitt-seite .seiten-titel::after { content: ""; display: block; width: 158px; height: 2px; background: #ececec; margin: 20px auto 0; }  /* Linie 20 px unter dem Titel (Skala Jakob) */
/* Fließtext 1:1 nach der alten Seite (gemessen 09.11.2026): Texte dort per Inline-Stil 14 pt (18,67 px) #333,
   volle Breite 1130 px. Zwei Bauarten: Impressum, Datenschutz, Barrierefreiheit mit Zeilenhöhe 32,725 px;
   AGB und Konditionen mit Zeilenhöhe 26,25 px (Zeilenabstand gemessen 27 px), Konditionen in Schwarz. */
.seiten-inhalt { max-width: none; margin: 30px 0 0; font-size: 18.6667px; color: #333; line-height: 27px; overflow-wrap: break-word; }  /* lange Wörter brechen statt überzustehen (alt liefen sie auf dem Handy über den Rand) */
.seiten-inhalt p { margin: 0 0 22.5px; }
.seiten-inhalt h2 { font-size: 24px; line-height: 31.2px; text-align: left; }
.seiten-inhalt h3 { font-size: 20px; line-height: 26px; }
.seiten-inhalt h4 { font-size: 18px; }
.seiten-inhalt ul, .seiten-inhalt ol { margin: 0 0 0 30px; padding: 0 0 30px; line-height: 26.25px; }
.seiten-inhalt strong { font-weight: 400; }
.seiten-inhalt h2 strong, .seiten-inhalt h3 strong { font-weight: 700; }
.seite-impressum .seiten-inhalt, .seite-datenschutz .seiten-inhalt, .seite-barrierefreiheit .seiten-inhalt { line-height: 32.725px; }
.seite-impressum .seiten-inhalt p, .seite-datenschutz .seiten-inhalt p, .seite-barrierefreiheit .seiten-inhalt p { font-size: 18.7px; margin-bottom: 28.05px; }
.seite-impressum .seiten-inhalt ul, .seite-datenschutz .seiten-inhalt ul, .seite-barrierefreiheit .seiten-inhalt ul { font-size: 18.7px; }
.seite-konditionen .seiten-inhalt { color: #000; }
/* Abstand Menü → H1 und Inhalt → Fuß überall 30 px (Jakob, Messung 5) */
.abschnitt-seite { padding: 30px 0; }  /* Jakob: zwischen Menü und H1 und zwischen Inhalt und Fuß überall 30 px, auf allen Seiten und Geräten */
.abschnitt-seite .seiten-inhalt > :last-child, .mietliste .mietliste-hinweise > :last-child { margin-bottom: 0; padding-bottom: 0; }
.seite-impressum, .seite-datenschutz, .seite-barrierefreiheit { padding-top: 30px; }
.seiten-inhalt a { color: #5b5e60; text-decoration: none; overflow-wrap: anywhere; }
.seiten-inhalt a:hover, .seiten-inhalt a:focus-visible { color: var(--tuerkis); text-decoration: underline; }
/* Preistabellen (nur Konditionen): eine Zeile je Position, ohne Rahmen wie alt, Preis rechtsbündig ohne Umbruch (Jakob 10.11.2026, Änderung 014) */
.seiten-inhalt table { border-collapse: collapse; width: auto; max-width: 100%; }
.seiten-inhalt th, .seiten-inhalt td { border: 0; padding: 0; text-align: left; vertical-align: top; }
.seiten-inhalt td + td { padding-left: 30px; text-align: right; white-space: nowrap; }

/* Knopf „nach oben“ wie alt: 50 × 50 rund unten rechts */
.nach-oben {
  position: fixed; right: 40px; bottom: 40px; z-index: 90; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.25); border: 1px solid #e6e6e6; color: #5b5e60;
  font: 400 22px/1 var(--schrift); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .3s;
}
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; }
.nach-oben:hover, .nach-oben:focus-visible { background: #4a9aa6; color: #fff; border-color: transparent; }
/* Pfeil wie alt: Zeichen aus der alten Symbolschrift (bilder/sozial/nach-oben.svg), 20 px, #e1e1e1, beim Überfahren weiß */
.nach-oben span { display: none; }
.nach-oben::before { content: ""; width: 16.35px; height: 20px; background: #e1e1e1; -webkit-mask: url("/bilder/sozial/nach-oben.svg") center / contain no-repeat; mask: url("/bilder/sozial/nach-oben.svg") center / contain no-repeat; transition: background-color .25s ease; }
.nach-oben:hover::before, .nach-oben:focus-visible::before { background: #fff; }

/* --- Unterseiten-Kopf ----------------------------------------------------------- */
/* 1:1 nach der alten Seite: weiß, 91 px, Logo 400 × 63 px bei 72/14, rechts „Zurück zur Startseite“ */
.kopf-unterseite {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 91px;
  background: #fff; border-bottom: 1px solid #ececec;
}
.kopf-unterseite .kopf-innen { height: 90px; align-items: stretch; }
.kopf-unterseite .unter-navi { display: flex; }
.kopf-unterseite .logo { margin-top: 14px; }
.kopf-unterseite .logo img { width: 400px; height: 63px; }
.kopf-unterseite .zurueck-start {
  display: flex; align-items: center; padding: 0 20px;
  color: #5b5e60; text-decoration: none; font: 300 14px/14px var(--schrift-menue); text-transform: uppercase;
}
.kopf-unterseite .zurueck-start:hover, .kopf-unterseite .zurueck-start:focus-visible { color: var(--tuerkis); }
body.unterseite main { padding-top: 91px; }

/* --- Fehlerseite 404 -------------------------------------------------------------- */
/* 1:1 nach der alten Seite (gemessen 09.11.2026): Kopf 83 + 1 px nur mit Logo (bei 82/10), Block 600 px breit
   bei 15 % der Fensterhöhe, Titel 32 px #007e89, Satz 17,6 px #444, Knopf #007e89 mit 5 px Rundung,
   Fußzeile unten am Fensterrand. */
body.fehlerseite { min-height: 100vh; display: flex; flex-direction: column; }
body.fehlerseite main { flex: 1 0 auto; padding-top: 0; }
/* Fehlerseite: Kopf wie die übrigen Unterseiten (Jakob 10.11.2026), vorher nur Logo wie alt */
.fehler-404 { max-width: 600px; margin: 15vh auto 0; padding: 40px 20px; text-align: center; font-weight: 300; }
.fehler-404 h1 { margin: 0 0 15px; font-size: 32px; line-height: 41.6px; font-weight: 400; color: #007e89; }
.fehler-404 p { margin: 0 0 25px; font-size: 17.6px; line-height: 30.8px; color: #444; }
.fehler-404 .knopf-start { display: inline-block; padding: 10px 20px; background: #007e89; color: #fff; text-decoration: none; border-radius: 5px; }
.fehler-404 .knopf-start:hover, .fehler-404 .knopf-start:focus-visible { background: #005f63; color: #fff; }

/* --- Mietliste -------------------------------------------------------------------- */
/* 1:1 nach der alten Seite (gemessen 06.11.2026): Grundschrift Roboto Condensed Light 18,67 px,
   Titel 60 px Thin Türkis in Großbuchstaben, Zeilen #ddffe8 / #ededed, Artikel und Preise 24 px. */
.mietliste { font-family: var(--schrift-schmal); font-size: 18.6667px; font-weight: 300; line-height: 26.25px; color: #777; padding-bottom: 30px; }  /* Jakob: 30 px bis zum Fuß */
.mietliste .behaelter { max-width: 1170px; padding: 0; }
.mietliste-banner { position: relative; height: 246px; margin: 0 -63px; }
@media (max-width: 1295px) { .mietliste-banner { margin: 0; } }  /* sonst ragt der Banner zwischen 992 und 1295 px über den Rand */
.mietliste-banner img { position: absolute; top: 9px; }
.mietliste-banner .banner-links { left: 0; width: 190px; height: 219px; }
.mietliste-banner .banner-siegel { left: 288px; width: 150px; height: 150px; }
.mietliste-banner .banner-rechts { right: 28px; width: 260px; height: 207px; }
.mietliste-banner .banner-titel { position: relative; text-align: center; padding-top: 30px; }  /* Jakob: 30 px zwischen Menü und H1 */
.mietliste-banner .seiten-titel {
  margin: 0 0 20px; font-family: var(--schrift-schmal); font-size: 60px; font-weight: 100; line-height: 66px;
  color: var(--tuerkis); text-transform: uppercase;
}
.mietliste-banner .seiten-titel::after { display: none; }
.mietliste-banner .banner-unterzeile { margin: 0 0 15px; font-size: 24px; line-height: 31.2px; color: #5b5e60; }
.mietliste-banner .banner-unterzeile::after { content: ""; display: block; width: 158px; height: 2px; background: #ececec; margin: 28px auto 0; }

/* Übersicht – zwei Varianten, Wahl in konfiguration.php: darstellung → mietliste_uebersicht = modern | alt */
.kategorien-uebersicht { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.kategorien-uebersicht a { color: #5b5e60; text-decoration: none; text-align: center; }
.kategorien-uebersicht a:hover .kategorie-name, .kategorien-uebersicht a:focus-visible .kategorie-name { color: var(--tuerkis); }

/* Variante „alt“: 1:1 wie die alte Seite (gemessen 09.11.2026): drei Spalten, Rahmen 122 × 122 px mit 6 px Innenabstand,
   Bild 100 px breit oben bündig im eigenen Seitenverhältnis, Name Regular, gepunktete Linie, Zeile 161 px */
.kategorien-alt li { padding: 0 20px; }
.kategorien-alt a { display: flex; flex-direction: column; align-items: center; margin: 6px 2px 0; padding-bottom: 9px; border-bottom: 1px dotted #a6a6a6; }
.kategorien-alt .kategorie-rahmen { display: block; width: 122px; height: 122px; padding: 6px; border: 1px solid #c3c3c3; background: #fff; }
.kategorien-alt img { display: block; width: 100px; height: auto; max-height: 108px; margin: 0 auto; }
.kategorien-alt .kategorie-name { display: block; margin-top: 1px; line-height: 23px; font-weight: 400; }

/* Variante „modern“ (Entscheidung Jakob 09.11.2026): Karten mit hellem Rahmen, gleich hohe weiße Bildfläche 140 px,
   Bild mittig, Name darunter, 15 px innen, 30 px Abstand, Rahmen beim Überfahren türkis. Spaltenzahl aus der Mindestbreite 240 px. */
.kategorien-modern { grid-template-columns: repeat(auto-fill, 240px); justify-content: center; gap: 30px; padding: 0 20px; }  /* Jakob: Boxen fest 240 px, Raster mittig (10.11.2026: auch einspaltig nicht breiter) */
.kategorien-modern li { display: flex; }
.kategorien-modern a { display: flex; flex-direction: column; width: 100%; padding: 15px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; transition: border-color .2s, box-shadow .2s; }
.kategorien-modern a:hover, .kategorien-modern a:focus-visible { border-color: var(--tuerkis); box-shadow: 0 2px 10px rgba(74,154,166,.18); }
.kategorien-modern .kategorie-rahmen { display: flex; align-items: center; justify-content: center; height: 140px; background: #fff; }
.kategorien-modern img { display: block; max-width: 100%; max-height: 140px; width: auto; height: auto; object-fit: contain; }
.kategorien-modern .kategorie-name { display: block; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; line-height: 24px; font-weight: 400; }
.mietliste-suche-global { margin: 50px 20px 0; }
.mietliste-suche-global p { margin: 0 0 4px; }
.mietliste-suche-global label { color: #737373; line-height: 32.67px; }
.mietliste .mietliste-suche-global input { display: inline-block; vertical-align: middle; width: 200px; max-width: 90%; margin-right: 4px; }
.mietliste .mietliste-suche-global .knopf-alt { vertical-align: middle; margin-bottom: 0; }

/* Kategorie: Seitenleiste 293 px, Inhalt 878 px */
.mietliste-raster { display: grid; grid-template-columns: 293px 1fr; align-items: start; }
.mietliste-seite { padding: 0 20px; }
.mietliste-seite .zurueck { margin: 0 0 29px; line-height: 32.67px; }
.mietliste-seite .zurueck a { color: #5b5e60; text-decoration: none; }
.mietliste label { display: block; color: #737373; }
.mietliste select, .mietliste input[type="search"] {
  display: block; width: 100%; height: 28px; padding: 6px; font: 400 12px/normal var(--schrift-menue); color: #737373;  /* wie alt: Roboto 12 px, 6 px Innenabstand, 6 px Rundung */
  background: #fff; border: 1px solid rgba(0,0,0,.133); border-radius: 6px;
}
.mietliste-seite select { margin-bottom: 26px; }
.mietliste-seite input[type="search"] { width: 196px; max-width: 100%; margin: 5px 0 6px; }  /* wie alt */
.kategorien-liste { list-style: none; margin: 0 0 54px; padding: 0; }
.kategorien-liste li { padding: 2px 6px 2px 2px; border-bottom: 1px dotted #a6a6a6; }
.kategorien-liste a { color: #5b5e60; text-decoration: none; }
.kategorien-liste a:hover { color: var(--tuerkis); }
.kategorien-liste a[aria-current="page"] { font-weight: 700; }
.suche-beschriftung { line-height: 32.67px; }
.filter-knoepfe { display: flex; gap: 5px; }
.knopf-alt {
  display: inline-block; padding: 6px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 6px;
  background: var(--tuerkis); color: #000; font: 400 14px/21px Arial, sans-serif; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.knopf-alt:hover, .knopf-alt:focus-visible { background: #3d8691; color: #000; }

.mietliste-inhalt { padding: 0 20px; }
.mietliste-tabelle { width: 100%; border-collapse: separate; border-spacing: 0 0; }
.mietliste-tabelle thead th { padding: 0 0 30px; text-align: left; font-size: 24px; font-weight: 400; line-height: 31.2px; color: #5b5e60; }
.mietliste-tabelle tbody tr:nth-child(odd) { background: #ddffe8; }
.mietliste-tabelle tbody tr:nth-child(even) { background: #ededed; }
.mietliste-tabelle tbody th, .mietliste-tabelle tbody td { padding: 8px 8px 10px; text-align: left; vertical-align: top; font-weight: 300; }  /* wie alt 64 px je Zeile */
.mietliste-tabelle th, .mietliste-tabelle td { width: 50%; }
.mietliste-tabelle tbody th { padding-right: 0; }
.artikel-name, .artikel-preis { display: block; font-size: 24px; font-weight: 400; line-height: 31.2px; color: #5b5e60; margin-bottom: 15px; }
/* Unter 992 px wie alt: Name 50 % breit, Preis daneben; passt er nicht daneben, rutscht er darunter (alt per float). */
.artikel-zeile { display: block; margin-top: -6px; margin-bottom: 9px; color: #000; }
.keine-artikel { margin-top: 10px; }
.mietliste-hinweise { margin-top: 28px; }
.mietliste-hinweise p { margin: 0 0 28px; color: #737373; line-height: 32.67px; }
.mietliste-hinweise a { color: #5b5e60; text-decoration: none; }

/* Befund 7 (Messung 5), Entscheidung Jakob: Kategorieseite im 15/30-Raster statt 1:1 – 30 px zwischen den Blöcken,
   15 px innen (Tabellenzeilen, Feld zu Knöpfen, Tabellenkopf). Gilt auf allen Geräten. */
.mietliste-seite .zurueck { margin-bottom: 30px; }
.mietliste-seite select { margin-bottom: 30px; }
.kategorien-liste { margin-bottom: 30px; }
.mietliste-seite input[type="search"] { margin: 5px 0 15px; }
.mietliste-seite .filter-knoepfe .knopf-alt { margin-bottom: 0; }
.mietliste-raster { row-gap: 30px; }  /* einspaltig: 30 px zwischen Filter und Tabelle */
.mietliste-tabelle thead th { padding-bottom: 15px; }
.mietliste-tabelle tbody th, .mietliste-tabelle tbody td { padding: 15px; }
.mietliste-tabelle tbody th { padding-right: 0; }
.artikel-name, .artikel-preis { margin-bottom: 0; }
.mietliste-hinweise { margin-top: 30px; }
.mietliste-hinweise p { margin-bottom: 30px; }

@media (max-width: 991px) {
  .mietliste-banner { height: auto; margin: 0; }
  .mietliste-banner img { display: none; }
  .mietliste-raster { grid-template-columns: 1fr; }
  .kategorien-alt { grid-template-columns: repeat(2, 1fr); }
  .mietliste-tabelle tbody tr { display: flex; flex-wrap: wrap; padding: 15px; row-gap: 15px; }
  .mietliste-tabelle tbody th, .mietliste-tabelle tbody td { display: block; padding: 0; width: auto; }
  .mietliste-tabelle tbody th { flex: 0 0 50%; }
  .mietliste-tabelle tbody td { flex: 0 1 auto; }
  .mietliste-tabelle tbody td .artikel-preis { margin-bottom: 0; }
  .mietliste-tabelle thead tr { display: block; }
  .mietliste-tabelle thead th { display: block; width: auto; }
}
@media (max-width: 560px) { .kategorien-alt { grid-template-columns: 1fr; } }

/* --- Fuß --------------------------------------------------------------------------- */
/* 1:1 nach der alten Seite (gemessen 06.11.2026): Bildfläche mit 70 % Schwarz, 100 px oben,
   Kontaktspalte bei x 47 (425 px), Öffnungszeiten bei x 605 (230 px), Logoband 30 % Schwarz,
   Fußzeile 95 % Schwarz mit Links 12 px Türkis. */
.fuss { font-family: var(--schrift-schmal); font-size: 15px; font-weight: 300; line-height: 26.25px; color: #a0a0a0; }
/* Fußbild (Jakob 10.11.2026). Rechner: Hausfoto wie alt, fest mit Parallax (menu.js setzt --fuss-y).
   Tablet und Handy: Der Fuß ist dort fast quadratisch bzw. hoch; das Foto (1024 × 487) wiederholte sich auf der
   alten Seite (Haus zweimal untereinander) bzw. zeigte nur einen schmalen Streifen. Deshalb dasselbe Foto nach oben
   um Himmel verlängert (fuss-hintergrund-hoch.jpg, 1024 × 1100, Himmel aus der Farbe am oberen Bildrand),
   unten ausgerichtet, ohne Wiederholung und ohne Parallax. */
.fuss-bild {
  padding-top: 100px;
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../../bilder/seite/fuss-hintergrund.jpg") 50% var(--fuss-y, 50%) / cover;
  background-attachment: scroll, fixed;
}
@media (max-width: 991px) {
  .fuss-bild {
    background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../../bilder/seite/fuss-hintergrund-hoch.jpg") 50% 100% / cover no-repeat;
    background-attachment: scroll;
  }
}
.fuss-spalten { display: grid; grid-template-columns: 425px 230px; column-gap: 133px; max-width: 1170px; margin: 0 auto; padding: 0 20px 25px; min-height: 375px; }  /* wie alt: Kontaktblock 350 px + 25 px */
.fuss-bild p { margin: 0 0 22.5px; }
.fuss-kontakt p, .kontakt-zeilen li { font-size: 18.6667px; }
.fuss-kontakt p { padding-bottom: 27px; line-height: 27.33px; }  /* alt mit Leerzeile unter dem Auskunftstext */
.kontakt-zeilen { list-style: none; margin: 0; padding: 0; }
.kontakt-zeilen li { min-height: 27px; line-height: 27.25px; }
.fuss-bild a { color: #5b5e60; font-size: 18.6667px; text-decoration: none; }
.fuss-bild a:hover, .fuss-bild a:focus-visible { color: var(--tuerkis); }
.fuss-zeiten h2 { margin: 0 0 15px; font-family: var(--schrift-schmal); font-size: 20px; font-weight: 400; line-height: 26px; color: #5b5e60; }
.sozial { margin: 55px 0 0; }
.fuss-logoband { display: flex; align-items: center; justify-content: center; height: 267px; background: rgba(0,0,0,.3); }
.fuss-logoband img { width: 266px; height: 42px; }

.fuss-unten { background: rgba(0,0,0,.95); border-top: 1px solid rgba(207,207,207,.12); padding: 37px 0; color: #ececec; font-size: 12px; font-weight: 400; line-height: 26.25px; }
.fuss-bild + .fuss-unten { background: rgba(0,0,0,.95); }
body.unterseite .fuss-unten { background: #0d0d0d; }
.fuss-unten-innen { max-width: 1170px; margin: 0 auto; display: grid; grid-template-columns: 390px 488px 292px; }
.fuss-unten-innen p { margin: 0; padding: 0 20px; }
.fuss-links { text-align: center; }
.fuss-erstellt { text-align: right; }
.fuss-unten a, .fuss-unten .link-knopf { color: var(--tuerkis); text-decoration: none; font: inherit; }
.fuss-unten a:hover, .fuss-unten a:focus-visible, .fuss-unten .link-knopf:hover { text-decoration: underline; }
.fuss-unten .link-knopf { background: none; border: 0; padding: 0; cursor: pointer; }

@media (max-width: 1200px) {
  .fuss-spalten { grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 0 20px 25px; }
  .fuss-unten-innen { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .fuss-links, .fuss-erstellt { text-align: center; }
}
@media (max-width: 700px) { .fuss-spalten { grid-template-columns: 1fr; } }

/* --- Handy und Tablet ---------------------------------------------------------------- */
/* 1:1 nach der alten Seite bei 390 px (gemessen 06.11.2026): weißer Kopf 70 px mit farbigem Logo 319 × 50,
   Menüknopf 32 × 40 Türkis, aufklappendes Menü rechts mit türkisgrünen Knöpfen, Slider 291 px,
   Team mit kleinem Foto und Lebenslauf, Teaser einspaltig. */
@media (min-width: 768px) { .team-mehr { display: none; } }

@media (max-width: 991px) {

  body.startseite .slider { height: var(--h, 291px); }
  .slider-steuerung { top: auto; bottom: 12px; }
  .slider-steuerung button { width: 30px; height: 30px; font-size: 16px; }
}

@media (max-width: 767px) {
  .abschnitt .behaelter { padding: 0 20px; }
  .abschnitt-verkauf .abschnitt-titel { max-width: none; }

  /* Team auf dem Handy 1:1 wie alt (gemessen 390 px): Foto 157 × 169 mit Rand, Name 35 px tiefer daneben,
     Kasten mit Lebenslauf 14 pt #333, Original-Symbole 40 × 40 (bilder/team), 60 px zwischen den Personen */
  .team { flex-direction: column; gap: 60px; }
  .team li { width: auto; display: grid; grid-template-columns: 158px 1fr; column-gap: 0; align-items: start; }
  .team img { width: 157px; height: 169px; border: 1px solid #e0e0e0; }
  .team-text { margin: 35px 0 0; padding: 25px 0 25px 20px; background: none; border: 1px solid transparent; }
  .team-mehr { grid-column: 1 / -1; margin-top: 9px; padding: 20px 25px; background: #fcfcfc; border: 1px solid #e0e0e0; }
  .team-mehr p { margin: 0 0 21px; font-size: 18.6667px; font-weight: 300; line-height: 26.5px; color: #333; }
  .team li:nth-child(2) .team-mehr p:first-child { line-height: 28px; margin-bottom: 30px; }  /* alt anderer Inline-Stil im zweiten Text: 28 px Zeilenabstand */
  .team-mehr .team-links { display: flex; gap: 10px; margin: 0; padding-bottom: 26px; }
  .team-links a { display: block; width: 40px; height: 40px; background: center / 40px 40px no-repeat; }
  .team-links .tl-mail { background-image: url("/bilder/team/brief-blau.png"); }
  .team-links .tl-mail:hover, .team-links .tl-mail:focus-visible { background-image: url("/bilder/team/brief-gruen.png"); }
  .team-links .tl-facebook { background-image: url("/bilder/team/fb-blau.png"); }
  .team-links .tl-facebook:hover, .team-links .tl-facebook:focus-visible { background-image: url("/bilder/team/fb-gruen.png"); }
  .abschnitt-ueber-uns-service { padding-bottom: 110px; }

  .teaser { flex-direction: column; align-items: center; gap: 34.5px; }  /* mittig (Entscheidung Jakob 09.11.2026), Abstand wie alt */
  .teaser img { width: 212px; height: 292px; }
  .kontakt-spalten { grid-template-columns: 1fr; gap: 20px; }
  .nach-oben { display: none; }

  .fuss-spalten { grid-template-columns: 1fr; padding: 0 10px 25px; row-gap: 30px; }
  .fuss-unten-innen { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .fuss-links, .fuss-erstellt, .fuss-copyright { text-align: center; }
}

@media (max-width: 991px) {
  /* Befund 1 (Messung 5), Entscheidung Jakob: auf Tablet und Handy 30 px zwischen Menü und Titel (alt 100 px, zu viel) */
  .abschnitt-seite, .seite-impressum, .seite-datenschutz, .seite-barrierefreiheit { padding-top: 30px; }
  .mietliste-banner .banner-titel { padding-top: 30px; }
  .mietliste-banner .seiten-titel { margin-top: 0; }
  .seiten-inhalt { margin-top: 30px; }  /* Jakob: auch unter dem Titel 30 statt 70 px */
  .mietliste-raster { margin-top: 30px; }
  .mietliste-banner { margin-bottom: 30px; }
  /* Befund 11 (Messung 5): Fehlerseite auf Tablet und Handy mit demselben Kopf wie die Unterseiten (ohne Menüknopf) */
}
@media (max-width: 767px) {
  .abschnitt-seite .seiten-titel { hyphens: auto; overflow-wrap: anywhere; }
  .abschnitt-titel { hyphens: auto; }
  /* Titel 30 px unter dem Menü (Befund 1, Messung 5); Linie 28 px unter „Artikel“ wie alt, 30 px bis „zurück zur Übersicht“ (Jakob) */
  .mietliste-banner .seiten-titel { margin-top: 0; }
  .mietliste-banner .banner-unterzeile::after { margin-top: 28px; }
  .mietliste-raster { margin-top: 30px; }
  .mietliste-seite, .mietliste-inhalt { padding: 0 20px; }  /* wie alt 20 px Rand */
}

@media print {
  .kopf, .slider-steuerung, .karte, .menue-knopf, .mietliste-filter { display: none !important; }
  body:not(.startseite) main { padding-top: 0; }
}

/* Freitextsuche der Mietliste-Übersicht in der Variante „modern“: eigene Box, so breit wie die Boxenreihe darüber
   (Containerbreite wie das Raster), Beschriftung oben, Feld und Knopf in einer Zeile, 15 px innen, 30 px Abstand */
.kategorien-modern + .mietliste-suche-global { margin: 30px 0 0; padding: 0 20px; }
.kategorien-modern + .mietliste-suche-global .suche-box { padding: 15px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; }
.kategorien-modern + .mietliste-suche-global p { margin: 0 0 10px; }
.kategorien-modern + .mietliste-suche-global .suche-zeile { display: flex; gap: 15px; }
.mietliste .kategorien-modern + .mietliste-suche-global input { flex: 1 1 auto; width: auto; max-width: none; height: 35px; margin: 0; }
.mietliste .kategorien-modern + .mietliste-suche-global .knopf-alt { flex: none; margin: 0; }
@media (max-width: 559px) { .kategorien-modern + .mietliste-suche-global .suche-zeile { flex-direction: column; } .mietliste .kategorien-modern + .mietliste-suche-global .knopf-alt { align-self: flex-start; } }

/* Mietliste-Banner zwischen 992 und 1295 px: Siegel links neben den Titel statt darüber */
@media (min-width: 992px) and (max-width: 1295px) { .mietliste-banner .banner-siegel { left: calc(50% - 300px); } }

/* Lange Titel wie „Barrierefreiheitserklärung“ auch auf dem Tablet trennen statt über den Rand (alt lief er über) */
@media (max-width: 991px) { .abschnitt-seite .seiten-titel { hyphens: auto; overflow-wrap: anywhere; } }

/* --- Kopf und Menü auf Tablet und Handy (Entscheidung Jakob 09.11.2026, neu gestaltet) ----------------------
   Weiß, 64 px, fest oben, feine Linie; Logo 40 px hoch links, Menüknopf (drei türkise Linien, offen ein X) rechts.
   Beim Scrollen türkis mit weißem Logo und weißem Knopf. Menü klappt über die volle Breite als Liste auf,
   15/30-Raster, aktiver Punkt türkis, Untermenü eingerückt. Gleiches Menü auf Startseite und Unterseiten. */
.kopf-unterseite .hauptmenue, .kopf-unterseite .menue-knopf { display: none; }
.kopf-unterseite .logo .logo-weiss { display: none; }
@media (max-width: 991px) {
  .kopf, .kopf-unterseite, .kopf.ist-geschrumpft, .kopf-unterseite.ist-geschrumpft {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; padding: 0;
    background: #fff; border-bottom: 1px solid #e6e6e6; box-shadow: none; transition: background-color .25s, border-color .25s;
  }
  .kopf.ist-geschrumpft, .kopf-unterseite.ist-geschrumpft { background: var(--tuerkis); border-bottom-color: var(--tuerkis); }
  .kopf .kopf-innen, .kopf-unterseite .kopf-innen, .kopf.ist-geschrumpft .kopf-innen {
    position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    height: 63px; min-height: 0; max-width: none; margin: 0; padding: 0 20px; gap: 15px;
  }
  .kopf .logo, .kopf-unterseite .logo, .kopf.ist-geschrumpft .logo { display: block; margin: 0; height: auto; }
  .kopf .logo img, .kopf-unterseite .logo img, .kopf.ist-geschrumpft .logo img { width: auto; height: 40px; max-width: calc(100vw - 100px); object-fit: contain; object-position: left; }
  .kopf .logo .logo-farbig, .kopf-unterseite .logo .logo-farbig { display: block; }
  .kopf .logo .logo-weiss, .kopf-unterseite .logo .logo-weiss { display: none; }
  .kopf.ist-geschrumpft .logo .logo-farbig, .kopf-unterseite.ist-geschrumpft .logo .logo-farbig { display: none; }
  .kopf.ist-geschrumpft .logo .logo-weiss, .kopf-unterseite.ist-geschrumpft .logo .logo-weiss { display: block; }
  .kopf-unterseite .zurueck-start { display: none; }

  /* Menüknopf: drei Linien, offen ein X */
  .kopf .menue-knopf, .kopf-unterseite .menue-knopf {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0;
    background: none; border: 0; border-radius: 4px; cursor: pointer;
  }
  .menue-knopf .menue-knopf-linien, .menue-knopf .menue-knopf-linien::before, .menue-knopf .menue-knopf-linien::after {
    width: 24px; height: 2px; background: var(--tuerkis); border-radius: 1px; transition: transform .2s, background-color .2s, top .2s;
  }
  .menue-knopf .menue-knopf-linien::before { top: -7px; } .menue-knopf .menue-knopf-linien::after { top: 7px; }
  .ist-geschrumpft .menue-knopf .menue-knopf-linien, .ist-geschrumpft .menue-knopf .menue-knopf-linien::before, .ist-geschrumpft .menue-knopf .menue-knopf-linien::after { background: #fff; }
  .menue-knopf[aria-expanded="true"] .menue-knopf-linien { background: transparent !important; }
  .menue-knopf[aria-expanded="true"] .menue-knopf-linien::before { top: 0; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-knopf-linien::after { top: 0; transform: rotate(-45deg); }
  .menue-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* Menü als Liste über die volle Breite */
  .kopf .hauptmenue, .kopf-unterseite .hauptmenue {
    display: none; position: absolute; top: 63px; left: 0; right: 0; width: auto; margin: 0; padding: 0 0 15px;
    max-height: calc(100vh - 64px); overflow-y: auto; background: #fff; border: 0; border-bottom: 1px solid #e6e6e6;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }
  .kopf .hauptmenue.ist-offen, .kopf-unterseite .hauptmenue.ist-offen { display: block; }
  .hauptmenue > ul, .hauptmenue.ist-offen > ul { display: block; gap: 0; margin: 0; padding: 0; }
  .hauptmenue > ul > li, .hauptmenue.ist-offen > ul > li { margin: 0; border-bottom: 1px solid #eee; }
  .hauptmenue > ul > li > a, .kopf.ist-geschrumpft .hauptmenue > ul > li > a, .hauptmenue.ist-offen > ul > li > a {
    display: block; padding: 15px 20px; margin: 0; border: 0; border-radius: 0; background: none; color: #5b5e60;
    font: 400 15px/20px var(--schrift-menue); text-transform: uppercase; text-align: left;
  }
  .hauptmenue > ul > li > a:hover, .hauptmenue > ul > li > a:focus-visible, .kopf.ist-geschrumpft .hauptmenue > ul > li > a:hover,
  .hauptmenue > ul > li:focus-within > a, .kopf.ist-geschrumpft .hauptmenue > ul > li:focus-within > a { background: #f5fafb; color: var(--tuerkis); }
  .hauptmenue > ul > li > a.ist-aktiv, .hauptmenue > ul > li > a[aria-current="page"],
  .kopf.ist-geschrumpft .hauptmenue > ul > li > a.ist-aktiv, .kopf.ist-geschrumpft .hauptmenue > ul > li > a[aria-current="page"] { background: none; color: var(--tuerkis); box-shadow: inset 4px 0 0 var(--tuerkis); }
  .hauptmenue .hat-untermenue > a::after { background: currentColor; }
  .hauptmenue .untermenue, .hauptmenue.ist-offen .untermenue { display: block; position: static; width: auto; margin: 0 0 10px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .hauptmenue .untermenue li, .hauptmenue.ist-offen .untermenue li { margin: 0; }
  .hauptmenue .untermenue a, .hauptmenue.ist-offen .untermenue a {
    display: block; padding: 8px 20px 8px 40px; border-radius: 0; background: none; color: #5b5e60; text-align: left;
    font: 400 15px/20px var(--schrift-menue); text-transform: none;
  }
  .hauptmenue .untermenue a:hover, .hauptmenue .untermenue a:focus-visible, .hauptmenue .untermenue a[aria-current="page"] { background: none; color: var(--tuerkis); }

  /* Inhalt beginnt unter dem 64-px-Kopf */
  body.unterseite main { padding-top: 64px; }
  body.startseite main { padding-top: 64px; }
  body.startseite .slider { margin-top: 0; }
}

/* Titel-Skala (Entscheidung Jakob 09.11.2026): alle Titel (H1 der Unterseiten, Abschnittstitel der Startseite,
   Mietliste) gleich groß je Gerät – Rechner 60 px, Tablet 48 px, Handy 36 px; lange Wörter werden getrennt.
   Startseiten-Abschnitte oben 100 / 80 / 60 px. */
.abschnitt-titel, .abschnitt-seite .seiten-titel, .mietliste-banner .seiten-titel { font-size: 60px; line-height: 66px; }
@media (max-width: 991px) {
  .abschnitt-titel, .abschnitt-seite .seiten-titel, .mietliste-banner .seiten-titel { font-size: 48px; line-height: 53px; hyphens: auto; overflow-wrap: anywhere; }
  .abschnitt:not(.abschnitt-seite) { padding-top: 80px; }
}
@media (max-width: 767px) {
  .abschnitt-titel, .abschnitt-seite .seiten-titel, .mietliste-banner .seiten-titel { font-size: 36px; line-height: 40px; }
  .titel-zeile { margin-bottom: 10px; }
  .abschnitt:not(.abschnitt-seite) { padding-top: 60px; }
}

/* Containerbreite auch für Kopf (Jakob: „Container nicht gleich“): am Rechner Logo und Menü in derselben Breite wie der
   Inhalt (155–1285 px bei 1440), Menüpunkte dafür 17 statt 20 px Innenabstand, ohne Umbruch. */
@media (min-width: 992px) {
  .kopf .kopf-innen, .kopf-unterseite .kopf-innen { max-width: 1170px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
  .hauptmenue > ul > li > a { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .hauptmenue > ul > li > a { padding-left: 17px; padding-right: 17px; }
  .hauptmenue .hat-untermenue > a, .kopf.ist-geschrumpft .hauptmenue .hat-untermenue > a { padding-right: 12px; }
}
/* zwischen 992 und 1199 px: kleineres Logo und engere Menüpunkte, damit beides in den Container passt */
@media (min-width: 992px) and (max-width: 1199px) {
  .hauptmenue > ul > li > a { padding-left: 9px; padding-right: 9px; }
  .hauptmenue .hat-untermenue > a, .kopf.ist-geschrumpft .hauptmenue .hat-untermenue > a { padding-right: 6px; }
  .kopf .logo img { width: 240px; height: 38px; }
}

/* Karte nach Zustimmung wie alt 450 px hoch, ohne Innenabstand und Hintergrundbild */
.karte.ist-geladen { height: 450px; padding: 0; background: none; box-shadow: none; }

/* Karte schlicht (Jakob 09.11.2026): 450 px, Hinweis und Knopf mittig; Google erst nach Klick.
   Hintergrund: Stadtplan der alten Kartenvorschau (Jakob 10.11.2026, Bild aus jmggooglemapsdsgvo, GPL v2+), ohne Stecknadel;
   Text in hellem Kasten, damit er auf dem Plan lesbar bleibt. */
.karte.karte-schlicht { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; height: 450px; min-height: 0; padding: 30px 20px; background: #eee url("/bilder/karte/karte-vorschau.png") 50% 50% / cover no-repeat; border: 0; border-top: 2px solid #4a9aa6; border-radius: 0; box-shadow: none; text-align: center; }
.karte-schlicht p { margin: 0; max-width: 560px; padding: 12px 20px; border-radius: 4px; background: rgba(255,255,255,.92); font-size: 18.6667px; line-height: 30px; color: #5b5e60; }
.karte-schlicht a { color: #2c7783; }
.knopf-karte { padding: 10px 20px; border: 0; border-radius: 4px; background: #2c7783; color: #fff; font: 400 15px/20px var(--schrift-menue); cursor: pointer; }
.knopf-karte:hover, .knopf-karte:focus-visible { background: #1f5d67; }
.karte.ist-geladen { display: block; padding: 0; min-height: 0; border: 0; border-top: 2px solid #4a9aa6; border-radius: 0; }  /* Höhe 450 und Linie oben in beiden Zuständen (Jakob 09.11.2026) */

/* --- Änderungen 10.11.2026 (Jakob) ------------------------------------------------ */
/* Abstand Inhalt → Fuß auf Unterseiten und Mietliste: PC 90 px (3 × 30), Tablet 60 px (2 ×), Handy 45 px (1,5 ×) */
.abschnitt-seite, .mietliste { padding-bottom: 90px; }
@media (max-width: 991px) { .abschnitt-seite, .mietliste { padding-bottom: 60px; } }
@media (max-width: 767px) { .abschnitt-seite, .mietliste { padding-bottom: 45px; } }

/* „zurück zur Übersicht“ mit Rahmen wie die Kategorie-Kacheln */
.mietliste-seite .zurueck a { display: inline-block; padding: 6px 15px; line-height: 24px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; transition: border-color .2s, color .2s; }
.mietliste-seite .zurueck a:hover, .mietliste-seite .zurueck a:focus-visible { border-color: var(--tuerkis); color: var(--tuerkis); }

/* Mietliste-Banner auf dem Tablet wie alt (480–991 px): Männchen links bei 5 %, Siegel bei 70 %, Mann rechts bleibt aus */
@media (min-width: 480px) and (max-width: 991px) {
  .mietliste-banner { min-height: 249px; }
  .mietliste-banner .banner-links, .mietliste-banner .banner-siegel { display: block; position: absolute; top: 30px; }
  .mietliste-banner .banner-links { left: 5%; width: 190px; height: 219px; }
  .mietliste-banner .banner-siegel { left: 70%; width: 150px; height: 150px; }
}
@media (min-width: 480px) and (max-width: 700px) {
  .mietliste-banner { min-height: 203px; }
  .mietliste-banner .banner-links { width: 150px; height: 173px; }
}
@media (min-width: 480px) and (max-width: 499px) {
  .mietliste-banner { min-height: 168px; }
  .mietliste-banner .banner-links { width: 120px; height: 138px; }
  .mietliste-banner .banner-siegel { width: 120px; height: 120px; }
}

/* Suchkasten unter den Kacheln genau so breit wie das Kachelraster (Jakob 10.11.2026):
   Raster = n × 240 px + (n − 1) × 30 px, n ergibt sich aus der Breite des Behälters (abzüglich 2 × 20 px Rand) */
.mietliste .behaelter { container-type: inline-size; }
.mietliste .kategorien-modern + .mietliste-suche-global { width: 240px; margin: 30px auto 0; padding: 0; }
@container (min-width: 550px)  { .mietliste .kategorien-modern + .mietliste-suche-global { width: 510px; } }
@container (min-width: 820px)  { .mietliste .kategorien-modern + .mietliste-suche-global { width: 780px; } }
@container (min-width: 1090px) { .mietliste .kategorien-modern + .mietliste-suche-global { width: 1050px; } }

/* Impressum und Datenschutz kompakter (Jakob 10.11.2026, Befund 13): Zeilenhöhe 30 statt 32,7 px, Absätze 15 statt 28 px.
   Barrierefreiheit bleibt wie bisher. */
.seite-impressum .seiten-inhalt, .seite-datenschutz .seiten-inhalt { line-height: 30px; }
.seite-impressum .seiten-inhalt p, .seite-datenschutz .seiten-inhalt p { margin-bottom: 15px; }

/* Konditionen auf Tablet und Handy (Jakob 10.11.2026): beide Preistabellen volle Textbreite, Preise an derselben Kante;
   6 px zwischen den Positionen, damit umbrochene Positionen als eine erkennbar bleiben */
@media (max-width: 991px) {
  .seiten-inhalt table { width: 100%; }
  .seiten-inhalt td { padding-bottom: 6px; }
}

/* Konditionen wie alt (Jakob 10.11.2026, „Ziffern immer untereinander“): beide Preistabellen gleich breit wie alt (598 px,
   gemessen 1440 und 768 px), Preise rechtsbündig in derselben Spalte; schmaler als 598 px volle Breite */
.seiten-inhalt table { width: 100%; max-width: 598px; }

/* Karte: Text der alten Seite in einem hellen Kasten (Jakob 10.11.2026), Knopf „Karte laden (Google Maps)“ bleibt */
.karte-schlicht .karte-text { max-width: 760px; padding: 15px 20px; border-radius: 4px; background: rgba(255,255,255,.92); }
.karte-schlicht .karte-text p { max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; }
.karte-schlicht .karte-text .karte-titel { margin-bottom: 10px; font-weight: 400; color: #222; }