/* =========================================================================
   Coming-Soon-Seite
   Privatpraxis fuer Stress- und Regulationsmedizin
   Dr. med. Manuel Ortega Castillo, Muenchen-Nymphenburg

   Reines CSS, kein Framework. Design-Tokens als CSS-Variablen in :root.
   padding und margin bewusst als Longhand mit festen Werten, damit die
   Seite spaeter in Astro mit Stacki visuell bearbeitbar bleibt.
   ========================================================================= */

:root {
  /* Farbe: eine einzige Flaeche in Lachs, vom Kunden am 11.09.2026 gewaehlt. */
  --farbe-flaeche: #FFDABE;
  --farbe-weiss: #FFFFFF;
  --farbe-hell: #F7F6FA;
  --farbe-text: #1A1A1A;
  --farbe-text-leise: #4B4B52;
  --farbe-linie-leise: rgba(26, 26, 26, 0.22);
  --farbe-trenner: rgba(26, 26, 26, 0.42);
  --farbe-feld-rand: rgba(26, 26, 26, 0.28);

  /* Schrift: Arsenica ueber Adobe Fonts, lokales Prata als Ausfallschutz. */
  --schrift-headline: "arsenica-variable", 'Prata', Georgia, 'Times New Roman', serif;
  --schrift-text: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Schriftgroessen. Die Headline traegt die Flaeche und skaliert deshalb
     kraeftig mit der Fensterbreite. */
  --groesse-h1: clamp(1.625rem, 0.75rem + 5.1vw, 5.75rem);
  --groesse-name: clamp(1.125rem, 0.98rem + 0.7vw, 1.75rem);
  --groesse-text: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --groesse-klein: clamp(0.875rem, 0.85rem + 0.16vw, 0.9375rem);
  --groesse-mini: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem);

  --zeile-eng: 1.08;
  --zeile-mittel: 1.6;

  --abstand-buchstabe: 0.14em;

  /* Weisser Rahmen. Der Wert steht als feste Zahl auch im body-padding,
     hier nur fuer die Hoehen- und Radiusberechnung der Buehne. */
  --rahmen: 20px;
  /* Konzentrischer Innenradius: aussen die abgerundete Fensterecke,
     innen dieselbe Rundung abzueglich der Rahmenbreite. min() haelt den
     Wert auf kleinen Fenstern proportional. */
  --radius-buehne: min(2.5vw, 22px);
  --radius-klein: 3px;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--farbe-weiss);
}

body,
h1,
h2,
h3,
p,
ul,
figure {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

ul {
  padding-left: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background-color: var(--farbe-weiss);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  font-weight: 400;
  line-height: var(--zeile-mittel);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--farbe-linie-leise);
}

:focus-visible {
  outline: 2px solid var(--farbe-text);
  outline-offset: 3px;
  border-radius: var(--radius-klein);
}

.nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buehne ----------
   Genau eine Bildschirmhoehe abzueglich des weissen Rahmens. Drei Zonen,
   ueber space-between verteilt, damit die Flaeche bespielt ist statt einen
   Textklumpen in der Mitte zu tragen. svh, damit am Handy nichts springt,
   wenn die Browserleiste ein- und ausfaehrt. */

.buehne {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 40px);
  min-height: calc(100svh - 40px);
  background-color: var(--farbe-flaeche);
  border-radius: var(--radius-buehne);
  text-align: center;
  padding-top: 26px;
  padding-right: 18px;
  padding-bottom: 26px;
  padding-left: 18px;
}

/* ---------- Kopfzone ---------- */

/* ---------- Mittelzone ----------
   Nimmt den freien Raum ein und zentriert die Gruppe aus Ortszeile,
   Headline und Name darin. So sitzt die Ortszeile direkt ueber der
   Ueberschrift statt am oberen Bildschirmrand zu kleben. */

