/* giotidara.de | Dunkles Design, von Gio am 01.11.2026 zurückgeholt, damit nachts niemand geblendet wird.
   Seit 08.11.2026 abends Anthrazit mit kräftigem Gold, Gios Wahl aus vier Varianten (Grund wie B1, Gold wie B4).
   Sein Zeichen ist als Prägung in den Hintergrund gedrückt, wie in Wachs. Alle Farben stehen hier oben.
   Ältere Fassungen: braun-orange in 06_Website\_archiv\2026-11-08_vor-Gruen\, grün nur noch im Claude-Link, Version 7. */

:root {
  /* Farben */
  --grund: #191919;        /* Anthrazit, neutral, am 08.11.2026 abends zwischen zu dunkel und zu hell eingestellt (#161616). 09.11.2026, Gio: „minimal heller, aber wirklich nicht viel“ */
  --grund-2: #1D1D1D;      /* bis 09.11.2026: #1A1A1A */
  --flaeche: #202020;
  --flaeche-2: #272727;
  --linie: #363636;
  --linie-weich: #2A2A2A;
  --schrift: #F2EEE6;
  --schrift-2: #C4BEB3;
  --schrift-3: #908A80;
  --glut: #CDAE6C;         /* Gold für Schrift und Linien, weniger orange (08.11.2026) */
  --glut-tief: #8E6522;
  --glut-hell: #DDC28A;
  --kerze: #E6D3A8;        /* Champagner, zweite Farbe im Lebensrad */
  --logo-braun: #3A1904;
  --logo-beige: #FFF1E2;
  --gut: #8FB57A;
  --fokus: #D9B56E;
  --knopf: linear-gradient(180deg, #E2BD6E 0%, #BF9241 50%, #8E6522 100%);        /* Gold mit Verlauf, wirkt metallisch */
  --knopf-tief: linear-gradient(180deg, #EAC77C 0%, #C99C4B 50%, #98702A 100%);
  --knopf-schrift: #1A140A;

  /* Schrift */
  --f-text: "Palatino Linotype", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --f-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-zahl: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Goldener Schnitt: 1,618. Abstände wachsen in diesem Verhältnis. */
  --phi: 1.618;
  --a-1: 0.382rem;
  --a0: 0.618rem;
  --a1: 1rem;
  --a2: 1.618rem;
  --a3: 2.618rem;
  --a4: 4.236rem;
  --a5: 6.854rem;

  --text-breite: 42rem;
  --seite-breite: 68rem;
  --gutter: clamp(1rem, 2.5vw, 2.4rem);
  --radius: 14px;
}

* { 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(--grund);
  color: var(--schrift);
  font-family: var(--f-text);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.65;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

.seite { position: relative; z-index: 1; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; margin: 0; line-height: 1.18; text-wrap: balance; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
p { margin: 0; }
p + p { margin-top: var(--a1); }
a { color: var(--glut-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--schrift); }
strong { font-weight: 650; color: var(--schrift); }
small, .klein { font-size: 0.88em; color: var(--schrift-2); }
.gedaempft { color: var(--schrift-2); }
.leise { color: var(--schrift-3); }
.vorzeile {
  font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--glut); font-weight: 600;
}
.lead { font-size: 1.12em; color: var(--schrift-2); max-width: var(--text-breite); }
.zahl { font-family: var(--f-zahl); font-variant-numeric: tabular-nums; }
hr.saat { border: 0; height: 1px; background: var(--linie); margin: var(--a3) 0; }

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

/* ---------- Gerüst ---------- */
.wrap { max-width: var(--seite-breite); margin-inline: auto; padding-inline: var(--gutter); }
.text { max-width: var(--text-breite); }
.stack { display: flex; flex-direction: column; }
.gap-xs { gap: var(--a-1); } .gap-s { gap: var(--a0); } .gap-m { gap: var(--a1); } .gap-l { gap: var(--a2); } .gap-xl { gap: var(--a3); }
.reihe { display: flex; flex-wrap: wrap; gap: var(--a0) var(--a1); align-items: center; }
section.block { padding-block: var(--a4); }
section.block + section.block { border-top: 1px solid var(--linie-weich); }
.band { background: var(--grund-2); }

/* Zwei Spalten im goldenen Schnitt: 61,8 % zu 38,2 % */
.gold { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--a3); align-items: start; }
.gold.umgekehrt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
@media (max-width: 760px) { .gold, .gold.umgekehrt { grid-template-columns: 1fr; gap: var(--a2); } }

.raster { display: grid; gap: var(--a2); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(22,22,22,0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-weich);
}
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--a1); padding-block: var(--a0); flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: var(--a0); text-decoration: none; color: var(--schrift); }
.marke > img { height: 46px; width: auto; display: block; }
.marke-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.marke-text img { height: 24px; width: auto; display: block; }
.unterzeile { font-size: 0.68rem; line-height: 1; color: var(--schrift-2); white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; gap: 0.15rem var(--a-1); font-family: var(--f-ui); font-size: 0.9rem; }
.nav a { color: var(--schrift-2); text-decoration: none; padding: 0.45rem 0.6rem; border-radius: var(--radius); white-space: nowrap; }
.nav a:hover { color: var(--schrift); background: var(--flaeche); }
.nav a[aria-current="page"] { color: var(--glut-hell); background: var(--flaeche); font-weight: 600; }
@media (max-width: 760px) {
  .nav { order: 3; width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .nav a { padding: 0.45rem 0.28rem; font-size: 0.82rem; }
}

/* ---------- Knöpfe ---------- */
.btn {
  font-family: var(--f-ui); font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.35rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; color: inherit;
  background: var(--knopf); color: var(--knopf-schrift);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 0 0 rgba(205,174,108,0);
}
.btn:not(.zweit):not(.leise) { box-shadow: inset 0 1px 0 rgba(255,244,214,0.45), 0 1px 2px rgba(0,0,0,0.4); }
.btn:not(.zweit):not(.leise):hover { box-shadow: inset 0 1px 0 rgba(255,244,214,0.5), 0 0 24px rgba(205,174,108,0.5); }
.btn:hover { background: var(--knopf-tief); color: var(--knopf-schrift); box-shadow: 0 0 22px rgba(205,174,108,0.35); }
.btn:active { transform: translateY(1px); }
.btn.zweit { background: transparent; color: var(--schrift); border-color: var(--linie); }
.btn.zweit:hover { background: var(--flaeche-2); box-shadow: none; }
.btn.leise { background: none; border: 0; color: var(--schrift-2); text-decoration: underline; text-underline-offset: 3px; padding-inline: 0.4rem; min-height: 40px; }
.btn.leise:hover { color: var(--schrift); box-shadow: none; }
.btn.klein { min-height: 38px; padding: 0.45rem 0.9rem; font-size: 0.88rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
button { font: inherit; }

/* ---------- Karten und Kästen ---------- */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--a2);
}
.karte.glut { border-color: rgba(205,174,108,0.45); box-shadow: 0 0 40px rgba(205,174,108,0.08) inset; }
.karte h3 a { color: inherit; text-decoration: none; }
.karte h3 a:hover { color: var(--glut-hell); }
.hinweis {
  border-left: 3px solid var(--glut); padding: var(--a0) var(--a1); background: var(--flaeche);
  color: var(--schrift-2); border-radius: 0 var(--radius) var(--radius) 0;
}
.platzhalter {
  border: 1px dashed rgba(205,174,108,0.6); background: rgba(205,174,108,0.06);
  color: var(--glut-hell); padding: var(--a0) var(--a1); border-radius: var(--radius);
  font-family: var(--f-ui); font-size: 0.92rem;
}


