/* Schiebel Capital — eine Datei für alle Seiten.
   Keine fremden Schriften und keine fremden Hosts: Google Fonts & Co. würden
   Besucher-IPs an Dritte geben, und die Datenschutzerklärung sagt „keine". */

:root {
  /* Nur hell: das Logo ist schwarz auf weiß und verschwände im Dunkeln. */
  color-scheme: light;
  --papier: #f7f5f1;
  --flaeche: #ffffff;
  --tinte: #1b1c1f;
  --leise: #5d5f66;
  --linie: #dcd8d0;
  --akzent: #7a5c3a;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 72rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--sans);
}
a { color: inherit; text-decoration-color: var(--linie); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); background: var(--papier); position: sticky; top: 0; z-index: 10; }
.kopf .rahmen { display: flex; align-items: center; gap: 2rem; min-height: 5rem; }
.marke { display: block; line-height: 0; }
/* Das gelieferte Logo hat einen weißen Grund; multiply lässt ihn im Papierton verschwinden. */
/* 73 px breit war der Schriftzug „Schiebel Capital" im Zeichen kaum lesbar (Jörg, 27.10.2026). */
.marke img { width: 112px; height: 60px; mix-blend-mode: multiply; }
@media (max-width: 40rem) { .marke img { width: 92px; height: 49px; } }
.wege { display: flex; gap: 1.75rem; margin-left: auto; font-size: .9375rem; }
.wege a { text-decoration: none; color: var(--leise); }
.wege a:hover { color: var(--tinte); }
.sprache { margin-left: auto; font-size: .8125rem; letter-spacing: .08em; text-decoration: none; border: 1px solid var(--linie); padding: .3rem .6rem; border-radius: 2px; }
.sprache:hover { border-color: var(--tinte); }

/* Auftakt */
.auftakt { padding: clamp(4rem, 12vw, 8.5rem) 0 clamp(3rem, 8vw, 6rem); }
.zeile { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); margin: 0 0 1.5rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2.25rem, 6vw, 4rem); max-width: 18ch; letter-spacing: -.01em; }
.einleitung { font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--leise); max-width: 40rem; margin: 1.75rem 0 0; }

/* Startseite: Titel auf dunklem Grund, der hinter den Karten ins Papier ausläuft.
   Titel und Karten müssen am Rechner zusammen auf den ersten Bildschirm passen
   (Luc, 27.10.2026) — darum wenig Luft oben und Karten mit 30rem statt 36rem. */
.start { --grund: #17130f; --sand: #d9c3a5; padding: 0 0 clamp(4rem, 9vw, 6.5rem); overflow-x: clip; }
/* Der dunkle Grund reicht über die ganze Breite, der Text bleibt im Rahmen:
   Schatten nach beiden Seiten, oben und unten abgeschnitten. */
.start .kopftext {
  position: relative; margin: 0; padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--grund); box-shadow: 0 0 0 100vmax var(--grund); clip-path: inset(0 -100vmax);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem 3rem; align-items: end;
}
.start .kopftext::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(60rem 13rem at 85% 0%, rgba(217, 195, 165, .16), transparent 100%);
}
.start .kopftext > * { position: relative; }
/* Etikett und Titel wie die AMR-Karte (marken/amr/karte.css bringt Fraunces und Archivo mit). */
.start .etikett { font: 700 11px/1 "Archivo", var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--sand); margin: 0 0 1.1rem; }
.start h1 {
  max-width: none; color: #f2efe9;
  font-family: "Fraunces", var(--serif); font-weight: 300; font-variation-settings: "opsz" 144;
  font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: .98; letter-spacing: -.025em;
}
.start h1 em { font-style: normal; color: var(--sand); }
.start .strich { display: flex; gap: 16px; padding-bottom: .5rem; }
.start .strich i { flex: none; width: 40px; height: 1px; background: var(--sand); margin-top: .8em; }
.start .strich p { margin: 0; color: #c9c3b9; font-size: 1.0625rem; line-height: 1.6; }
/* Der Übergang hängt an der Kartenreihe, nicht an einer Höhe der Seite: so läuft
   er auf jedem Bildschirm durch die obere Hälfte der Karten. */
.start .karten { position: relative; isolation: isolate; }
.start .karten::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 18rem; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--grund) 0, #5a4e43 35%, #d8d1c6 70%, var(--papier));
}
/* Auf dem dunklen Grund verschwände die Mokka-Karte sonst. */
.start .karte--beratung { box-shadow: inset 0 0 0 1px rgba(217, 195, 165, .25), 0 12px 32px -18px rgba(0, 0, 0, .5); }

