/* =========================================================
   Lebe ganzheitlich – Anita Schmich-Bukšek

   Papier, Tinte, eine Linie.
   Feste Regeln dieses Stylesheets:
     · Keine Schatten, keine Verläufe, keine getönten Flächen.
       Runde Ecken nur bei Fotos (8px) – sonst nirgends.
     · Genau eine Linienstärke: 1px in --rule
       (einzige Ausnahme: die 2px-Marke unter dem offenen Reiter).
     · Sechs Schriftgrößen und fünf Abstände – siehe :root.
       Keine Werte außerhalb dieser Skalen, keine Inline-Stile im HTML.
     · Abstände im Text entstehen nur über .flow, Anordnungen nur über
       .cols, .cols-media und .rows.
     · Ausgenommen: das Logo mit Schriftzug, Blüte und Namen.
   ========================================================= */

:root {
  /* Farben */
  --paper: #fcfbf8;
  --ink:   #2b2a27;
  --soft:  #635e54;
  --faint: #8d8779;
  --rule:  #ddd8cd;
  --cyan:  #a5d7d8;
  --sun:   #fef59a;

  /* Schriften */
  /* Überschriften: die bisherige Serifenschrift, die Anita gefällt.
     Alles andere: die Systemschrift – ruhig, modern, auf jedem Gerät scharf. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
           "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrößen – genau sechs */
  --fs-title:   2.5rem;    /* 40 px  Seitentitel (h1), Ablauf-Ziffern              */
  --fs-section: 1.625rem;  /* 26 px  Abschnittstitel (h2)                          */
  --fs-lead:    1.25rem;   /* 20 px  Einleitung direkt unter dem Seitentitel       */
  --fs-text:    1.1875rem; /* 19 px  Fließtext, Listen, Zwischentitel (h3, fett)   */
  --fs-ui:      1rem;      /* 16 px  Navigation, Blättern, Fußzeile, Formularfelder */
  --fs-small:   .875rem;   /* 14 px  Beschriftungen, Hinweise, Brotkrume           */

  /* Abstände – genau fünf */
  --s1: .5rem;    /*  8 px  Zwischentitel → Text, Listenpunkt → Listenpunkt   */
  --s2: 1rem;     /* 16 px  Absatz → Absatz, Abschnittstitel → Inhalt       */
  --s3: 1.5rem;   /* 24 px  nach Listen, vor Zeilenlisten, Formularfelder   */
  --s4: 2.5rem;   /* 40 px  vor Abschnittstiteln im Text, vor Hinweisen     */
  --s5: 4rem;     /* 64 px  zwischen Abschnitten und zwischen Spalten       */

  /* Maße */
  --wrap:    75rem;     /* 1200 px  Seitenbreite                  */
  --measure: 62rem;     /*  992 px  größte Zeilenlänge für Text   */
  --media:   24rem;     /*  384 px  Bildspalte                    */
  --label:   15rem;     /*  240 px  Beschriftungsspalte in Zeilen */
}

@media (max-width: 700px) {
  :root {
    --fs-title:   1.875rem;
    --fs-section: 1.375rem;
    --fs-lead:    1.125rem;
    --fs-text:    1.125rem;
    --s4: 2rem;
    --s5: 3rem;
  }
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 { font-weight: 600; letter-spacing: -.006em; text-wrap: balance; }
/* Nur die großen Überschriften tragen die Serifenschrift */
/* Normaler Schnitt statt halbfett: dieselbe Schrift wirkt so ruhiger und zeitgemäßer */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; }
h1 { font-size: var(--fs-title);   line-height: 1.15; }
h2 { font-size: var(--fs-section); line-height: 1.25; }
h3 { font-size: var(--fs-text);    line-height: 1.4; }
p  { text-wrap: pretty; }
strong { font-weight: 600; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--soft); }
/* Links im Text: eine Linie in der Logofarbe */
main :is(p, li, dd) a { border-bottom: 1px solid var(--cyan); }
main :is(p, li, dd) a:hover { border-bottom-color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: var(--s1) var(--s2); background: var(--ink); color: var(--paper);
}
.skip-link:focus { left: 0; }

