/* =====================================================================
   Sonay & Wiegmann – öffentliche Website.
   =====================================================================
   DESIGN-VARIABLEN: Beim Einsetzen der neuen CI nur diesen Block ändern.
   --------------------------------------------------------------------- */
:root {
  /* --- Farben: neutrale Graustufen ------------------------------------ */
  --grau-900: #2b2b2b;   /* Haupttext, Buttons, dunkle Flächen (14,4:1 auf Weiß) */
  --grau-700: #545454;   /* Logo-Grau [M] aus der Vorlage; Nebentext (7,5:1)      */
  --grau-500: #6e6e6e;   /* leise Hinweise (5,1:1 auf Weiß)                       */
  --grau-300: #cfcfcf;   /* Linien, Rahmen                                        */
  --grau-150: #ebebeb;   /* Platzhalter-Flächen                                   */
  --grau-50:  #f6f6f5;   /* helle Abschnittsflächen                               */
  --weiss:    #ffffff;

  /* --- Akzent: GENAU EINE Variable = Logo-Gelb [M] -------------------- */
  --akzent: #ffde59;     /* NUR für Linien, Balken, Ränder und Flächen.
                            NIE als Textfarbe (Kontrast auf Weiß nur ca. 1,4:1). */

  /* --- Abgeleitete Rollen (verweisen nur auf die Werte oben) ---------- */
  --farbe-text: var(--grau-900);
  --farbe-text-leise: var(--grau-700);
  --farbe-hinweis: var(--grau-500);
  --farbe-hintergrund: var(--weiss);
  --farbe-flaeche: var(--grau-50);
  --farbe-linie: var(--grau-300);
  --farbe-dunkel: var(--grau-900);
  --farbe-auf-dunkel: var(--weiss);
  --farbe-button: var(--grau-900);
  --farbe-button-text: var(--weiss);
  --farbe-akzent-flaeche: color-mix(in srgb, var(--akzent) 14%, var(--weiss));
  --farbe-link: var(--grau-900);
  --farbe-platzhalter: var(--grau-150);
  --farbe-offen-rand: var(--grau-500);

  /* --- Schriften: Systemschriften, austauschbar ---------------------- */
  /* Fließtext: Systemschrift. Headlines (h1, h2): Italiana wie im Logo, lokal, OFL. */
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Italiana", Georgia, "Times New Roman", serif;
  --gewicht-titel: 400;   /* Italiana hat nur einen Schnitt */
  --schrift-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Schriftgrößen (mobil zuerst, wachsen mit der Breite) ---------- */
  --groesse-h1: clamp(2.4rem, 1.5rem + 4.6vw, 5.25rem);
  --groesse-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  --groesse-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --groesse-lead: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --groesse-text: 1.0625rem;
  --groesse-klein: 0.875rem;

  /* --- Abstände ------------------------------------------------------ */
  --abstand-xs: 0.5rem;
  --abstand-s: 1rem;
  --abstand-m: 1.5rem;
  --abstand-l: 2.5rem;
  --abstand-xl: clamp(4rem, 3rem + 5vw, 8rem);   /* zwischen Abschnitten */
  --breite-inhalt: 75rem;
  --breite-text: 42rem;

  /* --- Radien und Linien (klare Kanten) ------------------------------ */
  --radius-s: 2px;
  --radius-m: 4px;
  --linie: 1px solid var(--farbe-linie);

  /* --- Kopfzeile, Logo, Favicon -------------------------------------- */
  --kopf-hoehe: 7.5rem;          /* Platz für Logo (Seitenverhältnis ca. 1,3:1) oder breite Wortmarke */
  --logo-hoehe: 6rem;           /* Logo ist hochkant-kompakt (1,3:1); darunter wird der Name unlesbar */
  --logo-max-breite: 13rem;
}