.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.25rem); }

/* Jede Karte trägt die Marke ihres Geschäftsbereichs; hier steht nur, was alle
   drei teilen. Die Marken selbst liegen unter marken/. */
.karte {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 30rem; padding: 1.75rem 1.5rem 4.5rem;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(27, 28, 31, .06), 0 12px 32px -18px rgba(27, 28, 31, .35);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s;
}
.karte:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(27, 28, 31, .08), 0 26px 48px -22px rgba(27, 28, 31, .5); }
.karte:focus-visible { outline: 3px solid var(--akzent); outline-offset: 4px; border-radius: 0; }
.karte__kopf { width: 100%; padding: .5rem 0 1.5rem; }
.karte__inhalt { margin: auto 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .karte, .karte:hover { transition: none; transform: none; } }

/* Karte Beratung — die Marke dieser Seite, dunkel */
/* Mokka statt Schwarz: aus dem Bronze der Seite abgeleitet, warm statt kalt (Luc, 27.10.2026). */
.karte--beratung { background: #2d231d; color: #f2efe9; }
.karte--beratung .karte__kopf img { width: 220px; max-width: 100%; height: auto; }
/* „Unternehmensberatung" ist ein langes Wort; im HTML trägt es eine weiche Trennstelle. */
.karte--beratung h2 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); color: #fff; }
.karte--beratung .slogan { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.35; color: #d9c3a5; margin: .75rem auto 0; max-width: 18rem; }
.karte--beratung .details { font-size: .9375rem; color: #b9b5ad; margin: 1.1rem auto 0; max-width: 19rem; }
/* Knopf und Verhalten wie .amr-knopf (marken/amr/karte.css), damit alle drei
   Karten gleich antworten: beim Darüberfahren weicht der Text, der Knopf
   erscheint in der Mitte. Nur die Farben sind die der Beratung. */
.karte--beratung .karte__inhalt { transition: opacity 400ms ease; }
.sc-knopf {
  position: absolute; z-index: 3; left: 50%; top: 58%;
  transform: translate(-50%, -50%) translateY(10px);
  border: 1px solid rgba(242, 239, 233, .8); background: rgba(255, 255, 255, .04);
  padding: 15px 26px; color: #fff; white-space: nowrap;
  font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity 400ms ease, transform 400ms ease, background 200ms, border-color 200ms, color 200ms;
}
@media (hover: hover) {
  .karte--beratung:hover .karte__inhalt,
  .karte--beratung:focus-visible .karte__inhalt { opacity: 0; }
  .karte--beratung:hover .sc-knopf,
  .karte--beratung:focus-visible .sc-knopf { opacity: 1; transform: translate(-50%, -50%); }
  .karte--beratung:hover .sc-knopf { background: #d9c3a5; border-color: #d9c3a5; color: var(--tinte); }
}
/* Am Handy gibt es kein Darüberfahren: der Knopf steht unter dem Text. */
@media (hover: none) {
  .karte--beratung { padding-bottom: 6.5rem; }
  .sc-knopf { top: auto; bottom: 2.25rem; opacity: 1; transform: translateX(-50%); }
}

/* Beratungsseite: derselbe dunkle Auftakt wie die Startseite, darunter die
   Leistungsfelder als Kästen statt als Liste (Jörg, 27.10.2026: „mit mehr
   Graphiken oder Boxen übersichtlicher und ansprechender"). */
/* Der Titel ist das Zeichen selbst, „Advisory" genau wie im Logo (Luc, 27.10.2026). */
.start h1.schriftzug { line-height: 0; }
.start h1.schriftzug img { display: block; width: clamp(260px, 38vw, 480px); height: auto; }
.fokus {
  position: relative; margin: 0; padding: 0 0 clamp(2rem, 4vw, 2.75rem);
  background: var(--grund); box-shadow: 0 0 0 100vmax var(--grund); clip-path: inset(0 -100vmax);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid rgba(217, 195, 165, .22);
}
.fokus div { padding: 1.1rem 1.25rem 0 0; }
.fokus div + div { padding-left: 1.25rem; border-left: 1px solid rgba(217, 195, 165, .22); }
.fokus dt { font: 700 11px/1 "Archivo", var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sand); margin-bottom: .55rem; }
.fokus dd { margin: 0; color: #e7e1d7; font-size: .975rem; line-height: 1.45; }

.start .felder { position: relative; isolation: isolate; padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.start .felder::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 18rem; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--grund) 0, #5a4e43 35%, #d8d1c6 70%, var(--papier));
}
/* Ein Angebot, keine Auswahl (Luc, 27.10.2026): die fünf Felder sind gleichrangige,
   waagrechte Bänder einer einzigen Tafel — Titel links, Leistungen rechts —, nicht
   Karten nebeneinander, zwischen denen man wählen müsste. */
.felder {
  display: grid; gap: 1px; background: var(--linie);
  box-shadow: 0 1px 2px rgba(27, 28, 31, .06), 0 12px 32px -18px rgba(27, 28, 31, .35);
}
.feld {
  background: var(--flaeche); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
  /* Zeichen über dem Titel, beide in der Mitte ihrer Spalte und der Zeile (Luc, 27.10.2026):
     zwei gleich hohe Reihen, das Zeichen hängt unten an der oberen, der Titel oben an der unteren. */
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
  gap: 0 clamp(1.25rem, 2.5vw, 2rem);
}
.feld svg { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; width: 52px; height: 52px; display: block; margin-bottom: .9rem; fill: none; stroke: var(--akzent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.feld h2 { grid-column: 1; grid-row: 2; align-self: start; text-align: center; font-family: "Fraunces", var(--serif); font-weight: 300; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; }
.feld ul { grid-column: 2; grid-row: 1 / span 2; }
/* Jede Leistung ein Kästchen, nebeneinander in einer Reihe — so viele Spalten, wie das Feld Punkte hat. */
.feld ul { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; }
.feld li { background: var(--papier); border-top: 2px solid var(--akzent); padding: 1rem 1.1rem 1.15rem; color: var(--leise); font-size: .9rem; line-height: 1.55; }
.feld li b { display: block; color: var(--tinte); font-weight: 600; margin-bottom: .35rem; }
@media (max-width: 64rem) {
  .feld { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .feld ul { grid-column: 1; grid-row: 3; padding-top: 1.25rem; }
}
@media (max-width: 40rem) {
  .feld ul { grid-auto-flow: row; }
}

.ansprechpartner {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.75rem, 4vw, 2.5rem);
  background: #2d231d; color: #f2efe9;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center;
}
.ansprechpartner h2 { font-family: "Fraunces", var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; }
.ansprechpartner p { margin: .5rem 0 0; color: #c9c3b9; }
.ansprechpartner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ansprechpartner a { color: #fff; text-decoration-color: rgba(217, 195, 165, .5); }
.ansprechpartner a:hover { text-decoration-color: var(--sand); }

@media (max-width: 40rem) {
  .fokus { grid-template-columns: 1fr; }
  .fokus div, .fokus div + div { padding-left: 0; border-left: 0; }
  .ansprechpartner { grid-template-columns: 1fr; }
}

h2 { font-size: clamp(1.75rem, 4vw, 2.625rem); }
.wege ~ .sprache { margin-left: 1.25rem; }
/* Die Liste der Rechtsseiten (44rem, eingerückt) gilt hier nicht: vier Namen brauchen die volle Breite. */
.recht .personen { margin-top: .5rem; padding-left: 0; max-width: none; }
/* Personen und Kontakt */
.personen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); }
.personen li { padding: 1.25rem 1.25rem 0 0; }
/* Ein Name bricht nie um, sonst steht „Dr. Patrick" über „Schiebel" (Jörg, 27.10.2026). */
.personen .name { font-family: var(--serif); font-size: 1.1875rem; display: block; white-space: nowrap; }
.personen .rolle { color: var(--leise); font-size: .875rem; display: block; margin-top: .2rem; }
.personen a { font-size: .875rem; display: inline-block; margin-top: .5rem; }

.kontakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3.5rem; margin-top: 3rem; }
.kontakt h3 { font-size: .8125rem; font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: .6rem; }
.kontakt p { margin: 0; }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: 2.5rem 0 3rem; font-size: .8125rem; color: var(--leise); }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.fuss p { margin: 0; max-width: 46rem; }
.fuss nav { display: flex; gap: 1.5rem; }

/* Rechtsseiten */
.recht { padding: clamp(3rem, 8vw, 5rem) 0 clamp(4rem, 9vw, 6rem); }
.recht h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2.5rem; }
.recht h2 { font-size: 1.375rem; margin: 2.5rem 0 .75rem; }
.recht p, .recht ul, .recht dl { max-width: 44rem; }
.recht ul { padding-left: 1.2rem; }
.recht dl { display: grid; grid-template-columns: 13rem 1fr; gap: .5rem 1.5rem; margin: 0; }
.recht dt { color: var(--leise); }
.recht dd { margin: 0; }
/* Gewerbe im Impressum (IT-19): die drei Berechtigungen stehen untereinander im Feld "Gewerbe". */
.recht .gewerbe { list-style: none; padding: 0; margin: 0; }
.recht .gewerbe li + li { margin-top: .9rem; }
.recht .gewerbe small { display: block; color: var(--leise); font-size: .875rem; }

@media (max-width: 64rem) {
  .karten { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; }
  .karte { min-height: 30rem; }
  .start .kopftext { grid-template-columns: 1fr; }
}
@media (max-width: 56rem) {
  .personen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .wege { display: none; }
  .sprache, .wege ~ .sprache { margin-left: auto; }
  .kontakt { grid-template-columns: 1fr; }
  .personen { grid-template-columns: 1fr; }
  .recht dl { grid-template-columns: 1fr; gap: .1rem; }
  .recht dd { margin-bottom: .8rem; }
}

/* Startseite hell statt dunkel, und auf Laptop und iPad quer alles auf einem
   Bildschirm, ohne Scrollen (Patrick, 27.10.2026: „der hintergrund heller …
   wir brauchen nicht scrollen auf dem laptop", „ein bisschen breiter", „auch auf
   einem ipad … im quermodus auf eine seite"). Die Beratungsseite behält ihren
   dunklen Auftakt: ihr Zeichen ist hell gezeichnet. */
body.startseite { --papier: #fdfcfa; }
.startseite .kopf { background: #fff; }
.startseite .start { --grund: #f6f2ec; }
.startseite .start .kopftext::before { background: radial-gradient(60rem 13rem at 85% 0%, rgba(255, 255, 255, .55), transparent 100%); }
.startseite .start .etikett { color: var(--akzent); }
.startseite .start h1 { color: var(--tinte); }
.startseite .start h1 em { color: var(--akzent); }
.startseite .start .strich i { background: var(--akzent); }
.startseite .start .strich p { color: var(--leise); }
.startseite .start .karten::before { height: 12rem; background: linear-gradient(180deg, var(--grund), var(--papier)); }
.startseite .start .karte--beratung { box-shadow: 0 1px 2px rgba(27, 28, 31, .06), 0 12px 32px -18px rgba(27, 28, 31, .35); }

/* Ein Bildschirm: Kopf, Titel, Karten und Fuß teilen sich die Fensterhöhe, die
   Karten nehmen den Rest. Gilt ab 1024 px Breite (iPad quer) und 600 px Höhe;
   kleiner oder hochkant wird wie bisher gescrollt. */
@media (min-width: 64rem) and (min-height: 37.5rem) {
  body.startseite { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  /* Breiter als die übrigen Seiten: breitere Karten brauchen weniger Zeilen. */
  .startseite .rahmen { max-width: 90rem; }
  .startseite .kopf .rahmen { min-height: 4.5rem; }
  .startseite .start { flex: 1; display: flex; flex-direction: column; padding-bottom: clamp(1rem, 3vh, 2rem); }
  .startseite .start > .rahmen { flex: 1; display: flex; flex-direction: column; width: 100%; }
  .startseite .start .kopftext { grid-template-columns: 1.15fr 1fr; padding: clamp(1rem, 3.5vh, 2.75rem) 0 clamp(1rem, 2.5vh, 2rem); }
  .startseite .start .etikett { margin-bottom: clamp(.6rem, 1.6vh, 1.1rem); }
  .startseite .start h1 { font-size: clamp(2.5rem, min(5vw, 8vh), 4.25rem); }
  /* Die drei Karten bleiben nebeneinander, auch am iPad quer (sonst bis 64rem untereinander). */
  .startseite .start .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin: 0; flex: 1; max-height: 34rem; }
  /* --seite ist der seitliche Innenrand; AMR-Band und -Bild reichen bis an den Kartenrand. */
  .startseite .karte { --seite: 1.5rem; min-height: 20rem; padding: 1.25rem var(--seite) 1.5rem; }
  .startseite .karte__kopf { padding: .25rem 0 .75rem; }
  .startseite .amr-kopf { width: calc(100% + 2 * var(--seite)); margin: -1.5rem calc(-1 * var(--seite)) 0; padding: 1.75rem var(--seite) 1.25rem; }
  .startseite .amr-inhalt h2 { max-width: 14ch; }
  .startseite .karte--beratung h2 { font-size: clamp(1.5rem, 2vw, 1.75rem); }
  .startseite .karte--beratung .details, .startseite .amr-inhalt .strich { margin-top: .75rem; }
  .startseite .fuss { font-size: .75rem; padding: .85rem 0; }
  .startseite .fuss .rahmen { flex-wrap: nowrap; align-items: center; }
  .startseite .fuss p { max-width: none; }
}
/* Niedrige Bildschirme: Kopf und Karten etwas knapper, damit der Fuß sichtbar bleibt. */
@media (min-width: 64rem) and (min-height: 37.5rem) and (max-height: 46rem) {
  .startseite .kopf .rahmen { min-height: 4rem; }
  .startseite .karte { padding-top: 1rem; padding-bottom: 1.25rem; }
  .startseite .karte__kopf { padding-bottom: .5rem; }
  .startseite .amr-kopf { margin-top: -1rem; padding-top: 1.25rem; padding-bottom: 1rem; }
  .startseite .karte--beratung .karte__kopf img { width: 190px; }
  .startseite .amr-inhalt .strich p, .startseite .karte--beratung .details, .startseite .aw-inhalt .details { font-size: .875rem; }
}
/* iPad quer: ohne Darüberfahren steht der Knopf fest unten in der Karte. Das
   Winterbild nimmt nur den Platz, der übrig ist, statt die Karte zu verlängern,
   mindestens aber den unter dem Knopf, damit er nie über dem Text liegt. Der
   AMR-Knopf ist nachtblau, damit er auch auf hellem Bildrand lesbar bleibt.
   Steht nach dem Block für niedrige Bildschirme, damit dessen padding-bottom
   den Platz für den Knopf nicht wieder wegnimmt. */
@media (min-width: 64rem) and (min-height: 37.5rem) and (hover: none) {
  .startseite .karte--beratung, .startseite .karte--allways, .startseite .karte--amr { padding-bottom: 4.75rem; }
  .startseite .sc-knopf, .startseite .aw-knopf, .startseite .amr-knopf { bottom: 1.25rem; padding: 12px 22px; }
  .startseite .amr-inhalt { margin-top: .5rem; }
  .startseite .amr-bild { flex: 1 1 0; min-height: 4.75rem; width: calc(100% + 2 * var(--seite)); margin: .5rem calc(-1 * var(--seite)) -4.75rem; }
  .startseite .amr-knopf { background: var(--nacht); border-color: var(--nacht); }
}
/* Schmale Bildschirme dieser Gruppe (iPad quer, kleine Laptops): Einleitung
   breiter und kleiner, Karten mit weniger Rand, damit nichts unnötig umbricht. */
@media (min-width: 64rem) and (max-width: 80rem) and (min-height: 37.5rem) {
  .startseite .start .kopftext { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem 2rem; }
  .startseite .start .strich p { font-size: .9375rem; line-height: 1.55; }
  .startseite .karte { --seite: 1.1rem; }
  .startseite .karte--beratung h2 { font-size: 1.375rem; }
  .startseite .karte--beratung .slogan { font-size: 1.0625rem; max-width: none; }
  .startseite .karte--beratung .details { max-width: none; }
  .startseite .fuss { padding: .6rem 0; }
  .startseite .fuss .rahmen { flex-wrap: wrap; gap: .25rem 2rem; }
}

/* Mehr Luft auf der Startseite (Luc, 27.10.2026: „looks a bit squeezed … more space
   between all the pieces"). Grund, Band und Verlauf bleiben wie oben; nur Abstände,
   Rand und Breite wachsen. Alles muss weiter auf einen Bildschirm passen, darum
   wächst die Luft mit der Höhe (vh) und schrumpft auf niedrigen Laptops. */
@media (min-width: 64rem) and (min-height: 37.5rem) {
  .startseite .rahmen { max-width: 82rem; padding-left: clamp(2rem, 5vw, 4.5rem); padding-right: clamp(2rem, 5vw, 4.5rem); }
  .startseite .kopf .rahmen { min-height: clamp(4.5rem, 10vh, 6rem); }
  .startseite .start { padding-bottom: clamp(1.5rem, 5vh, 3.5rem); }
  .startseite .start .kopftext { padding: clamp(1.25rem, 4vh, 3rem) 0 clamp(1.75rem, 6vh, 3.75rem); gap: 1.5rem clamp(3rem, 6vw, 6rem); }
  .startseite .start .karten { gap: clamp(1.5rem, 2.6vw, 2.75rem); max-height: 32rem; }
  .startseite .fuss { padding: clamp(.9rem, 2.5vh, 1.6rem) 0; }
}
/* Bis 48rem Höhe (iPad quer 1024 × 768 eingeschlossen) die knappe Fassung; die
   deutsche Einleitung ist eine Zeile länger als die englische und braucht die
   schmalere Lücke, sonst scrollt sie bei 600–645 px Höhe (Review 27.10.2026). */
@media (min-width: 64rem) and (min-height: 37.5rem) and (max-height: 48rem) {
  .startseite .kopf .rahmen { min-height: 4.5rem; }
  .startseite .start .kopftext { padding-top: .75rem; padding-bottom: clamp(1.25rem, 4vh, 2rem); gap: 1rem 2.5rem; }
  .startseite .start .strich p { font-size: .9375rem; line-height: 1.55; }
  .startseite .start { padding-bottom: 1.25rem; }
  .startseite .fuss { padding: .65rem 0; }
}
@media (min-width: 64rem) and (min-height: 37.5rem) and (max-height: 40rem) {
  .startseite .start .kopftext { padding-top: .25rem; }
}
/* Am iPad quer (Touch, kein Darüberfahren) brauchen die Karten mehr Höhe für den
   festen Knopf; dort gelten Rand, Lücke und Fuß der schmalen Fassung von oben,
   sonst scrollt die Seite wieder (Review 27.10.2026: 1024 × 690 war 742 px hoch). */
@media (min-width: 64rem) and (max-width: 80rem) and (min-height: 37.5rem) and (hover: none) {
  .startseite .rahmen { padding-left: 1.5rem; padding-right: 1.5rem; }
  .startseite .kopf .rahmen { min-height: 4.5rem; }
  .startseite .start .kopftext { gap: 1rem 2rem; padding-top: .5rem; padding-bottom: 1.25rem; }
  .startseite .start { padding-bottom: 1rem; }
  .startseite .start .karten { gap: 1rem; }
  .startseite .fuss { padding: .6rem 0; }
}