/* ---------- Textarten ---------- */
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--soft); }

.meta,
.breadcrumb,
.notice {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--soft);
}
.breadcrumb,
.breadcrumb a { color: var(--faint); border-bottom: 0; }
.breadcrumb a:hover { color: var(--ink); }

/* Der Hinweis läuft bewusst über die volle Breite */
.notice strong { color: var(--ink); }

/* ---------- Textfluss: alle Abstände zwischen Textbausteinen ----------
   Gleiche Gewichtung aller Regeln (:where), die spätere gewinnt. */
.flow > :where(* + *)            { margin-top: var(--s2); }
.flow > :where(h1 + *)           { margin-top: var(--s3); }
.flow > :where(h3 + *)           { margin-top: var(--s1); }
.flow > :where(.lead + *)        { margin-top: var(--s3); }
.flow > :where(.bloom-list + *)  { margin-top: var(--s3); }
.flow > :where(* + .rows)        { margin-top: var(--s3); }
.flow > :where(h2 + .rows)       { margin-top: var(--s2); }
.flow > :where(* + h3)           { margin-top: var(--s3); }
.flow > :where(* + h2)           { margin-top: var(--s4); }
.flow > :where(* + .notice)      { margin-top: var(--s4); }

.flow > :where(p:not(.notice), .bloom-list:not(.two-col)) { max-width: var(--measure); }

/* ---------- Abschnitte ---------- */
main { padding-bottom: var(--s5); }
main > section { padding-top: var(--s5); }
main > section.page-head { padding-top: var(--s4); }

/* ---------- Anordnung: zwei gleiche Spalten ---------- */
.cols,
.cols-media { display: grid; gap: var(--s5); align-items: start; }
.cols       { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Anordnung: Text links, Bild rechts ---------- */
.cols-media { grid-template-columns: minmax(0, 1fr) var(--media); }
.media { max-width: var(--media); }
.media-middle { align-self: center; }

/* ---------- Anordnung: Bild mittig unter dem Text ---------- */
.media-center { max-width: var(--media); margin-inline: auto; }
.flow > :where(* + .media-center) { margin-top: var(--s4); }

/* ---------- Anordnung: Bild rechts, Text läuft darunter weiter ---------- */
.media-float {
  float: right; width: var(--media);
  margin: 0 0 var(--s3) var(--s5);
}
@media (max-width: 880px) {
  .media-float { float: none; width: 100%; max-width: var(--media); margin: 0 0 var(--s3); }
}

/* Fotos mit abgerundeten Ecken */
.media img, .media-center img, .media-float img { border-radius: 18px; }

/* Logo mitten im Satz – steht dort anstelle eines Wortes.
   Die negativen Ränder sorgen dafür, dass die Zeile nicht auseinandergeht. */
.inline-logo {
  display: inline-block;
  height: 2.6em; width: auto;
  vertical-align: -.72em;
  margin: -.75em .25em -.75em;
}

/* ---------- Ausklappbare Erklärung (Methoden) ---------- */
.bloom-list summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); cursor: pointer;
  list-style: none;
}
.bloom-list summary::-webkit-details-marker { display: none; }
/* Dünnes Plus aus zwei Strichen; beim Öffnen verschwindet der senkrechte → Minus */
.bloom-list summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--soft), var(--soft)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--soft), var(--soft)) center / 1.5px 14px no-repeat;
  transition: background-size .25s ease;
}
.bloom-list details[open] summary::after {
  background-size: 14px 1.5px, 1.5px 0;
}
.bloom-list summary:hover::after {
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
}
.bloom-list details p { margin-top: var(--s1); color: var(--soft); }
.bloom-list details p + p { margin-top: var(--s1); }