/* Gravur-Rahmen mit Glut-Schein, für das eine wichtige Element je Seite */
.gravur {
  position: relative; border: 1px solid rgba(205,174,108,0.4); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(255,231,206,0.05) inset, 0 0 32px rgba(205,174,108,0.12);
}

/* ---------- Medienplatz auf der Startseite ---------- */
.medienplatz {
  aspect-ratio: 16 / 10; width: 100%; max-width: 100%;
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(160deg, #1F1F1F, #141414);
  border-radius: var(--radius); overflow: hidden; padding: var(--a1);
}
.medienplatz video, .medienplatz img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.portraet { border-radius: var(--radius); border: 1px solid var(--linie); display: block; max-width: 100%; height: auto; }

/* ---------- Listen ---------- */
ul.sauber, ol.sauber { margin: 0; padding-left: 1.2em; }
ul.sauber li + li, ol.sauber li + li { margin-top: 0.35em; }
ul.haken { list-style: none; padding: 0; margin: 0; }
ul.haken li { padding-left: 1.6em; position: relative; }
ul.haken li + li { margin-top: 0.5em; }
ul.haken li::before { content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--glut); box-shadow: 0 0 8px rgba(205,174,108,0.7); }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linie-weich); vertical-align: top; }
th { font-family: var(--f-ui); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--schrift-3); font-weight: 600; }