/* Lokale Schrift (SIL OFL 1.1, Lizenz: schriften/OFL-Italiana.txt). Tausch: Datei ersetzen, Namen in --schrift-titel ändern. */
@font-face {
  font-family: "Italiana";
  src: url("schriften/Italiana-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift-text); font-size: var(--groesse-text); line-height: 1.6; color: var(--farbe-text); background: var(--farbe-hintergrund); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { text-wrap: balance; font-family: var(--schrift-titel); line-height: 1.08; margin: 0 0 var(--abstand-s); letter-spacing: -0.02em; hyphens: manual; overflow-wrap: break-word; }
h1 { font-size: var(--groesse-h1); font-weight: var(--gewicht-titel); letter-spacing: 0; }
h2 { font-size: var(--groesse-h2); font-weight: var(--gewicht-titel); letter-spacing: 0; }
h3 { font-family: var(--schrift-text); font-size: var(--groesse-h3); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 var(--abstand-s); }
a { color: var(--farbe-link); text-underline-offset: 0.2em; text-decoration-color: var(--grau-500); }
:focus-visible { outline: 3px solid var(--grau-900); outline-offset: 3px; box-shadow: 0 0 0 6px var(--akzent); }

.huelle { width: 100%; max-width: var(--breite-inhalt); margin: 0 auto; padding: 0 var(--abstand-m); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: -999px; top: 0; background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); padding: var(--abstand-xs) var(--abstand-s); z-index: 100; }
.sprunglink:focus { left: var(--abstand-s); }

/* --- Interner Hinweisbalken ------------------------------------------ */
.intern-balken { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); font-size: var(--groesse-klein); text-align: center; padding: 0.4rem var(--abstand-s); }

/* --- Platzhalter-Markierungen ---------------------------------------- */
.offen { display: inline; font-family: var(--schrift-mono); font-size: 0.8em; overflow-wrap: anywhere; color: var(--farbe-text-leise); background: var(--farbe-platzhalter); border: 1px dashed var(--farbe-offen-rand); border-radius: var(--radius-s); padding: 0.05em 0.35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
p.offen, div.offen { display: block; padding: var(--abstand-xs) var(--abstand-s); line-height: 1.5; }
.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--farbe-text-leise); border: 1px dashed var(--farbe-offen-rand); border-radius: var(--radius-s); padding: 0.1rem 0.4rem; background: var(--farbe-platzhalter); vertical-align: middle; }

/* --- Kopfzeile -------------------------------------------------------- */
.kopf { position: relative; z-index: 50; background: var(--farbe-hintergrund); border-bottom: var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-s); min-height: var(--kopf-hoehe); }
.logo { display: flex; align-items: center; height: var(--logo-hoehe); flex: 0 1 auto; }
.logo img { height: var(--logo-hoehe); width: auto; max-width: var(--logo-max-breite); object-fit: contain; object-position: left center; }
.menue-knopf { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-weight: 600; background: none; border: var(--linie); border-radius: var(--radius-m); padding: 0.5rem 0.85rem; color: var(--farbe-text); cursor: pointer; }
.menue-knopf-strich, .menue-knopf-strich::before, .menue-knopf-strich::after { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; content: ""; }
.menue-knopf-strich::before { position: absolute; top: -6px; } .menue-knopf-strich::after { position: absolute; top: 6px; }
.navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--farbe-hintergrund); border-bottom: var(--linie); padding: var(--abstand-s) var(--abstand-m) var(--abstand-m); }
.navigation.offen-nav { display: block; }
.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.navigation a { display: block; padding: 0.6rem 0; color: var(--farbe-text); text-decoration: none; font-weight: 550; }
.navigation a:hover { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 3px; }
.navigation .nav-cta { margin-top: var(--abstand-xs); }
/* ohne JavaScript: Navigation immer sichtbar */
.kein-js .navigation { display: block; position: static; border: 0; padding: 0 0 var(--abstand-s); }
.kein-js .menue-knopf { display: none; }

