/* Die oeffentlichen Seiten - Gestaltung.
 *
 * ---------------------------------------------------------------------------
 * HIER STEHT KEINE EINZIGE FARBE. Jede Farbe, jede Schrift, jede Rundung und
 * jeder Abstand kommt aus farben.css, und farben.css wird aus
 * module/auftritt/erscheinungsbild.ts erzeugt. Wer die Farbe aendern will,
 * aendert sie dort - einmal, fuer Portal und Website zugleich.
 *
 * Die var()-Aufrufe stehen bewusst OHNE Ersatzwert. Ein Ersatzwert waere eine
 * zweite Farbe an einer zweiten Stelle, und genau die soll es nicht geben:
 * Fehlt farben.css, faellt das sofort auf, statt still eine andere Marke
 * anzuzeigen.
 * ---------------------------------------------------------------------------
 *
 * MOBIL ZUERST, und das ist keine Mode: Ein Praxisinhaber schaut abends aufs
 * Handy (Vorgabe des Inhabers, 09.08.2026). Die Grundregeln gelten fuer das
 * schmale Geraet; die Medienabfragen weiter unten fuegen nur hinzu.
 */

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

html {
  font-size: var(--frontelia-schriftgroesse);
  /* Kein waagerechtes Scrollen, nie. Eine Preistabelle, die den Rand
   * hinausschiebt, macht die ganze Seite unbenutzbar. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--frontelia-schrift-text);
  line-height: var(--frontelia-zeilenhoehe);
  color: var(--frontelia-farbe-text);
  background: var(--frontelia-farbe-hintergrund);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  font-family: var(--frontelia-schrift-ueberschrift);
  line-height: 1.2;
  margin: 0 0 var(--frontelia-abstand-mittel) 0;
  text-wrap: balance;
}

h1 {
  /* clamp statt fester Groessen: eine Ueberschrift, die auf dem Handy
   * dreizeilig ist und auf dem Bildschirm nicht verloren wirkt. */
  font-size: clamp(1.75rem, 7vw, 3rem);
}

h2 {
  font-size: clamp(1.35rem, 4.5vw, 2rem);
}

h3 {
  font-size: 1.05rem;
  margin-bottom: var(--frontelia-abstand-klein);
}

p {
  margin: 0 0 var(--frontelia-abstand-mittel) 0;
}

a {
  color: var(--frontelia-farbe-marke);
}

.hut,
.inhalt,
.fuss-innen {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding-left: var(--frontelia-abstand-mittel);
  padding-right: var(--frontelia-abstand-mittel);
}

/* --- Der Sprung zum Inhalt, fuer die Tastatur ---------------------------- */

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--frontelia-abstand-klein);
  background: var(--frontelia-farbe-marke);
  color: var(--frontelia-farbe-marke-text);
  z-index: 10;
}

.sprungmarke:focus {
  left: 0;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.hut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frontelia-abstand-klein);
  padding-top: var(--frontelia-abstand-klein);
  padding-bottom: var(--frontelia-abstand-klein);
}

.marke {
  font-family: var(--frontelia-schrift-ueberschrift);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--frontelia-farbe-text);
  text-decoration: none;
  margin-right: auto;
}

.wegweiser {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frontelia-abstand-klein);
  font-size: 0.9rem;
}

.wegweiser a {
  color: var(--frontelia-farbe-text-leise);
  text-decoration: none;
}

.wegweiser a:hover,
.wegweiser a:focus,
.wegweiser a[aria-current="page"] {
  color: var(--frontelia-farbe-marke);
  text-decoration: underline;
}

.sprachwahl {
  display: flex;
  gap: 2px;
}

.sprachwahl button {
  font: inherit;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  min-height: 32px;
  cursor: pointer;
  color: var(--frontelia-farbe-text-leise);
  background: transparent;
  border: 1px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-klein);
}

.sprachwahl button[aria-pressed="true"] {
  color: var(--frontelia-farbe-marke-text);
  background: var(--frontelia-farbe-marke);
  border-color: var(--frontelia-farbe-marke);
}

/* --- Der erste Bildschirm ------------------------------------------------
 *
 * DIE EINE REGEL DIESER SEITE: Ueberschrift und Rufnummer stehen ohne
 * Scrollen da. Deshalb 100svh (small viewport height) und nicht 100vh - auf
 * einem Handy mit eingeblendeter Adressleiste ist 100vh zu hoch, und genau
 * der Knopf rutscht dann unter den Rand.
 */