.mitte {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.kopf {
  font-size: var(--groesse-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--farbe-text-leise);
  margin-bottom: 20px;
}

.headline {
  font-family: var(--schrift-headline);
  font-size: var(--groesse-h1);
  font-weight: 300;
  font-variation-settings: "opsz" 100, "wght" 300;
  line-height: var(--zeile-eng);
  letter-spacing: -0.012em;
  text-wrap: balance;
  /* "Regulationsmedizin" ist laenger als ein schmales Handy breit ist.
     Silbentrennung statt die Schrift dafuer zu verkleinern.
     Das -webkit-Praefix ist Pflicht: Safari auf iOS und macOS ignoriert
     hyphens ohne das Praefix, dann laeuft die Ueberschrift ueber den Rand. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  max-width: 20ch;
  margin-right: auto;
  margin-left: auto;
}

.name {
  font-family: var(--schrift-headline);
  font-size: var(--groesse-name);
  font-weight: 400;
  font-variation-settings: "opsz" 40, "wght" 400;
  line-height: 1.3;
  margin-top: 30px;
}

.rolle {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
  text-wrap: pretty;
  margin-top: 8px;
}

/* ---------- Fusszone ---------- */

/* Vier Schwerpunkte als Raster mit Haarlinien: waagerecht ober- und
   unterhalb, senkrecht zwischen den Feldern. Bewusst enger gesetzt als
   die erste Fassung, damit die Woerter nicht verloren wirken. */
.schwerpunkte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: var(--groesse-klein);
  line-height: 1.3;
  color: var(--farbe-text);
  border-top: 1px solid var(--farbe-linie-leise);
  border-bottom: 1px solid var(--farbe-linie-leise);
  /* Gleich hohe Reihen, sonst sitzt die Trennlinie schief, sobald ein
     Begriff wie "ADHS im Erwachsenenalter" zweizeilig umbricht. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  max-width: 46rem;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.schwerpunkte li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  padding-right: 10px;
  padding-bottom: 12px;
  padding-left: 10px;
}

/* Zweispaltig: senkrechte Linie in der Mitte, waagerechte zwischen den Reihen */
.schwerpunkte li:nth-child(2n) {
  border-left: 1px solid var(--farbe-linie-leise);
}

.schwerpunkte li:nth-child(n + 3) {
  border-top: 1px solid var(--farbe-linie-leise);
}

/* ---------- Formular ----------
   Gleiche Breite wie das Raster, damit die Linie darunter buendig sitzt.
   Die Eingabeelemente selbst bleiben schmal und mittig. */

.formular {
  max-width: 46rem;
  border-bottom: 1px solid var(--farbe-linie-leise);
  margin-right: auto;
  margin-left: auto;
  padding-top: 26px;
  padding-bottom: 26px;
  width: 100%;
}

/* Eingabezeile und Einwilligung laufen auf voller Rasterbreite,
   damit sie mit den Schwerpunkten darueber buendig stehen. */
.formular__feld {
  flex: 1 1 12rem;
}

/* Spamschutz-Feld: fuer Menschen unsichtbar, aber nicht display:none,
   damit Bots es als echtes Feld lesen und ausfuellen. */
.falle {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__text {
  font-size: var(--groesse-klein);
  margin-bottom: 12px;
}

.formular__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.formular__feld {
  flex: 1 1 13rem;
  min-width: 0;
  font-family: inherit;
  font-size: var(--groesse-klein);
  color: var(--farbe-text);
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-feld-rand);
  border-radius: var(--radius-klein);
  padding-top: 13px;
  padding-right: 14px;
  padding-bottom: 13px;
  padding-left: 14px;
}

.formular__feld::placeholder {
  color: var(--farbe-text-leise);
  opacity: 0.8;
}

.knopf {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--groesse-mini);
  font-weight: 600;
  letter-spacing: var(--abstand-buchstabe);
  text-transform: uppercase;
  color: var(--farbe-weiss);
  background-color: var(--farbe-text);
  border: 1px solid var(--farbe-text);
  border-radius: var(--radius-klein);
  cursor: pointer;
  padding-top: 13px;
  padding-right: 22px;
  padding-bottom: 13px;
  padding-left: 22px;
}

.knopf:hover {
  background-color: var(--farbe-text-leise);
  border-color: var(--farbe-text-leise);
}

.formular__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
}