/* --- Buttons ---------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.35rem; font: inherit; font-weight: 650; line-height: 1.25; text-align: center; text-decoration: none; border-radius: var(--radius-m); border: 2px solid var(--farbe-button); background: var(--farbe-button); color: var(--farbe-button-text); cursor: pointer; }
.button:hover { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.button.sekundaer { background: transparent; color: var(--farbe-text); border-color: var(--farbe-text); }
.button.sekundaer:hover:not([disabled]) { background: var(--farbe-text); color: var(--farbe-hintergrund); }
.button.gross { min-height: 3.5rem; padding: 0.95rem 1.75rem; font-size: 1.125rem; font-weight: 700; }
.button.klein { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: 0.95rem; }
.button[disabled] { background: var(--farbe-platzhalter); border-color: var(--farbe-linie); color: var(--farbe-hinweis); cursor: not-allowed; }
.button-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-s); align-items: flex-start; }
.cta-gruppe { display: flex; flex-direction: column; gap: var(--abstand-xs); max-width: 26rem; }
/* optionales Hinweis-Element am CTA: unsichtbar, solange leer */
.cta-hinweis { margin: 0; font-size: var(--groesse-klein); line-height: 1.45; color: var(--farbe-text-leise); }
.cta-hinweis:empty { display: none; }

/* --- Abschnitte allgemein -------------------------------------------- */
.abschnitt { padding: var(--abstand-xl) 0; }
.abschnitt.flaeche { background: var(--farbe-flaeche); }
.abschnitt.dunkel { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); }
.abschnitt.dunkel a:not(.button) { color: var(--farbe-auf-dunkel); }
.abschnitt.dunkel .formular { color: var(--farbe-text); }
.abschnitt.dunkel .formular a:not(.button) { color: var(--farbe-link); text-decoration-color: var(--grau-500); }
.kicker { display: flex; align-items: center; gap: 0.75rem; font-size: var(--groesse-klein); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--farbe-text-leise); margin-bottom: var(--abstand-s); }
.kicker::before { content: ""; width: 2.5rem; height: 3px; background: var(--akzent); flex: none; }
.dunkel .kicker { color: var(--grau-300); }
.kopf-text { max-width: var(--breite-text); margin-bottom: var(--abstand-l); }
.lead { font-size: var(--groesse-lead); color: var(--farbe-text-leise); line-height: 1.5; }
.dunkel .lead { color: var(--grau-300); }
.fliess { max-width: var(--breite-text); }

/* --- 1 Kopfbereich ---------------------------------------------------- */
.hero { padding: var(--abstand-l) 0 var(--abstand-xl); }
.hero .huelle { display: grid; gap: var(--abstand-l); }
.hero h1 span { display: block; }
.hero .lead { max-width: 38rem; }
.hero .lead + .offen { max-width: 38rem; margin-bottom: var(--abstand-l); font-size: var(--groesse-klein); }
.hero-bild { margin: 0; }
.hero-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); }
.bildquelle { font-size: 0.75rem; color: var(--farbe-hinweis); margin-top: 0.4rem; }

/* --- 2 Problem --------------------------------------------------------- */
.problem-raster { display: grid; gap: var(--abstand-l); }
.problem-raster .betont { font-size: var(--groesse-lead); line-height: 1.5; border-left: 3px solid var(--akzent); padding-left: var(--abstand-m); }

/* --- 3 Schritte -------------------------------------------------------- */
.schritte { list-style: none; margin: 0 0 var(--abstand-l); padding: 0; display: grid; gap: 0; counter-reset: schritt; border-top: var(--linie); }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--abstand-s); padding: var(--abstand-m) 0; border-bottom: var(--linie); }
.schritte li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--schrift-titel); font-size: 2rem; color: var(--farbe-text); line-height: 1.1; }
.schritte h3 { margin-bottom: 0.35rem; }
.schritte p { margin: 0; color: var(--farbe-text-leise); }

