/* alt cmd shift — eine Tinte, ein Grund */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-400.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-600.woff2") format("woff2");
}

:root {
  --tinte: #0055A5;
  --grund: #FDFBF7;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;

  --rand: clamp(1.5rem, 6vw, 5.5rem);

  /* Beschreibungssatz und Button teilen sich eine Größe */
  --satz: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);

  color-scheme: light;
}

/* Dunkel nach Systemeinstellung, solange niemand von Hand umgeschaltet hat */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinte: #FDFBF7;
    --grund: #0055A5;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --tinte: #FDFBF7;
  --grund: #0055A5;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  text-align: left;
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

::selection {
  background: var(--tinte);
  color: var(--grund);
}

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

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 4px;
}

/* Kopf — bekommt später die Navigation als zweites Kind */

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: var(--rand) var(--rand) 0;
}

.marke {
  display: block;
  /* Gleicher Maßstab wie die dreizeilige Marke mobil (12rem):
     die einzeilige ist 667 : 401 so breit, also 12rem × 1,665 */
  width: 20rem;
  max-width: 100%;
  color: inherit;
}

.marke svg {
  display: block;
  width: 100%;
  height: auto;
}

.marke .dreizeilig {
  display: none;
}

/* Handy: dreizeilige Marke */
@media (max-width: 40rem) {
  .marke {
    width: clamp(8rem, 36vw, 10rem);
  }

  .marke .einzeilig {
    display: none;
  }

  .marke .dreizeilig {
    display: block;
  }
}

/* Bewegte Marke: nur die vier Balken ändern ihre Höhe, von der Mittelachse
   aus; vier Takte, damit nie zwei im Gleichtakt laufen. Jeder Takt beginnt
   und endet im Ruhezustand – wer Bewegung reduziert hat, sieht die ruhende Marke. */

.marke .balken {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .marke .b1 { animation: balken1 1.9s ease-in-out infinite; }
  .marke .b2 { animation: balken2 1.5s ease-in-out infinite; }
  .marke .b3 { animation: balken3 2.3s ease-in-out infinite; }
  .marke .b4 { animation: balken4 1.7s ease-in-out infinite; }
}

@keyframes balken1 { 0% { transform: scaleY(1); } 25% { transform: scaleY(1.44); } 55% { transform: scaleY(.52); } 80% { transform: scaleY(1.16); } 100% { transform: scaleY(1); } }
@keyframes balken2 { 0% { transform: scaleY(1); } 20% { transform: scaleY(2.45); } 50% { transform: scaleY(.64); } 75% { transform: scaleY(1.82); } 100% { transform: scaleY(1); } }
@keyframes balken3 { 0% { transform: scaleY(1); } 30% { transform: scaleY(.39); } 60% { transform: scaleY(.86); } 85% { transform: scaleY(.31); } 100% { transform: scaleY(1); } }
@keyframes balken4 { 0% { transform: scaleY(1); } 35% { transform: scaleY(.43); } 65% { transform: scaleY(1.71); } 90% { transform: scaleY(.86); } 100% { transform: scaleY(1); } }

/* Inhalt */

main {
  flex: 1 0 auto;
  padding: 0 var(--rand);
}

/* Startseite */

.start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(5rem, 16vh, 11rem);
}

