/* ============================================================
   DESIGN-SYSTEM  ·  Grundlage aller Kundenseiten
   ------------------------------------------------------------
   Hier stehen die Grundregeln: Farben, Schriftgroessen, Abstaende.
   Pro Kunde werden nur die vier Marken-Farben ueberschrieben,
   alles andere passt sich automatisch an.
   ============================================================ */

/* ---------- 1. Stellschrauben ---------- */
:root {
  /* --- Diese vier setzt jeder Kunde selbst (aus inhalt.json) --- */
  --marke:        #b08d5e;   /* Akzent: Knoepfe, Linien, Hervorhebungen */
  --tinte:        #16151a;   /* Dunkle Flaechen und Ueberschriften */
  --papier:       #fbf9f6;   /* Seitenhintergrund */
  --papier-warm:  #f3efe8;   /* Abgesetzte Bereiche */

  /* --- Automatisch abgeleitet, nicht anfassen --- */
  --marke-hell:   color-mix(in srgb, var(--marke) 14%, var(--papier));
  --marke-dunkel: color-mix(in srgb, var(--marke) 78%, #000);
  --text:         color-mix(in srgb, var(--tinte) 92%, var(--papier));
  /* 70 % statt der optisch verlockenden 55 %: gemessen erreicht der
     hellere Wert nur 3,7:1 Kontrast und liegt damit unter dem
     Lesbarkeitsstandard von 4,5:1. */
  --text-leise:   color-mix(in srgb, var(--tinte) 70%, var(--papier));
  --linie:        color-mix(in srgb, var(--tinte) 12%, var(--papier));
  --linie-stark:  color-mix(in srgb, var(--tinte) 22%, var(--papier));
  --auf-dunkel:   color-mix(in srgb, var(--papier) 92%, var(--tinte));

  /* --- Schriften --- */
  --schrift-titel: 'Cormorant Garamond', Georgia, serif;
  --schrift-text:  'Inter', system-ui, -apple-system, sans-serif;
  --schrift-klein: 'Inter', system-ui, sans-serif;

  /* --- Groessen: waechst automatisch mit der Bildschirmbreite --- */
  --gr-xs:   0.75rem;
  --gr-s:    0.875rem;
  --gr-m:    1.0625rem;
  --gr-l:    clamp(1.125rem, 1rem + 0.4vw,  1.3125rem);
  --gr-xl:   clamp(1.5rem,  1.2rem + 1.2vw, 2.125rem);
  --gr-2xl:  clamp(2rem,    1.4rem + 2.6vw, 3.25rem);
  --gr-3xl:  clamp(2.5rem,  1.4rem + 4.6vw, 5rem);
  --gr-riese:clamp(3rem,    1.2rem + 7vw,   7rem);

  /* --- Abstaende --- */
  --r1: 0.25rem;  --r2: 0.5rem;   --r3: 0.75rem;  --r4: 1rem;
  --r5: 1.5rem;   --r6: 2rem;     --r7: 3rem;     --r8: 4rem;
  --r9: 6rem;     --r10: 8rem;
  --sektion:  clamp(4.5rem, 8vw, 9rem);   /* Luft zwischen Abschnitten */
  --breite:   1240px;                      /* Maximale Inhaltsbreite */
  --breite-schmal: 720px;                  /* Fuer Fliesstext */
  --rand:     clamp(1.25rem, 5vw, 3rem);   /* Seitenrand */

  /* --- Ecken und Schatten (dezent = hochwertig) --- */
  --ecke-s: 4px;  --ecke-m: 8px;  --ecke-l: 16px;  --ecke-rund: 999px;
  --schatten-s: 0 1px 2px rgba(20,18,15,.05), 0 2px 8px rgba(20,18,15,.04);
  --schatten-m: 0 4px 12px rgba(20,18,15,.07), 0 12px 32px rgba(20,18,15,.06);
  --schatten-l: 0 12px 28px rgba(20,18,15,.10), 0 32px 64px rgba(20,18,15,.08);

  /* --- Bewegung --- */
  --weich:   320ms cubic-bezier(.4, 0, .2, 1);
  --schnell: 180ms cubic-bezier(.4, 0, .2, 1);
  --feder:   520ms cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* damit Ankerlinks nicht unter dem Kopf landen */
  /* "clip" statt "hidden": verhindert seitliches Wegscrollen auf dem Handy
     auch dann, wenn ein Element (etwa das ausgeblendete Menue) rechts
     ausserhalb des Bildschirms geparkt ist. "hidden" wuerde hier einen
     eigenen Scrollbereich erzeugen und das Problem nicht loesen. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--gr-m);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Tastatur-Bedienung sichtbar machen (Barrierefreiheit) */
:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 3px;
  border-radius: var(--ecke-s);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- 3. Ueberschriften ---------- */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--tinte);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--r4);
  text-wrap: balance;          /* verhindert einzelne Woerter in der letzten Zeile */
}
h1 { font-size: var(--gr-3xl); }
h2 { font-size: var(--gr-2xl); }
h3 { font-size: var(--gr-xl);  }
h4 { font-size: var(--gr-l); font-family: var(--schrift-text); font-weight: 600; }

p { margin: 0 0 var(--r4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--marke) 55%, transparent);
    text-underline-offset: 3px; transition: color var(--schnell); }
a:hover { color: var(--marke); }