/* --- 4 Pakete ---------------------------------------------------------- */
.karten { display: grid; gap: var(--abstand-m); }
.karte { display: flex; flex-direction: column; background: var(--farbe-hintergrund); border: var(--linie); border-radius: var(--radius-m); padding: var(--abstand-m); }
.karte .stufe { font-size: var(--groesse-klein); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farbe-text-leise); margin-bottom: var(--abstand-xs); }
.karten.pakete .karte:not(.lokal) { border-top: 4px solid var(--akzent); }
.karte .fuer { font-weight: 600; color: var(--farbe-text); }
.karte .text { color: var(--farbe-text-leise); flex: 1 1 auto; }
.preis { border-top: var(--linie); padding-top: var(--abstand-s); margin: var(--abstand-s) 0; }
.preis { font-weight: 650; }
.karte .button { align-self: flex-start; }
.karte.lokal { border: 2px solid var(--akzent); background: var(--farbe-akzent-flaeche); }
.zielgruppe { display: inline-block; align-self: flex-start; font-size: var(--groesse-klein); font-weight: 650; color: var(--grau-900); background: var(--akzent); border-radius: var(--radius-s); padding: 0.15rem 0.55rem; margin-bottom: var(--abstand-s); }
.karten-hinweis { margin-top: var(--abstand-m); font-size: var(--groesse-klein); color: var(--farbe-text-leise); }

/* --- 5 Für wen --------------------------------------------------------- */
/* Leistungen (3a): sechs Textkarten, Akzent nur als Linie */
.abschnitt.trenner { border-top: var(--linie); }
.karten.leistungen .karte { border-left: 3px solid var(--akzent); }
.karten.leistungen .karte h3 { scroll-margin-top: var(--abstand-l); }
.karte.bild { padding: 0; overflow: hidden; }
.karte.bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karte.bild .karte-inhalt { padding: var(--abstand-m); }
.nicht-passen { margin-top: var(--abstand-l); max-width: var(--breite-text); border-left: 3px solid var(--farbe-text); padding-left: var(--abstand-m); }

/* --- 6 Über Christian -------------------------------------------------- */
.ueber { display: grid; gap: var(--abstand-l); align-items: start; }
.portraet { width: 100%; max-width: 22rem; margin: 0; }
.portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-m); display: block; }
blockquote { margin: var(--abstand-m) 0; padding: 0; font-size: var(--groesse-lead); line-height: 1.5; }
blockquote p { margin-bottom: var(--abstand-xs); }


/* --- 8 Kontakt --------------------------------------------------------- */
.kontakt-raster { display: grid; gap: var(--abstand-l); }
.formular { background: var(--farbe-hintergrund); color: var(--farbe-text); border-radius: var(--radius-m); padding: var(--abstand-m); }
.kontakt-cta .cta-gruppe { max-width: none; margin-top: var(--abstand-s); }
.kontakt-cta .button { display: inline-flex; }
.formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formular legend { font-weight: 700; margin-bottom: var(--abstand-s); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.feld { display: block; margin-bottom: var(--abstand-s); }
.feld span { display: block; font-size: var(--groesse-klein); font-weight: 600; margin-bottom: 0.3rem; }
.feld input, .feld textarea { width: 100%; font: inherit; padding: 0.65rem 0.75rem; border: var(--linie); border-radius: var(--radius-s); background: var(--farbe-flaeche); color: var(--farbe-text-leise); }
.feld textarea { min-height: 7rem; resize: vertical; }
.formular .cta-gruppe { max-width: none; margin-top: var(--abstand-xs); }
.kontakt-bild { margin: 0; }
.kontakt-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); margin-top: var(--abstand-m); }
.dunkel .bildquelle { color: var(--grau-300); }
.dunkel .offen { color: var(--grau-900); }

/* --- 9 Fußzeile -------------------------------------------------------- */
.fuss { border-top: var(--linie); padding: var(--abstand-l) 0; font-size: var(--groesse-klein); color: var(--farbe-text-leise); }
.fuss .huelle { display: grid; gap: var(--abstand-m); }
.fuss-marke { font-weight: 700; color: var(--farbe-text); font-size: 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-xs) var(--abstand-m); }
.fuss a { color: var(--farbe-text); }