.aufschlag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 4.5rem);
  padding-top: var(--frontelia-abstand-mittel);
  padding-bottom: var(--frontelia-abstand-gross);
}

.aufschlag p.vorspann {
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  color: var(--frontelia-farbe-text-leise);
  max-width: 34em;
}

/* Der Hauptknopf. Eine Rufnummer, kein Formular (Entscheidung des Inhabers,
 * 09.08.2026): Wer zweifelt, ruft an und HOERT das Produkt.
 *
 * min-height 56px, weil ein Daumen ungefaehr so gross ist. Alles darunter
 * wird auf einem Handy danebengetippt. */
.ruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--frontelia-abstand-klein);
  min-height: 3.5rem;
  padding: var(--frontelia-abstand-mittel) var(--frontelia-abstand-gross);
  font-family: var(--frontelia-schrift-fest);
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--frontelia-farbe-marke-text);
  background: var(--frontelia-farbe-marke);
  border: 2px solid var(--frontelia-farbe-marke);
  border-radius: var(--frontelia-rundung-gross);
  /* Bricht die Nummer auf einem sehr schmalen Geraet um, statt hinauszuragen. */
  overflow-wrap: anywhere;
}

.ruf:hover,
.ruf:focus {
  text-decoration: underline;
}

/* Der ehrliche Platzhalter, solange keine Nummer geschaltet ist. Er sieht
 * ABSICHTLICH nicht aus wie ein Knopf - ein grauer Kasten, auf den niemand
 * tippt, ist besser als ein Knopf, der nichts tut. */
.ruf-fehlt {
  display: block;
  padding: var(--frontelia-abstand-mittel);
  border: 2px dashed var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-gross);
  color: var(--frontelia-farbe-text);
  background: var(--frontelia-farbe-flaeche);
  font-weight: 700;
}

.rufhinweis {
  margin-top: var(--frontelia-abstand-klein);
  font-size: 0.9rem;
  color: var(--frontelia-farbe-text-leise);
  max-width: 34em;
}

/* --- Abschnitte ---------------------------------------------------------- */

section {
  padding-top: var(--frontelia-abstand-gross);
  padding-bottom: var(--frontelia-abstand-gross);
}

.karten {
  display: grid;
  gap: var(--frontelia-abstand-mittel);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.karte {
  padding: var(--frontelia-abstand-mittel);
  background: var(--frontelia-farbe-flaeche);
  border: 1px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-mittel);
}

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

.saetze {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--frontelia-abstand-mittel);
}

.saetze li {
  padding-left: var(--frontelia-abstand-mittel);
  border-left: 4px solid var(--frontelia-farbe-marke);
}

.grenzen li {
  border-left-color: var(--frontelia-farbe-warnung);
}

/* --- Preise --------------------------------------------------------------
 *
 * Karten statt Tabelle. Eine Tabelle mit vier Spalten ist auf einem Handy
 * entweder winzig oder muss seitwaerts geschoben werden, und beides liest
 * niemand abends im Bett.
 */

.preisliste {
  display: grid;
  gap: var(--frontelia-abstand-mittel);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0 0 var(--frontelia-abstand-gross) 0;
  padding: 0;
}

.preiskarte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--frontelia-abstand-mittel);
  background: var(--frontelia-farbe-flaeche);
  border: 1px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-mittel);
}

.preisname {
  font-family: var(--frontelia-schrift-ueberschrift);
  font-weight: 700;
  font-size: 1.05rem;
}

.preisbetrag {
  font-family: var(--frontelia-schrift-fest);
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 700;
  color: var(--frontelia-farbe-marke);
}

.preisnetto {
  font-size: 0.85rem;
  color: var(--frontelia-farbe-text-leise);
}

.preiszeile {
  display: flex;
  justify-content: space-between;
  gap: var(--frontelia-abstand-klein);
  font-size: 0.95rem;
  border-top: 1px solid var(--frontelia-farbe-rand);
  padding-top: 4px;
  margin-top: 4px;
}

.preiszeile span:first-child {
  color: var(--frontelia-farbe-text-leise);
}

.preiszeile span:last-child {
  font-family: var(--frontelia-schrift-fest);
  text-align: right;
}

/* Der Platzhalter, wenn die Preisquelle zwei Werte nennt. Bewusst gross und
 * bewusst in der Warnfarbe - er ist kein Kleingedrucktes, sondern die
 * Antwort. */
