@charset "utf-8";

/* ==========================================================================
   Milla Zahnfee — millazahnfee.de
   Alle Masse stammen aus dem A4-Entwurf (2480 x 3508 px, 300 dpi) und sind
   dort gemessen. Sie stehen als Prozent der Inhaltsspalte --c, damit das
   Layout beim Skalieren proportionstreu bleibt.
   ========================================================================== */

/* --- Schrift: liegt im Projekt, kein CDN ---------------------------------- */

@font-face {
  font-family: "Jost";
  src: url("../schrift/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  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: "Jost";
  src: url("../schrift/jost-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  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;
}

/* --- Grundwerte ----------------------------------------------------------- */

:root {
  --rose: #f7dee1;
  --grau: #6a6a6a;

  /* Inhaltsspalte: nie ueber die volle Bildschirmbreite */
  --c: min(88vw, 645px);

  /* Senkrechte Abstaende, gemessen im Entwurf — aber gegen die Fensterhoehe
     gedeckelt. Der Entwurf ist eine A4-Seite im Hochformat; auf einem flachen
     16:9-Fenster schoebe sein Rhythmus den Text unter die Bildschirmkante, und
     man muesste scrollen, um den ersten Satz zu Ende zu lesen.
     Die Deckel greifen erst unterhalb von rund 1200 px Fensterhoehe. Darueber
     stehen exakt die Entwurfswerte, und auf dem Handy ebenfalls — dort ist die
     Spalte so schmal, dass der Prozentwert ohnehin der kleinere ist. */
  --oben: min(calc(var(--c) * 0.268), 13.5vh);
  --logo-navi: min(calc(var(--c) * 0.203), 10.5vh);
  --navi-inhalt: min(calc(var(--c) * 0.164), 8.5vh);
  --inhalt-fuss: min(calc(var(--c) * 0.247), 12.5vh);
  --unten: min(calc(var(--c) * 0.405), 19vh);

  /* Schriftgrade als Verhaeltnis zum Fliesstext */
  --gr-navi: 1.22rem;
  --gr-fuss: 0.86rem;
}

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

html {
  font-size: 112.5%; /* 1rem = 18px bei Browser-Standard */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rose);
  color: var(--grau);
  font-family: "Jost", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--grau);
  outline-offset: 4px;
}

/* --- Seitengeruest -------------------------------------------------------- */

.seite {
  width: var(--c);
  margin-inline: auto;
  padding-top: var(--oben);
  padding-bottom: var(--unten);
}

/* --- Logo ----------------------------------------------------------------- */

.kopf {
  text-align: center;
}

/* Auf der Startseite ist das Logo die H1 — es soll sich aber nichts veraendern. */
.kopf h1 {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
}

.kopf a {
  display: inline-block;
  text-decoration: none;
}

.kopf img {
  width: 55.4%;
  height: auto;
  margin-inline: auto;
}

/* --- Navigation ----------------------------------------------------------- */

.navi {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--logo-navi);
  font-size: var(--gr-navi);
  line-height: 1;
}

.navi a {
  text-decoration: none;
}

.navi a:hover,
.navi a:focus-visible,
.navi a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* --- Inhalt --------------------------------------------------------------- */

.inhalt {
  margin-top: var(--navi-inhalt);
}

/* zwei Spalten: Bild 40,9 % — Abstand 5,5 % — Text 53,6 % */
.zwei-spalten {
  display: grid;
  grid-template-columns: 40.9fr 53.6fr;
  column-gap: 5.5%;
  align-items: start;
}

.bild {
  margin: 0;
}

.bild img {
  width: 100%;
  /* height:auto ist noetig, sonst gewinnt das height-Attribut aus dem <img>
     als Stilvorgabe und das Seitenverhaeltnis unten wird nie wirksam. */
  height: auto;
  aspect-ratio: 674 / 818;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Mehrere Bilder untereinander in einer Spalte (Unterseite Milla Zahnfee) */
.bilder > * + * {
  margin-top: calc(var(--c) * 0.055);
}

.text p {
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.text p + p.absatz {
  margin-top: 1.3em;
}

/* --- Unterseiten: Fliesstext ueber die volle Inhaltsbreite ---------------- */

.doku h1 {
  margin: 0 0 1.3em;
  font-size: var(--gr-navi);
  font-weight: 400;
  line-height: 1.2;
}

.doku h2 {
  margin: 2.4em 0 0.65em;
  font-size: var(--gr-fuss);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.doku h2:first-of-type {
  margin-top: 0;
}

.doku p {
  margin: 0 0 1.3em;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

.doku .block {
  hyphens: none;
  text-align: left;
}

.doku a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.doku a[target="_blank"]::after {
  content: " \2197";
  text-decoration: none;
}

.doku .stand {
  margin-top: 2.6em;
  font-size: var(--gr-fuss);
}

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

.fuss {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--c) * 0.123);
  margin-top: var(--inhalt-fuss);
  font-size: var(--gr-fuss);
  line-height: 1;
}

.fuss a {
  text-decoration: none;
}

.fuss a:hover,
.fuss a:focus-visible,
.fuss a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* --- Platzhalter (nur solange Bildmaterial fehlt) ------------------------- */

.platzhalter {
  width: 100%;
  aspect-ratio: 674 / 818;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  font-size: var(--gr-fuss);
  background: rgba(106, 106, 106, 0.06);
  outline: 1px dashed rgba(106, 106, 106, 0.35);
  outline-offset: -1px;
}

/* ==========================================================================
   Schmalere Bildschirme
   ========================================================================== */

/* Unter 660 px wird die Textspalte zu eng fuer zwei Spalten (< 34 Zeichen). */
@media (max-width: 659px) {
  /* Kein justify-items: center — das laesst Grid-Elemente auf ihre
     Inhaltsbreite wachsen statt sie zu dehnen, und der Text laeuft rechts raus.
     Zentriert wird stattdessen ueber margin-inline. */
  .zwei-spalten {
    grid-template-columns: 1fr;
    row-gap: calc(var(--c) * 0.10);
  }

  .bild,
  .bilder,
  .platzhalter {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .navi {
    flex-direction: column;
    align-items: center;
    gap: 0.55em;
    font-size: 1.1rem;
  }

  .fuss {
    flex-direction: column;
    align-items: center;
    gap: 0.55em;
  }
}

/* Sehr schmal: Blocksatz reisst die Wortabstaende auf — linksbuendig ist treuer. */
@media (max-width: 479px) {
  .text p,
  .doku p {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}