.formular__haken {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--farbe-text);
  cursor: pointer;
  margin-top: 3px;
}

.formular__einwilligung-text {
  font-size: var(--groesse-mini);
  line-height: 1.5;
  color: var(--farbe-text-leise);
  cursor: pointer;
}

/* ---------- Rechtliche Fusszeile ---------- */

.rechtlich {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  font-size: var(--groesse-mini);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--farbe-text-leise);
  border-top: 1px solid var(--farbe-linie-leise);
  padding-top: 18px;
}

/* Flex-Items haben min-width: auto und schrumpfen sonst nicht unter ihre
   min-content-Breite. Ohne das lief die Fusszeile auf Handys aus dem Bild. */
.rechtlich__zeile {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: left;
}

.rechtlich__urheber {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  white-space: nowrap;
}

.strich {
  color: var(--farbe-linie-leise);
  padding-right: 6px;
  padding-left: 6px;
}

/* ---------- Rechtsseiten: Impressum und Datenschutz ---------- */

.block {
  width: 100%;
}

.block--hell {
  background-color: var(--farbe-hell);
  padding-top: 44px;
  padding-right: 20px;
  padding-bottom: 44px;
  padding-left: 20px;
}

.inhalt--text {
  max-width: var(--breite-text);
  text-align: left;
}

.recht__zurueck {
  display: inline-block;
  font-size: var(--groesse-mini);
  letter-spacing: var(--abstand-buchstabe);
  text-transform: uppercase;
  margin-bottom: 26px;
}

.recht__titel {
  font-family: var(--schrift-headline);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 400;
  font-variation-settings: "opsz" 100, "wght" 400;
  line-height: var(--zeile-eng);
  margin-bottom: 20px;
}

.recht__warnung {
  font-size: var(--groesse-klein);
  line-height: 1.6;
  background-color: #FFDABE;
  border-radius: var(--radius-klein);
  padding-top: 16px;
  padding-right: 18px;
  padding-bottom: 16px;
  padding-left: 18px;
  margin-bottom: 34px;
}

.recht__abschnitt {
  font-size: var(--groesse-klein);
  font-weight: 700;
  letter-spacing: var(--abstand-buchstabe);
  text-transform: uppercase;
  /* Woerter wie "Berufshaftpflichtversicherung" sind in Grossbuchstaben mit
     Sperrung breiter als ein Handy. Trennung erlauben, -webkit-Praefix fuer
     Safari zwingend. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  margin-top: 38px;
  margin-bottom: 16px;
}

.recht__unterabschnitt {
  font-size: var(--groesse-text);
  font-weight: 700;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  margin-top: 24px;
  margin-bottom: 8px;
}

.recht__text {
  line-height: 1.75;
  /* Rechtstexte enthalten lange Links und Fundstellen. Ohne Umbruch im Wort
     laufen die auf schmalen Displays aus dem Bild. */
  overflow-wrap: break-word;
  margin-bottom: 14px;
}

.recht__liste {
  line-height: 1.75;
  overflow-wrap: break-word;
  margin-bottom: 14px;
  padding-left: 20px;
  list-style: disc;
}

.recht__liste li {
  margin-bottom: 5px;
}