/* Kleine Ueberschrift ueber der grossen ("Unsere Leistungen") */
.augenbraue {
  display: inline-flex; align-items: center; gap: var(--r3);
  font-family: var(--schrift-klein);
  font-size: var(--gr-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marke);
  margin-bottom: var(--r4);
}
.augenbraue::before {
  content: ''; width: 2.5rem; height: 1px;
  background: currentColor; opacity: .55;
}
.augenbraue--mittig::after {
  content: ''; width: 2.5rem; height: 1px;
  background: currentColor; opacity: .55;
}

.vorspann {
  font-size: var(--gr-l);
  color: var(--text-leise);
  line-height: 1.65;
  max-width: 56ch;
}

/* ---------- 4. Aufbau ---------- */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--schmal { max-width: var(--breite-schmal); }

.sektion { padding-block: var(--sektion); position: relative; }
.sektion--warm { background: var(--papier-warm); }
.sektion--dunkel {
  background: var(--tinte);
  color: var(--auf-dunkel);
}
.sektion--dunkel h1, .sektion--dunkel h2,
.sektion--dunkel h3, .sektion--dunkel h4 { color: var(--papier); }
.sektion--dunkel .vorspann { color: color-mix(in srgb, var(--papier) 70%, var(--tinte)); }

.kopfzeile-sektion { max-width: 60ch; margin-bottom: var(--r8); }
.kopfzeile-sektion--mittig { margin-inline: auto; text-align: center; }
.kopfzeile-sektion--mittig .vorspann { margin-inline: auto; }

.raster { display: grid; gap: var(--r6); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- 5. Knoepfe ---------- */
.knopf {
  --knopf-bg: var(--tinte);
  --knopf-farbe: var(--papier);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--r3);
  padding: 0.95rem 1.85rem;
  background: var(--knopf-bg);
  color: var(--knopf-farbe);
  font-family: var(--schrift-klein);
  font-size: var(--gr-s);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--knopf-bg);
  border-radius: var(--ecke-rund);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--weich), box-shadow var(--weich),
              background var(--weich), color var(--weich), border-color var(--weich);
}
.knopf:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-m);
  color: var(--knopf-farbe);
}
.knopf:active { transform: translateY(0); }

.knopf--marke  { --knopf-bg: var(--marke); --knopf-farbe: #fff; }
.knopf--umriss {
  --knopf-bg: transparent; --knopf-farbe: var(--tinte);
  border-color: var(--linie-stark);
}
.knopf--umriss:hover { border-color: var(--tinte); background: var(--tinte); color: var(--papier); }
.knopf--hell {
  --knopf-bg: transparent; --knopf-farbe: var(--papier);
  border-color: color-mix(in srgb, var(--papier) 40%, transparent);
}
.knopf--hell:hover { background: var(--papier); color: var(--tinte); }
.knopf--gross { padding: 1.15rem 2.4rem; font-size: var(--gr-m); }

/* Textlink mit Pfeil, der beim Zeigen wandert */
.pfeil-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--schrift-klein); font-size: var(--gr-s); font-weight: 600;
  letter-spacing: .04em; color: var(--marke); text-decoration: none;
}
.pfeil-link svg { transition: transform var(--weich); }
.pfeil-link:hover svg { transform: translateX(5px); }

/* ---------- 6. Karten ---------- */
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-l);
  padding: var(--r6);
  transition: transform var(--weich), box-shadow var(--weich), border-color var(--weich);
}
.karte--hebt:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
  border-color: color-mix(in srgb, var(--marke) 35%, var(--linie));
}

/* ---------- 7. Bilder ---------- */
.bild-rahmen {
  position: relative; overflow: hidden;
  border-radius: var(--ecke-l);
  background: var(--papier-warm);
}
.bild-rahmen img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.7,.3,1);
}
.bild-rahmen--zoom:hover img { transform: scale(1.045); }
.hoch  { aspect-ratio: 3 / 4; }
.quer  { aspect-ratio: 4 / 3; }
.breit { aspect-ratio: 16 / 9; }
.quadrat { aspect-ratio: 1; }

/* ---------- 8. Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: .5rem; }
.feld > label {
  font-family: var(--schrift-klein); font-size: var(--gr-s);
  font-weight: 600; color: var(--tinte);
}
.feld > label .pflicht { color: var(--marke); }

.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--ecke-m);
  font-size: var(--gr-m);
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 18%, transparent);
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld--fehler input, .feld--fehler textarea { border-color: #c0392b; }
.feld-fehler { font-size: var(--gr-s); color: #c0392b; }

.haken {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: var(--gr-s); color: var(--text-leise); line-height: 1.55;
}
.haken input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; flex: none;
                accent-color: var(--marke); }

/* ---------- 9. Sanftes Einblenden beim Scrollen ---------- */
[data-zeigen] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms cubic-bezier(.16,1,.3,1),
              transform 800ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--verzug, 0ms);
}
[data-zeigen].sichtbar { opacity: 1; transform: none; }

/* Wer Bewegung im System abgeschaltet hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-zeigen] { opacity: 1; transform: none; }
}

/* ---------- 10. Helfer ---------- */
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zum-inhalt {
  position: absolute; top: -100px; left: var(--rand); z-index: 200;
  background: var(--tinte); color: var(--papier);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--ecke-m) var(--ecke-m);
  text-decoration: none; transition: top var(--schnell);
}
.zum-inhalt:focus { top: 0; color: var(--papier); }

.mittig { text-align: center; }
.leise  { color: var(--text-leise); }
.betont { color: var(--marke); }
.kein-umbruch { white-space: nowrap; }

@media print {
  .kopf, .fuss, .schwebe-leiste, .knopf { display: none !important; }
}