@media (max-width: 880px) {
  .cols,
  .cols-media { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* ---------- Anordnung: Zeilenliste (Beschriftung | Inhalt) ---------- */
.rows { border-top: 1px solid var(--rule); }
.rows > div {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  column-gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.rows > div > * { max-width: var(--measure); }
.rows dt {
  padding-top: .2rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--faint);
}
.cols .rows > div { grid-template-columns: 8rem minmax(0, 1fr); }
/* Ablauf-Ziffern: groß, dünn und hell über dem Schritt-Titel */
.num {
  display: block; margin-bottom: var(--s1);
  font-family: var(--serif); font-size: var(--fs-title); font-weight: 400;
  line-height: 1; letter-spacing: .02em; color: var(--faint);
}

@media (max-width: 640px) {
  .rows > div,
  .cols .rows > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
}

/* ---------- Aufzählung mit der Blüte aus dem Logo ---------- */
.bloom-list li { position: relative; padding-left: 1.75rem; }
.bloom-list li + li { margin-top: var(--s1); }
.bloom-list li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 14px; height: 19px;
  background: url("assets/logo-bluete.png") no-repeat center / contain;
}
.bloom-list.two-col { columns: 2; column-gap: var(--s4); max-width: var(--measure); }
.bloom-list.two-col li { break-inside: avoid; margin: 0 0 var(--s1); }
.bloom-list.two-col li:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .bloom-list.two-col { columns: 1; } }

/* Methodenliste auf dem Desktop in zwei Spalten, jede Zeile klappt für sich auf */
.flow > .bloom-list.grid-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s5); row-gap: 0; align-items: start;
  max-width: none;
}
/* Jede Methode ist eine Zeile mit feiner Linie darunter, wie eine Tabelle */
.bloom-list.grid-list li {
  padding-block: var(--s2);
  border-bottom: 1px solid var(--rule);
}
.bloom-list.grid-list li:nth-child(-n+2) { border-top: 1px solid var(--rule); }
.bloom-list.grid-list li::before { top: calc(var(--s2) + .3em); }
.bloom-list.grid-list li + li { margin-top: 0; }
@media (max-width: 880px) {
  .flow > .bloom-list.grid-list { grid-template-columns: minmax(0, 1fr); }
  .bloom-list.grid-list li:nth-child(2) { border-top: 0; }
}

/* ---------- Hinweis: Website im Aufbau ---------- */
/* Bewusste Ausnahme von der Regel „keine getönten Flächen": ein heller Gelbton
   aus dem Logo, ohne Trennlinie, mit einem kleinen kräftig gelben Etikett.
   Verschwindet wieder, sobald die Seite fertig ist. */
.site-banner {
  padding: var(--s2) 0;
  background: color-mix(in srgb, var(--sun) 38%, var(--paper));
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--soft);
  text-align: center;
}
.site-banner .wrap { display: block; }
.site-banner .badge {
  display: inline-block; margin-right: var(--s1);
  padding: .1rem .7rem;
  background: var(--sun); border-radius: 999px;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em;
  color: var(--ink);
}

/* ---------- Kopfzeile ---------- */
/* Keine Trennlinie mehr: Kopfzeile und Inhalt trennt nur der Weißraum */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) 0;
}

/* Logo – Originalartwork, bewusst außerhalb der Skalen */
.brand { display: block; }
.brand img { width: 250px; }

.nav-toggle {
  display: none;
  padding: var(--s1) 0;
  font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink);
  background: none; border: 0; cursor: pointer;
}
/* Zwei feine Striche statt Kasten; beim Öffnen werden sie zu einem Strich */
.nav-toggle::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 20px; height: 8px; margin-left: .6rem;
  border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transition: height .2s ease;
}
.nav-toggle[aria-expanded="true"]::after { height: 0; border-bottom-width: 0; }

.site-nav ul { display: flex; gap: var(--s3); }
.site-nav a { font-size: var(--fs-ui); color: var(--soft); padding-bottom: .15rem; }
.site-nav a:hover { color: var(--ink); }
/* Die einzige 2px-Marke der Seite */
.site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--sun); }