.preiswarnung {
  padding: var(--frontelia-abstand-mittel);
  border: 2px solid var(--frontelia-farbe-warnung);
  border-radius: var(--frontelia-rundung-mittel);
  background: var(--frontelia-farbe-flaeche);
}

.preiswarnung h3 {
  color: var(--frontelia-farbe-warnung);
}

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

/* --- Rechtsseiten -------------------------------------------------------- */

.entwurfshinweis {
  padding: var(--frontelia-abstand-mittel);
  margin-bottom: var(--frontelia-abstand-gross);
  border: 2px solid var(--frontelia-farbe-warnung);
  border-radius: var(--frontelia-rundung-mittel);
  background: var(--frontelia-farbe-flaeche);
  color: var(--frontelia-farbe-text);
  font-weight: 700;
}

.angaben {
  margin: 0 0 var(--frontelia-abstand-gross) 0;
}

.angaben dt {
  font-weight: 700;
  margin-top: var(--frontelia-abstand-mittel);
}

.angaben dd {
  margin: 0;
  font-family: var(--frontelia-schrift-fest);
  overflow-wrap: anywhere;
}

/* Was noch niemand festgelegt hat, wird als solches gekennzeichnet - nicht
 * weggelassen und schon gar nicht erfunden. */
.offen {
  font-family: var(--frontelia-schrift-text);
  font-style: italic;
  color: var(--frontelia-farbe-warnung);
}

.rechtstext h2 {
  margin-top: var(--frontelia-abstand-gross);
}

.rechtstext p {
  max-width: 44em;
}

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

footer {
  margin-top: var(--frontelia-abstand-gross);
  padding: var(--frontelia-abstand-gross) 0;
  border-top: 1px solid var(--frontelia-farbe-rand);
  color: var(--frontelia-farbe-text-leise);
  font-size: 0.9rem;
}

.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frontelia-abstand-mittel);
  justify-content: space-between;
}

/* --- Breitere Geraete ---------------------------------------------------- */

@media (min-width: 40rem) {
  .karten,
  .preisliste {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Bestaetigungsseite --------------------------------------------------
 *
 * Die einzige Seite dieses Auftritts, auf der ein Mensch etwas eintippt - und
 * er tut es meist im Stehen, auf einem Telefon, mit der SMS daneben. Deshalb:
 * grosse Felder, ein einziger Knopf, und der Code in der festen Schrift, damit
 * sich 8 und B beim Abtippen nicht in die Quere kommen. */

.bestaetigung {
  max-width: 28rem;
  margin-bottom: var(--frontelia-abstand-gross);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--frontelia-abstand-klein);
  margin-bottom: var(--frontelia-abstand-mittel);
}

.feld label {
  font-weight: 700;
}

.feld input {
  /* 3rem, weil ein Daumen ungefaehr so gross ist - dieselbe Rechnung wie beim
   * Rufknopf. font-size 1rem, weil iOS bei allem darunter beim Antippen
   * hineinzoomt und die halbe Seite verschiebt. */
  min-height: 3rem;
  padding: var(--frontelia-abstand-klein) var(--frontelia-abstand-mittel);
  font-family: var(--frontelia-schrift-fest);
  font-size: 1rem;
  color: var(--frontelia-farbe-text);
  background: var(--frontelia-farbe-hintergrund);
  border: 2px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-mittel);
}

.feldhinweis {
  font-size: 0.9rem;
  color: var(--frontelia-farbe-text-leise);
}

/* Ein Knopf, nicht der Rufknopf: `.ruf` ist die Rufnummer der Startseite und
 * soll das bleiben. Gleiche Groesse, gleiche Rundung - damit sich beide wie
 * dasselbe Haus anfuehlen. */
.absenden {
  width: 100%;
  min-height: 3.5rem;
  padding: var(--frontelia-abstand-mittel) var(--frontelia-abstand-gross);
  font-family: var(--frontelia-schrift-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--frontelia-farbe-marke-text);
  background: var(--frontelia-farbe-marke);
  border: 2px solid var(--frontelia-farbe-marke);
  border-radius: var(--frontelia-rundung-gross);
}

/* Waehrend gefragt wird, ist er abgeschaltet - ein zweites Antippen waere ein
 * zweiter Fehlversuch auf den Deckel (HOECHSTZAHL_FEHLVERSUCHE). */
.absenden[disabled] {
  cursor: default;
  opacity: 0.6;
}

.bestaetigungsergebnis:not(:empty) {
  padding: var(--frontelia-abstand-mittel);
  border: 2px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-mittel);
  background: var(--frontelia-farbe-flaeche);
  max-width: 34em;
}