/* ---------- Formulare ---------- */
label { font-family: var(--f-ui); font-size: 0.9rem; color: var(--schrift-2); }
input[type="text"], input[type="email"], textarea, select {
  font: inherit; width: 100%; color: var(--schrift); background: var(--grund);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.65rem 0.8rem; min-height: 44px;
}
input:focus, textarea:focus { border-color: var(--glut); outline: none; box-shadow: 0 0 0 3px rgba(205,174,108,0.2); }
textarea { min-height: 7rem; resize: vertical; }
.feld { display: flex; flex-direction: column; gap: 0.35rem; }
.mailkasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a2); }
.mailkasten form { display: grid; gap: var(--a1); }
@media (min-width: 640px) { .mailkasten form.zeile { grid-template-columns: 1fr auto; align-items: end; } }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Details ---------- */
details { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
details summary { cursor: pointer; padding: var(--a1) var(--a2); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--a1); align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--glut); font-size: 1.4em; line-height: 1; font-family: var(--f-ui); }
details[open] summary::after { content: "–"; }
details > div { padding: 0 var(--a2) var(--a2); }
details + details { margin-top: var(--a0); }
/* „Mehr lesen“: längere Texte zum Aufklappen, ohne Kasten */
details.mehr { border: 0; background: none; }
details.mehr summary { padding: 0; justify-content: flex-start; color: var(--glut); font-family: var(--f-ui); font-size: 0.95rem; }
details.mehr summary::after { content: "▾"; font-size: 1em; }
details.mehr[open] summary::after { content: "▴"; }
details.mehr summary .auf, details.mehr[open] summary .zu { display: none; }
details.mehr[open] summary .auf { display: inline; }
details.mehr > div, details.mehr > div.stack { padding: var(--a1) 0 0; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie-weich); margin-top: var(--a4); padding-block: var(--a3) var(--a4); font-family: var(--f-ui); font-size: 0.9rem; color: var(--schrift-2); }
.fuss .wrap { display: grid; gap: var(--a2); }
@media (min-width: 760px) { .fuss .wrap { grid-template-columns: 1.618fr 1fr; } }
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--a0) var(--a1); }
.fuss a { color: var(--schrift-2); }
.fuss a:hover { color: var(--schrift); }
.fuss .hilfe-hinweis { color: var(--schrift); }