.kernsatz {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* Immer genau zwei Zeilen: die längere muss in die Breite passen */
  font-size: min(clamp(2.875rem, 1.6rem + 6.4vw, 7rem), calc((100vw - 2 * var(--rand)) / 9.3));
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.kernsatz span {
  display: block;
  white-space: nowrap;
}

/* Als Block mittig, die Zeilen rechtsbündig – in jeder Breite */
.kernsatz {
  margin-inline: auto;
  text-align: right;
}

/* 404: Fehlercode über dem Kernsatz, gesetzt wie die Zwischenüberschriften
   der Rechtstexte; Rückweg darunter, eine Zeile abgesetzt. Beide mittig.
   Kernsatz und Button stehen wie auf der Startseite. */
.fehler {
  width: fit-content;
  margin-inline: auto;
}

.fehler p {
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

.fehler p:first-child {
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  line-height: 1.2;
}

.fehler .zurueck {
  margin-top: calc(1.5rem + 1.4em);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Ab Tabletbreite hängen Fehlercode und Rückweg außerhalb des Flusses, damit
   Kernsatz und Button genau dort stehen wie auf der Startseite. Mobil bleiben
   sie im Fluss: dort steht der Button ohnehin am unteren Rand, und der Block
   rückt mittig darüber. */
@media (min-width: 40.0625rem) {
  .fehler {
    position: relative;
  }

  .fehler p {
    position: absolute;
    inset-inline: 0;
  }

  .fehler p:first-child {
    bottom: 100%;
  }

  .fehler .zurueck {
    top: 100%;
  }
}

.beschreibung {
  margin: 0;
  max-width: 17em;
  font-size: var(--satz);
  line-height: 1.4;
}

.schritt {
  margin-top: clamp(4.5rem, 12vh, 7rem);
  text-align: center;
}

.knopf {
  display: inline-block;
  padding: 0.95em 1.6em;
  border: 2px solid var(--tinte);
  background: transparent;
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--satz);
  line-height: 1.2;
  text-decoration: none;
}

.knopf:hover,
.knopf:focus-visible {
  background: var(--tinte);
  color: var(--grund);
}

.zusatz {
  margin: 1rem 0 0;
  /* Höchstens 14 px; auf sehr schmalen Geräten kleiner, damit jede Zeile
     einzeilig bleibt und der Zusatz immer kleiner ist als der Button */
  font-size: min(0.875rem, calc((100vw - 2 * var(--rand)) / 19.8));
  line-height: 1.4;
}

.zusatz span {
  display: block;
  white-space: nowrap;
}

/* Fuß */

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5em;
  padding: 3rem var(--rand) var(--rand);
  /* Höchstens 14 px; auf sehr schmalen Geräten kleiner,
     damit Links und Umschalter in einer Zeile bleiben */
  font-size: min(0.875rem, calc((100vw - 2 * var(--rand)) / 17.4));
}

.fuss p {
  margin: 0;
}

/* Startseite: Kopf, Kernsatz und Button füllen den ersten Bildschirm,
   der Fuß beginnt erst knapp darunter – auch auf hohen Tablets.
   Fußhöhe: 3rem oben + eine Zeile + var(--rand) unten */
body:has(.start) {
  min-height: calc(100svh + 4.5rem + var(--rand));
}

.fuss .trenner {
  margin-inline: 0.5em;
}

.umschalter {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.umschalter:hover {
  text-decoration-thickness: 2px;
}

/* Rechtstexte */

.text {
  /* Lesebreite ohne die Seitenränder gerechnet */
  max-width: calc(42rem + 2 * var(--rand));
  /* unten kein Rand: den Abstand zum Button-Block setzt .buchung */
  padding-block: clamp(3.5rem, 10vh, 7rem) 0;
  /* Lange Wörter wie „Unterstützungsplattformen“ auf schmalen Geräten trennen */
  hyphens: auto;
  overflow-wrap: break-word;
}

.text h1 {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.8rem + 3.2vw, 4rem);
  line-height: 1.05;
}

.text h2 {
  margin: 3rem 0 0.75rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  line-height: 1.2;
}

.text h3 {
  margin: 2rem 0 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.4;
}

.text p,
.text ul,
.text address {
  margin: 0 0 1rem;
}

.text address {
  font-style: normal;
}

.text ul {
  padding-left: 1.25em;
}

.text li + li {
  margin-top: 0.4rem;
}

.text strong {
  font-weight: 600;
}

/* Widerspruchsrecht: abgesetzt durch eine Linie in Rahmenstärke des Buttons */
.hervorgehoben {
  margin: 0 0 1rem;
  padding-left: 1.25em;
  border-left: 2px solid var(--tinte);
}

.hervorgehoben p:last-child {
  margin-bottom: 0;
}

.stand {
  margin-top: 3rem;
  font-size: 0.875rem;
}

/* Am Textende der Weg zurück, darunter mittig auf der Seite der Weg zum
   Termin – Button und Zusatz wie auf der Startseite */
.text .zurueck {
  margin: 3rem 0 0;
  font-size: 0.875rem;
}

/* 100 px Luft zum Link darüber und – zusammen mit den 3rem oben im Fuß –
   100 px bis „Impressum · Datenschutz“ */
.buchung {
  padding: 6.25rem var(--rand) 3.125rem;
  text-align: center;
}

/* Ab Tabletbreite: Satz immer einzeilig, rechts bündig mit „Hell“.
   Passt er mit Mindestabstand neben die Marke, steht er daneben,
   sonst bricht der Kopf um und der Satz rutscht eine Zeile tiefer. */

@media (min-width: 40.0625rem) {
  .kopf {
    column-gap: 5.5rem;
  }

  .beschreibung {
    margin-left: auto;
    max-width: none;
    text-align: right;
    white-space: nowrap;
  }
}

/* Ob der Satz neben der Marke steht, entscheidet allein die Breite – so können
   die Rechtstexte dieselbe Grenze nutzen. Darunter steht er immer eine Zeile
   tiefer, darüber immer daneben (er passt ab etwa 69rem). */

@media (min-width: 40.0625rem) and (max-width: 69.99rem) {
  .beschreibung {
    flex-basis: 100%;
  }
}

@media (min-width: 70rem) {
  .kopf {
    flex-wrap: nowrap;
  }

  /* Satz neben der Marke: die Rechtstexte stehen mittig, auf einer Achse mit
     Button und Zusatz darunter */
  .text {
    width: 100%;
    margin-inline: auto;
  }
}

/* Tablet hochkant: der Kernsatz steht in der Mitte des Bildschirms,
   der Button mittig im Raum darunter, etwas unter der Mitte.
   Der Kopf liegt dafür über dem ersten Bildschirm statt ihn zu verkürzen. */

@media (min-width: 40.0625rem) and (orientation: portrait) {
  body:has(.start) {
    position: relative;
  }

  body:has(.start) .kopf {
    position: absolute;
    inset: 0 0 auto;
  }

  .start {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    padding-block: 0 env(safe-area-inset-bottom);
  }

  .kernsatz,
  .fehler {
    grid-row: 2;
  }

  .schritt {
    grid-row: 3;
    align-self: center;
    margin-top: 2rem;
  }
}

/* Handy: Marke links, Sätze rechts, Button breit, Zusatz mittig.
   Feste Zeilen, die Schriftgröße folgt der Breite. */

@media (max-width: 40rem) {
  :root {
    --satz: min(calc((100vw - 2 * var(--rand)) / 16.7), 1.375rem);
  }

  /* Fuß hier eine Zeile höher (siehe unten) */
  body:has(.start) {
    min-height: calc(100svh + 6rem + var(--rand));
  }

  /* Unter dem Fuß eine Zeile mehr Luft */
  .fuss {
    padding-bottom: calc(var(--rand) + 1.5em);
  }

  .kopf {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .marke {
    align-self: flex-start;
  }

  .beschreibung {
    max-width: none;
    line-height: 1.35;
    text-align: right;
  }

  .beschreibung span {
    display: block;
    white-space: nowrap;
  }

  /* Button am unteren Ende des ersten Bildschirms, der Kernsatz mittig
     zwischen Kopf und Button. Der Rand unten wächst mit der Bildschirmhöhe
     und rechnet die Home-Leiste mit ein, damit Button und Zusatz auch
     über Safaris Leiste vollständig sichtbar bleiben. */
  .start {
    padding-block: 2rem calc(2rem + 3svh + env(safe-area-inset-bottom));
  }

  .kernsatz {
    margin: auto;
    font-size: min(calc((100vw - 2 * var(--rand)) / 9.3), 3.25rem);
  }

  .fehler {
    margin: auto;
  }

  .fehler .kernsatz {
    margin-block: 0;
  }

  .schritt {
    margin-top: 2rem;
  }

  /* Schmaler Rahmen statt voller Breite, damit der Kernsatz führt;
     die Schrift nur leicht kleiner, immer noch größer als der Zusatz */
  .knopf {
    padding: 0.75em 1.25em;
    font-size: min(var(--satz), max(calc(0.88 * var(--satz)), 1rem));
  }

}