@media (max-width: 960px) {
  .header-inner { flex-wrap: wrap; align-items: center; padding: var(--s2) 0; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; width: 100%; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
  .site-nav li { border-bottom: 1px solid var(--rule); }
  .site-nav a { display: block; padding: var(--s2) 0; }
  .site-nav a.active { border-bottom: 0; font-weight: 600; }
  .brand img { width: 200px; }
}

/* ---------- Blättern ---------- */
.further {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-ui);
}
.further a { border-bottom: 1px solid var(--cyan); }
.further a:hover { border-bottom-color: var(--ink); }
.further-next { margin-left: auto; }

/* ---------- Formular ---------- */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: var(--s1); }
.field label { font-family: var(--sans); font-size: var(--fs-small); color: var(--soft); }
.field :is(input, select, textarea) {
  width: 100%;
  padding: var(--s1) var(--s2);
  font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule); border-radius: 0;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--ink); }
.form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 700px) { .form-row-2 { grid-template-columns: minmax(0, 1fr); } }

.btn {
  display: block; width: 100%;
  padding: var(--s2) var(--s3);
  font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink);
  background: none; border: 1px solid var(--ink); cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- Fußzeile ---------- */
/* Linie nur so breit wie der Inhalt, nicht über den ganzen Bildschirm */
.site-footer { padding: 0 0 var(--s3); }
.site-footer > .wrap { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s5); }
@media (max-width: 700px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

/* Logo – bewusst außerhalb der Skalen */
.site-footer .footer-logo { width: 150px; margin-bottom: var(--s2); }

.site-footer p,
.site-footer li { font-size: var(--fs-ui); line-height: 1.5; color: var(--soft); }
.site-footer li + li { margin-top: var(--s1); }
.site-footer ul + p { margin-top: var(--s2); }
.site-footer h4 {
  margin-bottom: var(--s1);
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600;
  color: var(--faint);
}
.site-footer a { color: var(--soft); }
.site-footer a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s1) var(--s3);
  margin-top: var(--s4); padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: var(--fs-small); color: var(--faint);
}
.footer-bottom a { color: var(--faint); }

/* ---------- Druck ---------- */
@media print {
  .site-header, .further, .skip-link { display: none; }
  body { background: #fff; }
}

/* ---------- Handy: Bilder mittig, Aufbau-Hinweis etwas kompakter ---------- */
@media (max-width: 880px) {
  .media, .media-float { margin-inline: auto; }
}
@media (max-width: 700px) {
  .site-banner { font-size: var(--fs-small); padding: var(--s2) 0; }
  .site-banner .badge { display: table; margin: 0 auto var(--s1); }
}

/* ---------- Nachweis der Webagentur ----------
   Zurückhaltend grau wie die Fußzeile. Beim Überfahren dreht sich das Zeichen
   eine Vierteldrehung weiter (es ist vierfach symmetrisch, steht danach also genau
   gleich da) und färbt sich in das Orange der Agentur. */
.credit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s1) var(--s2);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: var(--fs-small);
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.credit-logo { display: inline-flex; align-items: center; gap: 12px; }
.credit-mark, .credit-word { position: relative; display: block; }
.credit-mark { width: 32px; height: 31px; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.credit-word { width: 110px; height: 31px; }
.credit-mark, .credit-word,
.credit-mark::after, .credit-word::after {
  background: no-repeat center / contain;
}
.credit-mark { background-image: url("assets/raster-zeichen-grau.png"); }
.credit-word { background-image: url("assets/raster-schrift-grau.png"); }
.credit-mark::after, .credit-word::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity .5s ease;
}
.credit-mark::after { background-image: url("assets/raster-zeichen-orange.png"); }
.credit-word::after { background-image: url("assets/raster-schrift-orange.png"); }
.credit:hover .credit-mark { transform: rotate(90deg); }
.credit:hover .credit-mark::after,
.credit:hover .credit-word::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .credit-mark { transition: none; }
  .credit:hover .credit-mark { transform: none; }
}