/* --- Unterseiten (Impressum, Datenschutz) ----------------------------- */
.platzhalter-banner { border: 3px dashed var(--farbe-offen-rand); background: var(--farbe-platzhalter); padding: var(--abstand-l) var(--abstand-m); margin-bottom: var(--abstand-l); border-radius: var(--radius-m); }
.platzhalter-banner strong { display: block; font-size: var(--groesse-h2); line-height: 1.1; margin-bottom: var(--abstand-s); letter-spacing: -0.02em; }
.pflicht-liste { padding-left: 1.5rem; max-width: var(--breite-text); }
.pflicht-liste li { padding: 0.6rem 0; border-bottom: var(--linie); }
.pflicht-liste li .offen { display: block; margin-top: 0.35rem; width: fit-content; }

/* =====================================================================
   Ab Tablet
   ===================================================================== */
@media (min-width: 48rem) {
  .huelle { padding: 0 var(--abstand-l); }
  .karten.zwei { grid-template-columns: repeat(2, 1fr); }
  .karten.leistungen { grid-template-columns: repeat(2, 1fr); }
  .karten.pakete { grid-template-columns: repeat(2, 1fr); }
  .karte.lokal { grid-column: 1 / -1; }
  .schritte { grid-template-columns: 1fr; }
  .fuss .huelle { grid-template-columns: 1fr auto; align-items: end; }
}

/* =====================================================================
   Ab Desktop
   ===================================================================== */
@media (min-width: 64rem) {
  .menue-knopf { display: none; }
  .navigation, .kein-js .navigation { display: block; position: static; border: 0; padding: 0; background: none; }
  .navigation ul { flex-direction: row; align-items: center; gap: var(--abstand-m); }
  .navigation a { padding: 0.25rem 0; font-size: 0.95rem; }
  .navigation .nav-cta { margin: 0 0 0 var(--abstand-xs); }
  .navigation .nav-cta a { padding: 0.55rem 1rem; color: var(--farbe-button-text); }
  .hero { padding-top: var(--abstand-xl); }
  .hero .huelle { grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--abstand-xl); }
  .problem-raster { grid-template-columns: 1fr 1fr; gap: var(--abstand-xl); }
  .schritte { border-top: 3px solid var(--akzent); }
  .schritte li { grid-template-columns: 5rem 1fr; padding: var(--abstand-l) 0; }
  .schritte li > div { display: grid; grid-template-columns: 20rem minmax(0, 42rem); gap: var(--abstand-l); }
  .hero-bild img { aspect-ratio: 4 / 5; }
  .karten.pakete { grid-template-columns: repeat(3, 1fr); }
  .karten.leistungen { grid-template-columns: repeat(3, 1fr); }
  .karte.lokal { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: var(--abstand-l); padding: var(--abstand-l); }
  .karte.lokal > .lokal-kopf { grid-column: 1; }
  .karte.lokal > .lokal-inhalt { grid-column: 2; display: flex; flex-direction: column; }
  .ueber { grid-template-columns: 22rem 1fr; gap: var(--abstand-xl); }
  .kontakt-raster { grid-template-columns: 1fr 1fr; gap: var(--abstand-xl); align-items: start; }
}
.formular > .offen { margin-top: var(--abstand-s); }
.unter-liste { margin-top: var(--abstand-l); }

@media (min-width: 64rem) {
  :root { --kopf-hoehe: 10rem; --logo-hoehe: 8rem; }
}

/* Rechtstext (Datenschutzerklärung aus dem Generator, Impressum kann denselben Rahmen nutzen) */
.rechtstext { max-width: 46rem; }
.rechtstext h1 { text-wrap: wrap; hyphens: none; overflow-wrap: normal; word-break: keep-all; font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); }
.rechtstext h2 { margin-top: var(--abstand-l); }
.rechtstext h3 { font-size: 1.15rem; letter-spacing: 0; margin-top: var(--abstand-m); }
.rechtstext p { margin: 0 0 0.9em; }
.rechtstext ul { margin: 0 0 1em; padding-left: 1.25rem; }
.rechtstext li { margin: 0.4em 0; }
.rechtstext .index { list-style: none; padding-left: 0; margin-bottom: var(--abstand-l); }
.rechtstext .index li { margin: 0.25em 0; }
.rechtstext .seal { margin-top: var(--abstand-l); }