/* ==========================================================================
   Design "Klar und modern" – eigenes Erscheinungsbild der Website
   Wird zusaetzlich zu website.css geladen (Einstellung "design" = modern oder ?design=modern)
   und legt Farben, Schrift, Formen und Abstaende neu fest.

   Grundsaetze: viel Weiss, ruhige Grautoene, Rot nur fuer Handlungen und Akzente,
   eine Schrift (Inter, SIL Open Font License, lokal), feine Linien statt Farbflaechen,
   einheitliche Rundungen (8 px Knoepfe, 14 px Karten).
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter/inter-latin-700.woff2") format("woff2"); }

:root {
  --rot: #d0101a;               /* Markenrot, etwas ruhiger */
  --rot-dunkel: #a50d15;
  --rot-hell: #fdeced;
  --schwarz: #16181d;           /* Text */
  --text-2: #4a4f59;            /* Nebentext */
  --text-3: #6b717c;
  --weiss: #ffffff;
  --grau: #f5f5f3;              /* Flaechen */
  --hellgrau: #fafaf9;
  --linie: #e6e4e0;             /* Linien und Rahmen */
  --dunkelgrau: #2a2e36;

  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --schrift-titel: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --radius-knopf: 8px;
  --radius-karte: 14px;
  --knopf-innen: 0.7rem 1.35rem;
  --schatten: 0 1px 2px rgba(22, 24, 29, 0.04), 0 4px 16px rgba(22, 24, 29, 0.06);
  --schatten-hover: 0 2px 4px rgba(22, 24, 29, 0.06), 0 12px 32px rgba(22, 24, 29, 0.10);
  --kopf-hoehe: 5rem;
}

