/* Chatel Computer – ruhig und klar: dunkelblauer Grund (blendet nicht), helle Schrift, ein
   hellblauer Akzent für alles, was zum Anruf führt. Ein festes Farbschema – keine automatische
   Hell/Dunkel-Umschaltung. Keine externen Schriften oder Dienste. */

/* Inter, selbst gehostet (SIL Open Font License) – kein fremder Server, 48 KB, alle Schnitte
   in einer Datei. Fällt auf die Systemschrift zurück, falls sie nicht lädt. */
@font-face {
  font-family: "Inter";
  src: url("/schriften/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f2139;
  --ton: #132a47;
  --ink: #f2f6fb;
  --mut: #b3c1d4;
  --akzent: #8ab8ff;
  --akzent-hell: #a9cbff;
  --knopf-text: #0c1a2e;
  --line: rgba(255, 255, 255, 0.12);
  --kopf-bg: #1a2d41;        /* gescrollt: helleres Blau, abgedunkelt */
  --kopf-bg-oben: #223b58;   /* über dem hellen Titelbild eine Spur heller */
  --kopf-fortschritt: 1;     /* 0 = ganz oben, 1 = ab „Was ich mache“ (setzt js/seite.js) */
  --kopf-schatten: 0 2px 5px rgba(0, 0, 0, 0.26), 0 12px 30px rgba(0, 0, 0, 0.34);
  --kopf-korn: 0.28;
  --kopf-linie: rgba(138, 184, 255, 0.16);
  --knopf-schatten: 0 14px 34px rgba(0, 0, 0, 0.35);
  --kopf-ink: var(--ink);
  --kopf-mut: var(--mut);
  /* Menü in der Leiste heller als der Fließtext – mehr Kontrast zur Leiste */
  --kopf-mut: color-mix(in oklab, var(--mut), var(--ink) 55%);
  --kopf-akzent: var(--akzent);
  --kopf-knopf: var(--akzent);
  --kopf-knopf-hell: var(--akzent-hell);
  --kopf-knopf-text: var(--knopf-text);
  --ton-ink: var(--ink);
  --ton-mut: var(--mut);
  --korn: 0.14;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  position: relative;                    /* Bezug für die Körnung: sie gehört zur Seite, nicht zum Fenster */
  margin: 0; background: var(--bg); color: var(--ink);
  font: 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
/* Filmkorn (werkzeuge/korn.py): liegt auf der Seite wie die Körnung eines Blattes Papier –
   es scrollt mit dem Text mit, statt am Fenster zu kleben, nur etwas langsamer (Tiefe). */
body::after {
  content: ""; position: absolute; inset: 0; z-index: 100; pointer-events: none;
  background: var(--korn-bild, url("/bilder/korn-3.png")) repeat;   /* gewählt: Film */
  background-size: 256px;
  background-position: 0 var(--korn-y, 0px);   /* js/seite.js: wandert langsamer als der Text */
  opacity: var(--korn, 0.28); mix-blend-mode: soft-light;
}
a { color: var(--akzent); }
:focus-visible { outline: 3px solid rgba(138, 184, 255, 0.6); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(100% - 2.5rem, 62rem); margin-inline: auto; }

/* Kopf: Name, Sprungmarken, Telefon */
.kopf {
  /* über der Körnung (z-index 100): die Leiste und der Telefon-Knopf bleiben glatt */
  position: sticky; top: 0; z-index: 110;
  background-color: var(--kopf-bg);
  /* oben über dem hellen Bild heller, beim Scrollen dunkler – der Verlauf kommt aus js/seite.js */
  background-color: color-mix(in oklab, var(--kopf-bg-oben, var(--kopf-bg)), var(--kopf-bg) calc(var(--kopf-fortschritt, 1) * 100%));
  border-bottom: 1px solid var(--kopf-linie, var(--line));
  box-shadow: var(--kopf-schatten, none);
}
/* eigene Körnung der Leiste: feiner und kräftiger als auf der Fläche darunter */
.kopf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/bilder/korn-2.png") 0 0 / 160px repeat;
  opacity: var(--kopf-korn, 0.5); mix-blend-mode: overlay;
}
@media (min-resolution: 2dppx) { .kopf::before, .nav::before { background-size: 80px; } }
.kopf-zeile { position: relative; z-index: 1; }   /* Name, Menü und Telefon-Knopf bleiben glatt */
.kopf-zeile { display: flex; align-items: center; gap: 1.6rem; min-height: 66px; }
.marke {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-right: auto;
  color: var(--kopf-ink); text-decoration: none; font: 650 1.15rem/1 var(--sans); letter-spacing: -0.01em;
}
.marke-icon { flex: none; width: 26px; height: 26px; color: currentColor; }  /* gleiche Farbe wie der Name */
/* Der Name sitzt optisch höher als das Symbol: Versalien haben ihre Masse über der Zeilenmitte.
   Deshalb rückt die Schrift ein Stück nach unten statt das Symbol nach oben. */
.marke span { transform: translateY(2px); }
.nav { display: flex; gap: 1.5rem; }
.nav a { color: var(--kopf-mut); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav a:hover { color: var(--kopf-ink); }
.menue-knopf { display: none; }
.kopf-tel {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 42px; padding: 0.45rem 1rem;
  border-radius: 999px; background: var(--kopf-knopf); color: var(--kopf-knopf-text); white-space: nowrap;
  font-size: 0.95rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease;
}
.kopf-tel:hover { background: var(--kopf-knopf-hell); }
.kopf-tel svg { flex: none; width: 17px; height: 17px; }
.kopf-tel-kurz { display: none; }

/* Titel mit großem Anruf-Knopf */
.hero { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3.25rem, 8vw, 6rem); }
.hero-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr); align-items: end; gap: 2rem 3rem; }
.skyline { width: 100%; height: auto; color: var(--akzent); }
.skyline .fl { fill: var(--bg); }
.dachzeile {
  margin: 0 0 1rem; color: var(--akzent);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; }