/* ---------- Schriften: Montserrat lokal, DSGVO-schonend ---------- */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ausfallschutz, falls Adobe Fonts nicht laedt oder blockiert wird. */
@font-face {
  font-family: 'Prata';
  src: url('../fonts/prata-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Ab Tablet ---------- */

@media (min-width: 40em) {
  .schwerpunkte {
    /* Nach Textlaenge verteilt, sonst bricht "ADHS im Erwachsenenalter" um. */
    grid-template-columns: 7fr 5fr 4fr 4fr;
  }

  .schwerpunkte li:nth-child(n + 2) {
    border-left: 1px solid var(--farbe-linie-leise);
  }

  .schwerpunkte li:nth-child(n + 3) {
    border-top: 0;
  }

  .schwerpunkte li {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .buehne {
    padding-top: 36px;
    padding-right: 40px;
    padding-bottom: 36px;
    padding-left: 40px;
  }

  .mitte {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .block--hell {
    padding-top: 72px;
    padding-right: 40px;
    padding-bottom: 72px;
    padding-left: 40px;
  }
}

/* ---------- Ab Desktop ---------- */

@media (min-width: 64em) {
  .buehne {
    padding-top: 44px;
    padding-right: 56px;
    padding-bottom: 44px;
    padding-left: 56px;
  }

  .block--hell {
    padding-top: 96px;
    padding-right: 56px;
    padding-bottom: 96px;
    padding-left: 56px;
  }
}

/* ---------- Flache Fenster: Abstaende straffen ---------- */

@media (max-height: 820px) {
  .mitte {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .kopf {
    margin-bottom: 14px;
  }

  .name {
    margin-top: 20px;
  }

  .schwerpunkte {
    margin-top: 20px;
  }

  .schwerpunkte li {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .formular {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .rechtlich {
    padding-top: 13px;
  }
}

/* ---------- Schmale Geraete ----------
   Auf Handybreite brechen Kopfzeile, Rolle und Schwerpunkte mehrzeilig um.
   Deshalb hier engere Abstaende, damit die Buehne eine Bildschirmhoehe haelt. */

@media (max-width: 30em) {
  /* Auf dem Handy linksbuendig. Zentrierter Flattersatz wird auf schmalen
     Zeilen unruhig, links steht eine feste Lesekante. */
  .buehne {
    text-align: left;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .headline {
    max-width: none;
    margin-left: 0;
  }

  .formular {
    margin-left: 0;
  }

  .schwerpunkte {
    margin-left: 0;
  }

  .schwerpunkte li {
    justify-content: flex-start;
  }

  /* Eingabefeld und Knopf untereinander, beide ueber die volle Breite. */
  .formular__zeile {
    flex-direction: column;
    gap: 8px;
  }

  .formular__feld {
    flex: 1 1 auto;
    width: 100%;
  }

  .knopf {
    width: 100%;
  }

  .mitte {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .kopf {
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }

  .name {
    margin-top: 14px;
  }

  .rolle {
    margin-top: 6px;
  }

  /* Auf Handybreite stehen die vier Begriffe zweispaltig und brechen
     mehrzeilig um. Deshalb hier enger gesetzt. */
  .schwerpunkte {
    line-height: 1.25;
    margin-top: 18px;
  }

  .schwerpunkte li {
    padding-top: 10px;
    padding-right: 6px;
    padding-bottom: 10px;
    padding-left: 6px;
  }

  .formular {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .formular__text {
    margin-bottom: 8px;
  }

  .formular__zeile {
    margin-bottom: 8px;
  }

  .rechtlich {
    flex-direction: column;
    /* Kein align-items: flex-start hier. In einer Column-Flexbox waere das
       die Querachse, das Item wuechse auf max-content statt umzubrechen.
       stretch ist der Default und genau das, was wir brauchen. */
    gap: 5px;
    line-height: 1.45;
    padding-top: 12px;
  }

  .rechtlich__urheber {
    white-space: normal;
  }
}


/* ---------- Schmale Displays: gesperrte Grossbuchstaben brauchen Platz ---------- */

@media (max-width: 30em) {
  .recht__abschnitt {
    letter-spacing: 0.06em;
  }
}