/* ---------- Sichtbar nur bei Bedarf ---------- */
.nur-druck { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Druck: hell, sparsam ---------- */
@media print {
  body { background: #fff; color: #1a1208; font-size: 11pt; }
  body::before, body::after, .vorschau-hinweis, .kopf, .fuss, .kein-druck { display: none !important; }
  .nur-druck { display: block; }
  a { color: inherit; text-decoration: none; }
  .karte, details { border-color: #bbb; background: #fff; }
  .wrap { max-width: none; padding: 0; }
}

/* ---------- Erste Fassung: Fotos, Preise, Hilfe ---------- */
figure { margin: 0; }
/* Rahmen um die Fotos, seit 07.11.2026 */
/* 08.11.2026: Rahmen ohne Innenabstand, damit er rundum gleich stark ist */
.foto { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid rgba(205,174,108,0.38); box-shadow: 0 14px 34px rgba(0,0,0,0.4); box-sizing: border-box; }
.foto-band { display: block; width: 100%; height: clamp(14rem, 36vw, 32rem); object-fit: cover; object-position: center 70%; }
section.block.ohne-linie { border-top: 0; }
.preise { display: grid; gap: var(--a2); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: stretch; }
.preise .karte { display: flex; flex-direction: column; gap: var(--a1); }
.preise .karte .btn { margin-top: auto; }
.preis { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); line-height: 1.1; font-weight: 600; }
.preis-zusatz { font-size: 0.42em; font-weight: 500; color: var(--schrift-2); white-space: nowrap; }
.schrittfolge { margin: 0; padding-left: 1.4em; }
.schrittfolge li + li { margin-top: var(--a0); }
.schrittfolge li::marker { color: var(--glut); font-family: var(--f-ui); font-weight: 700; }
.kontaktwege { display: grid; gap: var(--a1); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.gross { font-size: 1.15em; word-break: break-word; }
.fakten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem var(--a2); margin: 0; }
.fakten dt { font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--schrift-3); font-weight: 600; padding-top: 0.4em; }
.fakten dd { margin: 0; color: var(--schrift-2); }
@media (max-width: 520px) { .fakten { grid-template-columns: 1fr; gap: 0.15rem; } .fakten dd + dt { margin-top: var(--a0); } }
.nummern .btn { font-family: var(--f-zahl); font-size: 1.05rem; letter-spacing: 0.03em; }
.nummern .btn.zweit { font-family: var(--f-ui); font-size: 0.95rem; letter-spacing: 0; }
ol.schritte { margin: 0; padding-left: 1.4em; }
ol.schritte li + li { margin-top: var(--a1); }
ol.schritte li::marker { color: var(--glut); font-family: var(--f-ui); font-weight: 700; }
.abschnitt + .abschnitt { margin-top: var(--a3); }
.abschnitt { max-width: var(--text-breite); }
address { font-style: normal; }
details > div.stack { padding-top: 0; }
.sozial { display: flex; gap: 0.3rem; align-items: center; }
.sozial a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--schrift-2); }
.sozial a:hover { background: var(--flaeche); color: var(--glut-hell); }
.sozial svg, .btn svg { width: 20px; height: 20px; fill: currentColor; display: block; flex: none; }
.wege-knoepfe { display: grid; gap: var(--a0); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.kurz-angebot { display: grid; gap: var(--a2); grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 760px) { .kurz-angebot { grid-template-columns: 1fr; } }
.rad { width: 100%; height: auto; display: block; }
.rad text { font-family: var(--f-ui); font-size: 12px; fill: var(--schrift-2); }
.rad .legende-ist { fill: var(--glut); }
.rad .legende-soll { fill: var(--kerze); }
.rad .ring { fill: none; stroke: var(--linie); }
.rad .ist { fill: rgba(205,174,108,0.28); stroke: var(--glut); stroke-width: 2; }
.rad .soll { fill: rgba(230,211,168,0.22); stroke: var(--kerze); stroke-width: 1.5; }
.werkzeuge { display: grid; gap: var(--a2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.werkzeug { display: flex; flex-direction: column; gap: var(--a1); }
.werkzeug .btn { margin-top: auto; }
.marke-frei { align-self: flex-start; font-family: var(--f-ui); font-size: 0.76rem; font-weight: 600; color: var(--glut-hell); background: var(--flaeche-2); border-radius: 999px; padding: 0.2rem 0.7rem; }
#termin-rahmen { width: 100%; height: 720px; border: 0; border-radius: var(--radius); background: var(--flaeche); display: block; }

/* ---------- ENTWURF: Dieser Block fliegt raus, sobald Gio die Texte freigegeben hat ---------- */
.vorschau-hinweis { font-family: var(--f-ui); font-size: 0.82rem; color: var(--schrift-2); text-align: center; padding: 0.45rem var(--gutter); background: var(--grund-2); border-bottom: 1px solid var(--linie-weich); margin: 0; }
.vorschlag { border-left: 2px dashed var(--glut); padding-left: var(--a1); }
.vorschlag::before { content: "Vorschlag von Claude"; display: block; font-family: var(--f-ui); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--glut); font-weight: 600; margin-bottom: 0.25rem; }
/* ---------- /ENTWURF ---------- */

/* Warmer Goldschein von oben rechts, Gios Zeichen als Prägung im Hintergrund */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 82% -10%, rgba(205,174,108,0.10), transparent 60%),
    radial-gradient(40rem 30rem at 10% 110%, rgba(205,174,108,0.04), transparent 60%);
}
body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: min(72vw, 640px); aspect-ratio: 1;
  right: -10vw; top: 2vw;
  /* Bis 08.11.2026: logo-hintergrund.png mit opacity 0.07 und Glut-Schein */
  background: url("../img/logo-praegung.png") center / contain no-repeat;
  opacity: 1;
  display: none;   /* Gio, 08.11.2026: wirkt noch erhaben statt eingedrückt, bis zur Lösung ausgeblendet */
}