.bestaetigungsergebnis h2 {
  margin-top: 0;
}

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

/* Farbe ist hier NIE die einzige Aussage - der Satz darin sagt dasselbe. Wer
 * Farben nicht unterscheidet, verliert nichts. */
.bestaetigungsergebnis.gelungen {
  border-color: var(--frontelia-farbe-erfolg);
}

.bestaetigungsergebnis.gelungen h2 {
  color: var(--frontelia-farbe-erfolg);
}

.bestaetigungsergebnis.misslungen {
  border-color: var(--frontelia-farbe-fehler);
}

.bestaetigungsergebnis.misslungen h2 {
  color: var(--frontelia-farbe-fehler);
}

@media (min-width: 60rem) {
  .karten {
    grid-template-columns: repeat(4, 1fr);
  }

  .preisliste {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. Hier gibt es ohnehin keine
 * Animation - die Regel steht als Zusage, damit sie beim naechsten Zusatz
 * schon da ist. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Anmeldeseite (14.08.2026) -------------------------------------------
 *
 * Sie benutzt DIESELBEN Bausteine wie die Bestaetigungsseite: .feld,
 * .feldhinweis, .absenden. Hinzu kommen nur zwei eigene Namen - damit im
 * Quelltext steht, worum es geht - und die drei Stellen, die es dort nicht
 * gibt: die Auswahlliste, das Kreuz und der Trenner zwischen den Schritten.
 *
 * Die Regeln stehen als eigener Block am Ende, statt die Selektorlisten
 * darueber zu erweitern: An jener Datei arbeitet gerade die
 * Bestaetigungsseite, und ein Anbau am Ende kommt keinem in die Quere. */

.anmeldeformular {
  max-width: 28rem;
  margin-bottom: var(--frontelia-abstand-gross);
}

/* Wie .feld input - eine Auswahlliste ist dasselbe Ziel fuer denselben Daumen. */
.feld select {
  min-height: 3rem;
  padding: var(--frontelia-abstand-klein) var(--frontelia-abstand-mittel);
  font-family: var(--frontelia-schrift-text);
  font-size: 1rem;
  color: var(--frontelia-farbe-text);
  background: var(--frontelia-farbe-hintergrund);
  border: 2px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-mittel);
}

/* Das Kreuz unter den Nutzungsbedingungen. Der Text steht IM label, damit ein
 * Antippen des Satzes das Kaestchen trifft - auf einem Telefon ist das
 * Kaestchen allein zu klein. */
.kreuzzeile {
  display: flex;
  gap: var(--frontelia-abstand-klein);
  align-items: flex-start;
  font-weight: 700;
  cursor: pointer;
}

.kreuzzeile input {
  /* 1.5rem, damit es ohne Zielen zu treffen ist. margin-top richtet es an der
   * ersten Zeile aus, wenn der Satz umbricht. */
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  flex: none;
}

/* Der Entwurfsvorbehalt neben dem Kreuz - dieselbe Aussage wie auf der Seite
 * mit den Nutzungsbedingungen, nur klein. */
.feldhinweis.entwurf {
  color: var(--frontelia-farbe-warnung);
}

/* Schritt 2 beginnt sichtbar neu. Eine Linie und nicht bloss Abstand: Wer
 * gerade den Code aus seiner E-Mail sucht, soll die Stelle auf einen Blick
 * wiederfinden. */
.anmeldeschritt {
  border-top: 1px solid var(--frontelia-farbe-rand);
}

.anmeldeergebnis:not(:empty) {
  padding: var(--frontelia-abstand-mittel);
  border: 2px solid var(--frontelia-farbe-rand);
  border-radius: var(--frontelia-rundung-mittel);
  background: var(--frontelia-farbe-flaeche);
  max-width: 34em;
}

.anmeldeergebnis h2 {
  margin-top: 0;
}

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

/* Farbe ist auch hier NIE die einzige Aussage - der Satz darin sagt dasselbe.
 * Wer Farben nicht unterscheidet, verliert nichts. */
.anmeldeergebnis.gelungen {
  border-color: var(--frontelia-farbe-erfolg);
}

.anmeldeergebnis.gelungen h2 {
  color: var(--frontelia-farbe-erfolg);
}

.anmeldeergebnis.misslungen {
  border-color: var(--frontelia-farbe-fehler);
}

.anmeldeergebnis.misslungen h2 {
  color: var(--frontelia-farbe-fehler);
}