h1 { max-width: 19ch; font-size: clamp(2.15rem, 8.5vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.1rem); }
.lead { max-width: 34rem; margin: 1.2rem 0 0; color: var(--mut); font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 2.3rem 0 0; }
.anruf {
  position: relative; z-index: 101;      /* über der Körnung – auf dem Knopf soll kein Korn liegen */
  display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.8rem;
  border-radius: 18px; background: var(--akzent); color: var(--knopf-text); text-decoration: none;
  box-shadow: var(--knopf-schatten);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.anruf:hover { background: var(--akzent-hell); }
.anruf:active { transform: translateY(1px); }
.anruf svg { flex: none; width: 26px; height: 26px; }
.anruf-nummer { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 650; line-height: 1.15; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.mehr { color: var(--mut); font-size: 1rem; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.mehr::after { content: " ↓"; }
.mehr:hover { color: var(--ink); border-color: currentColor; }

/* Abschnitte */
.bloc { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); }
.bloc-ton { background: var(--ton); color: var(--ton-ink); }
.bloc-ton .kontakt-satz, .bloc-ton .kontakt-info { color: var(--ton-mut); }
.bloc-ton .kontakt-nummer { color: var(--ton-ink); }
.bloc-grille { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem 3rem; align-items: start; }
.liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem;
  margin: 0; padding: 0; list-style: none;
}
.liste li { padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.liste strong { display: block; font-weight: 600; }
.liste span { color: var(--mut); font-size: 0.97rem; }
.gruppen { display: grid; gap: 2.4rem; }
.hinweis { max-width: 42rem; margin: 2rem 0 0; color: var(--mut); }
.hinweis strong { color: var(--ink); font-weight: 600; }
h3 { margin: 0 0 0.3rem; color: var(--akzent); font: 600 0.8rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.schritte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem;
  margin: 0; padding: 0; list-style: none; counter-reset: schritt;
}
.schritte li { counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt); display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  margin-bottom: 0.7rem; border-radius: 999px; border: 1.5px solid var(--akzent); color: var(--akzent);
  font: 600 1rem/1 var(--sans);
}
.schritte strong { display: block; font-weight: 600; }
.schritte span { color: var(--mut); }
.text { max-width: 38rem; margin: 0; }
.text p { margin: 0; }
.text p + p { margin-top: 0.9em; }
.kontakt-satz { margin: 0; color: var(--mut); }
.kontakt-nummer {
  display: inline-block; margin: 0.35rem 0 0.5rem; color: var(--ink); text-decoration: none;
  font: 600 clamp(2.1rem, 6vw, 3.1rem)/1.1 var(--serif); font-variant-numeric: tabular-nums;
}
.kontakt-nummer:hover { color: var(--akzent); }
.kontakt-info { margin: 0; color: var(--mut); }

/* Fuß */
.fuss { padding-block: 1.6rem 2.4rem; border-top: 1px solid var(--line); color: var(--mut); font-size: 0.88rem; }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.fuss nav { display: flex; gap: 1.25rem; }
.fuss a { color: var(--mut); }
.fuss a:hover { color: var(--ink); }

/* Rechtliche Seiten */
.recht { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.recht h1 { max-width: none; font-size: clamp(2rem, 5vw, 2.8rem); }
.recht h2 { margin-top: 2.2rem; font-size: 1.3rem; }
.recht p, .recht li { max-width: 42rem; }
.recht-klein { color: var(--mut); font-size: 0.92rem; }
/* Impressum: Name, Anschrift und E-Mail stehen nur als Bild da – und in der Bilddatei liegen
   schmale senkrechte Streifen in verwürfelter Reihenfolge. Erst der Browser setzt sie über
   background-position zusammen (erzeugt von werkzeuge/impressum_bild.py). */
.anbieter {
  display: flex; width: var(--ab); margin: 1.6rem 0 0.4rem;
  font-size: 0; line-height: 0; max-width: 100%;
}
.anbieter i {
  display: block; flex: none; height: var(--ah);
  background-image: url("/bilder/anbieter.png"); background-repeat: no-repeat;
  background-size: var(--ab) var(--ah);
}
@media print { .anbieter i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Tablet und Handy */
@media (max-width: 52em) {
  .bloc-grille, .hero-grille { grid-template-columns: 1fr; }
  .wrap { width: min(100% - 3.4rem, 62rem); }      /* mehr Luft links und rechts */
  /* „Computer-probleme?" darf auf zwei Zeilen – dafür deutlich größer (weiches Trennzeichen im Text) */
  h1 { font-size: clamp(2.9rem, 13vw, 4rem); hyphens: manual; }
  .hero-grille { gap: 1.25rem; }                    /* Zeichnung näher an den Text */
  .skyline { display: block; max-width: 21rem; margin-inline: auto; opacity: 0.92; }
  /* Sobald die Sprungmarken nicht mehr in eine Zeile passen (gemessen: 791 px nötig),
     wandern sie hinter den Knopf rechts und klappen unter der Leiste auf. */
  .nav {
    display: none; position: absolute; top: calc(100% + 0.6rem); right: 0;
    flex-direction: column; gap: 0.15rem; min-width: 11.5rem; padding: 0.4rem;
    /* gleiche Farbe und gleiche Körnung wie die Leiste – das Menü gehört dazu */
    background-color: var(--kopf-bg);
    background-color: color-mix(in oklab, var(--kopf-bg-oben, var(--kopf-bg)), var(--kopf-bg) calc(var(--kopf-fortschritt, 1) * 100%));
    border: 1px solid var(--kopf-linie, var(--line));
    border-radius: 14px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
    overflow: hidden; isolation: isolate;
  }
  .nav::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("/bilder/korn-2.png") 0 0 / 160px repeat;
    /* auf der kleinen Fläche wirkt dieselbe Körnung stärker – halbe Deckkraft */
    opacity: calc(var(--kopf-korn, 0.38) / 2); mix-blend-mode: overlay;
  }
  .kopf.offen .nav { display: flex; }
  .nav a { position: relative; padding: 0.62rem 0.75rem; border-radius: 10px; font-size: 1rem; color: var(--kopf-ink); }
  .nav a:active { background: rgba(127, 127, 127, 0.16); }
  .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; margin-left: 0.1rem; padding: 0;
    border: 0; border-radius: 12px; background: none; color: var(--kopf-ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .menue-knopf svg { width: 23px; height: 23px; }
  .kopf.offen .menue-knopf { background: rgba(127, 127, 127, 0.16); }
  .kopf-zeile { gap: 0.75rem; }
}
@media (max-width: 40em) {
  body { font-size: 17px; }
  .kopf-zeile { gap: 0.75rem; min-height: 60px; }
  .marke { font-size: 1.2rem; }
  .marke-icon { width: 23px; height: 23px; }
  .kopf-tel { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
  .liste, .schritte { grid-template-columns: 1fr; }
  .schritte li { display: grid; grid-template-columns: 2.1rem 1fr; column-gap: 0.9rem; }
  .schritte li::before { grid-row: span 2; margin: 0; }
  .anruf { width: 100%; justify-content: center; }
  .aktion { flex-direction: column; align-items: stretch; }
  .mehr { align-self: flex-end; }    /* auf dem Handy rechts – näher am Daumen */
}
/* Schmale Schirme: Der Name soll in einer Zeile stehen. Gemessen braucht die Leiste einzeilig
   399 px, bei 375 px Fenster sind nur 321 px da. Also verliert die Telefon-Pille die Ziffern und
   wird zum runden Knopf – die Nummer steht groß im Titelbereich und wird vorgelesen. */
@media (max-width: 30em) {
  .marke span { white-space: nowrap; }
  .kopf-tel span:not(.kopf-tel-kurz) { display: none; }   /* die Ziffern passen nicht, das Wort schon */
  .kopf-tel-kurz { display: inline; }
  .kopf-tel { min-height: 40px; padding: 0.4rem 0.72rem; gap: 0.4rem; font-size: 0.9rem; }
  .kopf-tel svg { width: 17px; height: 17px; }
  .marke { font-size: 1.02rem; gap: 0.45rem; }
  .marke-icon { width: 22px; height: 22px; }
  .kopf-zeile { gap: 0.45rem; }
  /* Der Menüknopf trägt 9 px Luft in sich; ohne Ausgleich wirkt die Pille zu weit links. */
  .menue-knopf { margin-left: -2px; }
  .wrap { width: min(100% - 2.4rem, 62rem); }
}

/* Anderes Schema: im <html>-Tag data-farbe="taubenblau" (oder jeansblau, zweiton,
   schiefer, sepia) setzen – sonst gilt das Schema oben.
   ---------- Farbvarianten ---------- */
/* 2 Jeansblau: mittleres, gedecktes Blau, weißer Knopf */
html[data-farbe="jeansblau"] {
  --bg: #2a4263; --ton: #30496d; --ink: #f6f8fc; --mut: #cbd6e4; --line: rgba(255, 255, 255, 0.14);
  --akzent: #e3eeff; --akzent-hell: #ffffff; --knopf-text: #1d3350;
  --kopf-bg: #2b4568; --kopf-bg-oben: #3c5c85; --knopf-schatten: 0 14px 34px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
/* 3 Taubenblau: helles, gedämpftes Blaugrau statt Weiß, kräftig blauer Knopf */
html[data-farbe="taubenblau"] {
  --bg: #dfe7f1; --ton: #d3deeb; --ink: #15233a; --mut: #4c5b70; --line: rgba(21, 35, 58, 0.13);
  --akzent: #1f5fd1; --akzent-hell: #174aa6; --knopf-text: #ffffff;
  --kopf-bg: #ccdaec; --knopf-schatten: 0 12px 30px rgba(31, 95, 209, 0.22);
  --kopf-schatten: 0 10px 26px rgba(21, 35, 58, 0.12); --kopf-korn: 0.22; --kopf-linie: rgba(21, 35, 58, 0.14);
  --korn: 0.26;
  color-scheme: light;
}
/* 4 Zweiton: sanft helle Fläche, Kopf und Kontakt dunkelblau */
html[data-farbe="zweiton"] {
  --bg: #edf1f6; --ton: #0f2139; --ink: #15233a; --mut: #4c5b70; --line: rgba(21, 35, 58, 0.12);
  --akzent: #1f5fd1; --akzent-hell: #174aa6; --knopf-text: #ffffff;
  --kopf-bg: #1a2d41; --kopf-bg-oben: #223b58; --kopf-ink: #f2f6fb; --kopf-mut: #dbe4f1; --kopf-akzent: #8ab8ff;
  --kopf-knopf: #8ab8ff; --kopf-knopf-hell: #a9cbff; --kopf-knopf-text: #0c1a2e;
  --ton-ink: #f2f6fb; --ton-mut: #b3c1d4;
  --knopf-schatten: 0 12px 30px rgba(31, 95, 209, 0.22);
  color-scheme: light;
}
html[data-farbe="zweiton"] .kopf { border-bottom-color: transparent; }
html[data-farbe="zweiton"] .bloc-ton { border-top-color: transparent; }
/* 5 Schieferblau warm: dunkles Blaugrau, cremefarbene Schrift, goldener Knopf */
html[data-farbe="schiefer"] {
  --bg: #1d2b3f; --ton: #223350; --ink: #f3e9d6; --mut: #c9bda7; --line: rgba(243, 233, 214, 0.14);
  --akzent: #f1c77f; --akzent-hell: #f6d69f; --knopf-text: #1d2b3f;
  --kopf-bg: #2b3d55; --kopf-bg-oben: #3b5273; --knopf-schatten: 0 14px 34px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
/* 6 Sepia: warmes Papier, tiefblauer Knopf */
html[data-farbe="sepia"] {
  --bg: #f3ead7; --ton: #ebdfc7; --ink: #2b2418; --mut: #6b5e4b; --line: rgba(43, 36, 24, 0.13);
  --akzent: #2c5aa8; --akzent-hell: #234a8c; --knopf-text: #fffaf0;
  --kopf-bg: rgba(243, 234, 215, 0.92); --knopf-schatten: 0 12px 30px rgba(44, 90, 168, 0.2);
  color-scheme: light;
}
/* Auf hochauflösenden Displays pixelgenau: ein Korn = ein Bildschirmpunkt */
@media (min-resolution: 2dppx) { body::after { background-size: 128px; } }


/* ---------- Titelbereich mit Textur (Vorschau mit ?bg=1…4&stil=blau|sw) ---------- */
.hero { position: relative; overflow: hidden; }   /* keine isolation: der Anruf-Knopf muss über die Körnung */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hero-bild, url("/bilder/hero-bokeh.jpg")) center / cover no-repeat;
  opacity: var(--hero-deckkraft, 0.744);   /* nochmals 7 % zurückgenommen */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Unter 360 px wird es auch dafür zu eng – dann wieder nur der Hörer im Kreis. */
@media (max-width: 22.5em) {
  .kopf-tel-kurz { display: none; }
  .kopf-tel {
    width: 40px; height: 40px; padding: 0; gap: 0;
    justify-content: center; border-radius: 999px;
  }
  .kopf-tel svg { transform: translate(-1px, 0); }
}