/* ---------------------------------------------------------------- Grundlagen und Schrift */
body { letter-spacing: 0; color: var(--schwarz); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h1, .h1 { font-weight: 700; letter-spacing: -0.03em; }
h4, .h4, h5, .h5 { font-weight: 600; letter-spacing: -0.01em; }
p, li, blockquote, .item__content__text, .text, label, dd, dt { line-height: 1.6; }
.tagline, h1.tagline, h2.tagline, h3.tagline {
  font-family: var(--schrift); font-size: var(--text-klein); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rot);
}
.banner__content .tagline, .section--form .tagline, .bg--dark .tagline { color: #ffb3b6; }
p.tagline, .stars.tagline { letter-spacing: 0.02em; }
a { font-weight: 600; }
.ot-article__text a:not(.button) { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Ueberschriften-Symbol: statt Logo-Zeichen ein kurzer roter Strich darueber */
.intro:not(.noHeadingIcon) .ot-article__heading:first-of-type .heading:first-of-type,
.headingIcon .ot-article__heading:first-of-type .heading:first-of-type { display: block; }
.intro:not(.noHeadingIcon) .ot-article__heading:first-of-type .heading:first-of-type::before,
.headingIcon .ot-article__heading:first-of-type .heading:first-of-type::before {
  -webkit-mask: none; mask: none; width: 2.5rem; height: 3px; aspect-ratio: auto; border-radius: 2px;
  background-color: var(--rot); margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------- Flaechen */
.bg { background-color: var(--grau); }
.bg--dark { background-color: var(--dunkelgrau); }
.bg--accent { background-color: var(--rot); }
.darken::after { background-color: #16181d; opacity: 0.35; }

/* ---------------------------------------------------------------- Knoepfe */
.button { font-weight: 600; letter-spacing: 0; border-radius: var(--radius-knopf); }
.button--solid { font-weight: 600; }
.button--solid::before { background-color: var(--rot); }
.button--solid:hover::before { filter: none; background-color: var(--rot-dunkel); }
/* Auf Bildern und dunklen Flaechen bleibt der Hauptknopf rot (nicht weiss) */
.section--banner .button--solid, .bg--dark .button--solid { color: var(--weiss); }
.section--banner .button--solid::before, .bg--dark .button--solid::before { background-color: var(--rot); }
.section--banner .button--solid:hover::before, .bg--dark .button--solid:hover::before { background-color: var(--rot-dunkel); }
.bg--accent .button--solid { color: var(--rot); }
.button--border { border: 1px solid var(--linie); box-shadow: none; background: var(--weiss); color: var(--schwarz); }
.button--border:hover { background-color: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.region-wrapper .intro .button--border, .bg--dark .button--border { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--weiss); }
.button--text { font-weight: 600; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- Kopfzeile */
.site__header { border-bottom: 1px solid var(--linie); background-color: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); }
.header__logo, .header__logo img { height: 56px; }
.header__logo { margin: 0; }
.site__header .nav__bar .button--text { font-size: calc(var(--text) - 0.05rem); font-weight: 500; color: var(--text-2); }
.site__header .nav__bar .button--text:hover { color: var(--schwarz); }
.site__header .flex-column .button--text p { font-size: var(--text-klein); color: var(--text-2); }
.site__header .flex-column .button--text i { color: var(--rot); }
/* Menueknopf: schlicht, ohne schwarzen Kreis */
.nav__button::after { background-color: transparent; border: 1px solid var(--linie); }
.nav__button:hover::after { border-color: var(--schwarz); }
.nav__button__icon { background-color: var(--schwarz); height: 2px; border-radius: 2px; }
.nav__button { width: 46px; padding: 12px; }
.nav__button__icon:not(:last-of-type) { margin-bottom: 5px; }
.js-nav-open .nav__button__icon:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.js-nav-open .nav__button__icon:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-navigation__button { background-color: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten-hover); }

/* Menue-Ueberlagerung: helle Spalten statt roter Bloecke */
.site__navigation { background-color: rgba(250, 250, 249, 0.98); }
.nav__site { gap: 12px; }
.nav__site > li {
  background-color: var(--weiss); color: var(--schwarz); border: 1px solid var(--linie); border-radius: var(--radius-karte);
  padding: calc(var(--abstand) * 0.9);
}
.nav__site > li > a, .nav__site > li > span {
  font-size: calc(var(--text) + 0.15rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.6rem;
}
.nav__site > li > a:hover { color: var(--rot); }
.nav__site__sub li { margin-bottom: 2px; }
.nav__site__sub a { font-weight: 400; color: var(--text-2); }
.nav__site__sub a:hover { color: var(--rot); text-decoration: none; }
@media (min-width: 48rem) { .nav__site > li { flex-basis: calc(50% - 6px); } }
@media (min-width: 64rem) { .nav__site > li { flex-basis: calc(33.334% - 8px); } }
@media (min-width: 75rem) { .nav__site > li { flex-basis: calc(25% - 9px); } }

/* ---------------------------------------------------------------- Kopfbilder */
.banner--box, .banner { min-height: 520px; }
.section--banner .darken::after {
  background: linear-gradient(90deg, rgba(16, 18, 22, 0.82) 0%, rgba(16, 18, 22, 0.55) 45%, rgba(16, 18, 22, 0.15) 100%);
  opacity: 1;
}
@media (max-width: 48rem) { .section--banner .darken::after { background: rgba(16, 18, 22, 0.6); } }
.banner__content .heading, .banner__content h1:not(.tagline), .banner__content h2 { font-weight: 700; letter-spacing: -0.03em; }
.banner__content p { color: rgba(255, 255, 255, 0.88); max-width: 40rem; }

/* ---------------------------------------------------------------- Karten */
.item--rounded, .item--news, .item--occasions, .item--services, .item--properties, .item--awards, .item--values,
.item--faq, .item--regions .item__content, .item--team, .item--locations {
  border-radius: var(--radius-karte);
}
.item--news, .item--occasions, .item--properties, .item--services {
  background: var(--weiss); border: 1px solid var(--linie); transition: box-shadow var(--zeit) ease, transform var(--zeit) ease;
}
.item--news:hover, .item--occasions:hover, .item--properties:hover, .item--services:hover { box-shadow: var(--schatten-hover); transform: translateY(-2px); }
.item--news .item__content, .item--occasions .item__content, .item--properties .item__content, .item--services .item__content {
  padding: var(--abstand-halb) calc(var(--abstand-halb) * 1.2) calc(var(--abstand-halb) * 1.2);
}
.item--services .item__content { padding: calc(var(--abstand-halb) * 1.2); }
.item--link:has(a:hover) .item__media:not(.logo) img { transform: scale(1.03); }
.item__content .heading:hover { color: var(--rot); }

/* Immobilien: Etikett als Pille oben links */
.item--properties .item__media .overlay {
  top: 12px; left: 12px; right: auto; bottom: auto; padding: 0.3rem 0.8rem; border-radius: 999px;
  font-size: var(--text-klein); font-weight: 600; letter-spacing: 0.03em; background-color: var(--rot);
}
.item--properties.item--reference .item__media .overlay { background-color: var(--schwarz); }
.item--properties p.tagline { color: var(--text-3); font-family: var(--schrift); text-transform: none; letter-spacing: 0; font-weight: 500; }
.item--properties ul li { color: var(--text-2); }
.item--properties .button { margin-top: 0.75rem; }
.item--top-property { border-radius: var(--radius-karte); }

/* Werte, Auszeichnungen, Regionen, Team */
.item--values { background-color: var(--weiss); border: 1px solid var(--linie); }
.item--values .item__content::before { background-color: var(--rot); width: 40px; height: 40px; }
.item--awards.bg--light { border: 1px solid var(--linie); }
.item--regions .item__content { box-shadow: var(--schatten); }
.item--team .item__media img { border-radius: var(--radius-karte); }

/* FAQ-Karten */
.item--faq.bg { background-color: var(--weiss); border: 1px solid var(--linie); }
.item--faq.hide .item_replace::after { background-image: linear-gradient(to right, transparent 33.33%, var(--weiss)); }

/* ---------------------------------------------------------------- Kundenstimmen: weisse Karten statt roter Flaechen */
.item--feedback.bg--accent { background-color: var(--weiss); color: var(--schwarz); border: 1px solid var(--linie); border-radius: var(--radius-karte); }
.item--feedback .quote { color: var(--rot); font-size: 1.75rem; opacity: 0.9; }
.item--feedback .item__content, .item--feedback h2, .item--feedback .toggle__button { color: var(--schwarz); }
.item--feedback .stars { color: #f5b400; }
.item--feedback .date { color: var(--text-3); }
.item--feedback blockquote { color: var(--text-2); }
.item--feedback.hide blockquote::after { background-image: linear-gradient(to right, transparent 33.33%, var(--weiss)); }
.feedback__quelle { color: var(--text-3); }

/* ---------------------------------------------------------------- Aufzaehlungen und Aufklapper im Text */
.ot-article__text ul[style*="circle"] > li {
  background: transparent; color: inherit; padding: 0.15em 0 0.15em 1.9em; margin-bottom: 0.4em;
}
.ot-article__text ul[style*="circle"] > li::before { color: var(--rot); left: 0; top: 0.2em; }
.section--form .ot-article__text ul[style*="circle"] > li { background: transparent; color: var(--weiss); }
.section--form .ot-article__text ul[style*="circle"] > li::before { color: #ffb3b6; }
.ot-article__accordions .ot-accordion {
  background-color: var(--weiss); color: var(--schwarz); border: 1px solid var(--linie) !important; border-radius: 10px; overflow: hidden;
}
.ot-article__accordions .ot-accordion__header span { font-weight: 600; }
.ot-article__accordions .ot-accordion.is-active { border-color: var(--rot) !important; }
.ot-accordion { border-color: var(--linie); }

/* ---------------------------------------------------------------- Schieberegler */
.splide__controls::before { opacity: 0; }
.splide__arrow {
  width: 40px; height: 40px; font-size: 14px; color: var(--schwarz); opacity: 1;
  border: 1px solid var(--linie); background: var(--weiss); border-radius: 50%;
}
.splide__arrow:hover { border-color: var(--schwarz); }
.splide__pagination__page { background-color: #c9c6c0; opacity: 1; }
.splide__pagination__page.is-active { background-color: var(--rot); transform: scale(1.15); }
.splide--overlay .splide__controls::before { opacity: 0.0; }

/* ---------------------------------------------------------------- Seitenweiterschaltung */
.ot-pagination a, .ot-pagination span { border-radius: var(--radius-knopf); }
.ot-pagination a:hover { background: var(--grau); }
.ot-pagination__page--active, .ot-pagination__page--active span { background-color: var(--schwarz); color: var(--weiss); border-radius: var(--radius-knopf); }

/* ---------------------------------------------------------------- Formulare */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea {
  font-weight: 400; letter-spacing: 0; border: 1px solid #d4d1cb; border-radius: var(--radius-knopf); background-color: var(--weiss); color: var(--schwarz);
  transition: border-color var(--zeit) ease, box-shadow var(--zeit) ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(208, 16, 26, 0.15);
}
.bg--dark input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), .bg--dark select, .bg--dark textarea {
  background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); color: var(--weiss);
}
.widget--checkbox label.widget__label::before { border-radius: 5px; border-color: #b9b5ae; }
.property-form-wrapper.bg { background-color: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); box-shadow: var(--schatten); }

/* ---------------------------------------------------------------- Fusszeile */
.site__footer { background-color: #121418; }
.site__footer .address h2 { font-size: var(--text); font-weight: 600; }
.site__footer a { font-weight: 500; }
.site__footer a:hover { color: #ffb3b6; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: var(--abstand-halb); }
.regions-select { background-color: #1c1f25; border-color: rgba(255, 255, 255, 0.2); color: var(--weiss); }

/* ---------------------------------------------------------------- Objekt- und Bewertungsbereiche */
.objekt-hinweis { border-radius: 999px; padding: 0.4rem 1rem; font-weight: 600; }
.bewertung-kopf__wert { font-weight: 700; letter-spacing: -0.03em; }

/* ---------------------------------------------------------------- Feinschliff */
/* Hinweistexte mit .tagline-Klasse nicht als rote Dachzeile */
.feedbackInfo, h6.tagline--simple { color: var(--text-3) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
/* Karten einer Reihe: Knopf immer unten */
.item--news .item__content > .button, .item--occasions .item__content > .button, .item--services .item__content > .button { margin-top: auto; }
/* Standort: Bild fuellt die ganze Kartenhoehe */
.item--locations { border: 1px solid var(--linie); background: var(--grau); }
.item--locations .item__media { min-height: 18rem; }
.item--locations .item__media img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.item--locations .item__content.bg, .item--locations .item__content { background: transparent; }
/* Schieberegler-Steuerung darf nicht ueber dem geoeffneten Menue liegen */
.splide__controls { z-index: 20; }
/* Objektseite: feine Tabellenlinien, gerundete Galeriebilder */
.section--facts ul.list li { border-bottom-color: var(--linie); }
.section--facts ul.list li > :first-child { color: var(--text-2); }
.section--gallery .gallery__item { border-radius: 10px; }
.section--description .intro { max-width: 48rem; }
/* Artikel: angenehme Lesebreite */
.details--section > .inner > div { max-width: 52rem; margin: 0 auto; }
.details--section figure img { border-radius: var(--radius-karte); }
/* Handy: Luft zwischen Kopfzeile und Kopfbild-Text */
@media (max-width: 48rem) { .section--banner .banner__container .inner { padding-top: 2.5rem; } }

/* Kontaktbereiche auf Foto: kraeftig abdunkeln, Felder deckend weiss (gut lesbar) */
.darken--extreme::after { background-color: #14161b; opacity: 0.86; }
.bg--dark input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), .bg--dark select, .bg--dark textarea {
  background-color: var(--weiss); border-color: var(--weiss); color: var(--schwarz);
}
.bg--dark ::placeholder { color: var(--text-3); opacity: 1; }
.bg--dark select { background-image: linear-gradient(45deg, transparent 50%, var(--schwarz) 50%), linear-gradient(135deg, var(--schwarz) 50%, transparent 50%); }
.bg--dark .widget__label, .bg--dark .ot-consents, .bg--dark .ot-consents p { color: rgba(255, 255, 255, 0.92); }
.bg--dark .widget--checkbox label.widget__label::before { background-color: var(--weiss); border-color: var(--weiss); }
.bg--dark .widget--checkbox input:checked + label.widget__label::before, .bg--dark .widget--checkbox input:checked ~ label.widget__label::before { background-color: var(--rot); border-color: var(--rot); }

/* Formulare auf Fotos (Kontakt, Objektanfrage): eigener Kasten, Foto kraeftig abgedunkelt */
.section--form .darken::after { background-color: #14161b; opacity: 0.8; }
.section--form form.ot-form {
  padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius-karte);
  background: rgba(18, 20, 24, 0.82); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}