/* Oberes Bild jeder Seite: größer, halbe Breite */
@media (min-width: 761px) { .gold.halb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
/* Überschrift als Treppe, Gios Idee vom 08.11.2026: jede Zeile ein Stück weiter nach rechts */
h1.treppe span { display: block; }
h1.treppe span:nth-child(2) { padding-left: 1.1em; }
h1.treppe span:nth-child(3) { padding-left: 2.2em; }
@media (max-width: 520px) { h1.treppe span:nth-child(2) { padding-left: 0.6em; } h1.treppe span:nth-child(3) { padding-left: 1.2em; } }
/* Überschrift als Reise, Gios Idee vom 08.11.2026, 23:15, eingebaut 09.11.2026:
   „Eine Reise“ und versetzt „nach innen“ in derselben Zeile, dann „zur Ursache“ und „deiner Sucht.“ gleichmäßig gestuft.
   Die vier Teile tauchen nacheinander aus einer leichten Unschärfe auf, zusammen unter 2 Sekunden. */
/* Neu am 09.11.2026 mittags auf Gios Wunsch: zwei Zeilen, eine Schrift, gestuft.
   Von links nach rechts gelesen: Eine Reise, zur Ursache, nach innen, deiner Sucht.
   Jeder Teil fliegt langsam aus seiner Richtung herein: links, oben, unten, rechts. */
/* 09.11.2026, 13:35, Gio zu Version 14: nicht mehr versetzt, „Eine Reise nach innen“ und „zur Ursache deiner Sucht.“
   je sauber in einer Zeile, darf über die ganze Breite gehen. Halb so schnell, und am Anfang langsam aus dem
   Unsichtbaren auftauchen (leichte Unschärfe wie in Version 13), trotzdem aus allen vier Richtungen. */
/* 09.11.2026, 16:30, Gio: neue Überschrift „Finde die Ursache deiner Sucht und gewinne dein Leben zurück.“, Vorbild Lebersorger:
   aufgeräumt, zentriert, etwas kleiner, Abstand zwischen den Zeilen, höchstens senkrecht versetzt, nie seitlich.
   Einflug und langsames Auftauchen bleiben. Auf schmalen Bildschirmen bricht jede Zeile zwischen ihren zwei Teilen um, mittig. */
.start-kopf { text-align: center; }
.start-kopf .lead { margin-inline: auto; }
.start-kopf .reihe { justify-content: center; }
/* 09.11.2026, 16:50, Gio: Zeilenabstand der Überschrift etwas kleiner, darunter etwas mehr Platz */
h1.reise { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.1rem); line-height: 1.08; }
.start-kopf h1.reise { margin-bottom: var(--a1); }
h1.reise .zeile { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.28em; }
h1.reise .zeile + .zeile { margin-top: 0.12em; }
h1.reise .zeile > span { display: inline-block; white-space: nowrap; }
@keyframes von-links { from { transform: translateX(-1.4em); } to { transform: none; } }
@keyframes von-oben { from { transform: translateY(-1em); } to { transform: none; } }
@keyframes von-unten { from { transform: translateY(1em); } to { transform: none; } }
@keyframes von-rechts { from { transform: translateX(1.4em); } to { transform: none; } }
@keyframes auftauchen { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
h1.reise .t1 { animation: von-links 2.2s cubic-bezier(.22,.61,.36,1) both, auftauchen 2.2s cubic-bezier(.55,0,.45,1) both; }
h1.reise .t2 { animation: von-oben 2.2s cubic-bezier(.22,.61,.36,1) 0.9s both, auftauchen 2.2s cubic-bezier(.55,0,.45,1) 0.9s both; }
h1.reise .t3 { animation: von-unten 2.2s cubic-bezier(.22,.61,.36,1) 1.8s both, auftauchen 2.2s cubic-bezier(.55,0,.45,1) 1.8s both; }
h1.reise .t4 { animation: von-rechts 2.2s cubic-bezier(.22,.61,.36,1) 2.7s both, auftauchen 2.2s cubic-bezier(.55,0,.45,1) 2.7s both; }
@media (prefers-reduced-motion: reduce) { h1.reise span { animation: none !important; } }
/* Gio, 08.11.2026: Das obere Bild muss beim Draufkommen ganz zu sehen sein, also nie höher als der Bildschirm unter der Leiste */
.gold.halb .foto { width: auto; max-width: 100%; max-height: calc(100vh - 13rem); max-height: calc(100svh - 13rem); margin-inline: auto; }
/* Über mich, 09.11.2026: Geschichte aufklappbar, Fotos erscheinen erst beim Aufklappen */
details.mehr.geschichte > summary { font-size: 1rem; }
details.mehr.geschichte > .gold { padding-top: var(--a2); }
/* Über mich, 09.11.2026 abends (Gio): Weg-Foto steht schon ohne Aufklappen neben der Geschichte, das Bildschirmzeit-Foto kommt erst beim Aufklappen dazu */
.geschichte-raster:not(:has(details[open])) { align-items: center; }
.geschichte-raster:not(:has(details[open])) .nur-offen { display: none; }