/* Slidewerk Verkaufsseite. Handy zuerst, ab 900 px Breite die Computer-Ansicht.
   Zwei Welten über Variablen: .welt-atelier (Frau), .welt-werkstatt (Mann), dazu .welt-start (Startseite). */

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
p, h1, h2, h3, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-color: var(--linie); text-underline-offset: 3px; }
a:hover { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Seitenrand: mindestens 20 px (am Computer 32 px), bei Notch oder Systemleiste so viel, dass nichts darunter verschwindet */
:root { --rand-l: max(20px, env(safe-area-inset-left, 0px)); --rand-r: max(20px, env(safe-area-inset-right, 0px)); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; background: var(--akzent); color: var(--akzent-auf); font-weight: 700;
}
.sprung:focus { top: 12px; }

/* ---------- Welten ---------- */

.welt-atelier {
  --grund: #F6F1E7; --papier: #FBF8F2; --text: #1B2340; --text2: #4E556E; --text3: #4E556E;
  --akzent: #A0552F; --akzent-auf: #FFFFFF; --akzent-hell: #E0A27A; --fokus: #A0552F;
  --linie: #DED5C4; --linie-stark: #1B2340;
  --tief: #1B2340; --tief-text: #F6F1E7; --tief-text2: #B9BDCC; --tief-linie: #343D5E;
  --schrift: 'Manrope', Arial, sans-serif;
  --titel-schrift: 'Cormorant Garamond', Georgia, serif;
  --titel-gewicht: 500; --titel-gross: none; --titel-abstand: -.01em; --titel-hoehe: 1.06;
  --knopf-schrift: 'Manrope', Arial, sans-serif; --knopf-gross: none; --knopf-abstand: 0; --knopf-groesse: 16px;
  --rund: 999px; --ecke: 0;
  --ig-bg: #FFFFFF; --ig-tx: #0C0C0C; --ig-leise: #737373; --ig-linie: #DBDBDB;
}

.welt-werkstatt {
  /* Beton und Stahl: hell und ruhig, große graue Überschriften, schwarze Rahmen, oben ein Verlauf aus Schwarz und Stahlblau */
  --grund: #F2F2F0; --papier: #FFFFFF; --text: #121417; --text2: #4F555B; --text3: #5D636A;
  --akzent: #34597A; --akzent-auf: #FFFFFF; --akzent-hell: #A9C4DC; --fokus: #34597A;
  --linie: #D5D7D9; --linie-stark: #121417; --holz: #8C9196; --grau-titel: #757B81;
  --tief: #1A1D21; --tief-text: #FFFFFF; --tief-text2: #B7C6D3; --tief-linie: #2E343B;
  --verlauf: linear-gradient(135deg, #1A1D21 0%, #2A323C 55%, #3D5266 100%);
  --schrift: 'Inter', Arial, sans-serif;
  --titel-schrift: 'Inter Tight', Arial, sans-serif;
  --titel-gewicht: 700; --titel-gross: uppercase; --titel-abstand: -.01em; --titel-hoehe: 1.02;
  --knopf-schrift: 'Inter Tight', Arial, sans-serif; --knopf-gross: uppercase; --knopf-abstand: .06em; --knopf-groesse: 15px;
  --rund: 0; --ecke: 0;
  --ig-bg: #FFFFFF; --ig-tx: #0C0C0C; --ig-leise: #737373; --ig-linie: #DBDBDB;
}

.welt-start {
  --grund: #F4F1EC; --papier: #FBF9F5; --text: #1E2230; --text2: #4A4F5E; --text3: #4A4F5E;
  --akzent: #A0552F; --akzent-auf: #FFFFFF; --fokus: #A0552F; --linie: #D9D2C6;
  --schrift: 'Manrope', Arial, sans-serif;
  --titel-schrift: 'Cormorant Garamond', Georgia, serif;
  --knopf-schrift: 'Manrope', Arial, sans-serif; --knopf-gross: none; --knopf-abstand: 0; --knopf-groesse: 16px;
  --rund: 12px; --ecke: 12px;
}

/* ---------- Grundbausteine ---------- */

.rahmen { width: 100%; max-width: 1264px; margin: 0 auto; padding-left: var(--rand-l); padding-right: var(--rand-r); }
.abschnitt { padding: 56px 0; }
.abschnitt--papier { background: var(--papier); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
/* Zwei helle Abschnitte direkt hintereinander (Zeit sparen und So geht’s): nur eine Linie dazwischen, nicht zwei */
.abschnitt--papier + .abschnitt--papier { border-top: 0; }

.augenbraue {
  font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent);
}
.welt-werkstatt .augenbraue {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--titel-schrift); font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--text3);
}
.welt-werkstatt .augenbraue::before {
  content: ""; flex: 0 0 28px; height: 2px; margin-top: .7em; background: var(--akzent);
}

.titel {
  font-family: var(--titel-schrift); font-weight: var(--titel-gewicht); text-transform: var(--titel-gross);
  letter-spacing: var(--titel-abstand); line-height: var(--titel-hoehe);
}
.titel em { font-style: italic; color: var(--akzent); }
.titel, .zeitkarte__zeit, .schlicht h1 { font-variant-numeric: lining-nums; }
h1.titel, h2.titel { text-wrap: balance; }
/* „in Minuten fertig.“ bleibt zusammen, bricht aber innen um, wenn größere Schrift es breiter als die Zeile macht */
@media (min-width: 340px) { .welt-atelier .hero h1 em { display: inline-block; } }
main:focus { outline: none; }
.hero { overflow-x: clip; }
/* Fokus auf dunklem Grund weiß */
.fuss, .welt-werkstatt .hero { --fokus: #FFFFFF; }
.welt-werkstatt .titel em { font-style: normal; }

h1.titel { margin-top: 16px; font-size: 44px; }
.welt-werkstatt h1.titel { font-size: 42px; }
h2.titel { margin-top: 12px; font-size: 34px; line-height: 1.08; }
/* Steht die Überschrift ganz oben im Abschnitt (ohne Augenbraue darüber), braucht sie keinen Abstand nach oben */
h2.titel:first-child { margin-top: 0; }
.welt-werkstatt h2.titel { font-size: 34px; line-height: 1.02; color: var(--grau-titel); }
.welt-werkstatt h2.titel em { color: var(--text); }
h3.titel { font-size: 23px; line-height: 1.15; font-weight: 600; }
.welt-werkstatt h3.titel { font-weight: 700; letter-spacing: .01em; line-height: 1.1; }

.einleitung { margin-top: 14px; color: var(--text2); }
.klein { font-size: 13px; line-height: 1.5; color: var(--text3); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--rund);
  background: var(--akzent); color: var(--akzent-auf);
  font-family: var(--knopf-schrift); font-size: var(--knopf-groesse); font-weight: 700; line-height: 1.2;
  letter-spacing: var(--knopf-abstand); text-transform: var(--knopf-gross); text-align: center; text-decoration: none;
  cursor: pointer;
}
.knopf:hover { color: var(--akzent-auf); filter: brightness(1.06); }
.knopf--breit { display: flex; width: 100%; min-height: 56px; }
.knopf--klein { min-height: 44px; padding: 0 18px; font-size: 15px; }
.welt-werkstatt .knopf--klein { font-size: 13px; }
/* Breite Werkstatt-Knöpfe am Handy etwas schmaler gesetzt, damit „Ersten Monat für 2,99 € starten“ in eine Zeile passt */
.welt-werkstatt .knopf--breit, .welt-werkstatt .kaufleiste .knopf { padding: 0 16px; font-size: 15px; letter-spacing: .06em; }
.knopf--rand { background: transparent; color: var(--tief-text); border: 1px solid currentColor; }
.knopf--rand-hell { background: transparent; color: var(--text); border: 1px solid currentColor; }
.knopf--rand-hell:hover { color: var(--akzent); filter: none; }
.knopf--rand:hover { color: var(--akzent-hell); filter: none; }

/* ---------- Kopf ---------- */

.kopf { border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 8px; padding-bottom: 8px; }
.logo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--titel-schrift); font-weight: 600; font-size: 28px; line-height: 1; text-decoration: none;
}
.welt-werkstatt .logo { font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.welt-werkstatt .kopf { background: #FFFFFF; }
.welt-werkstatt .kopf .knopf { background: transparent; color: var(--text); border: 1.5px solid var(--linie-stark); }
.welt-werkstatt .kopf .knopf:hover { background: var(--text); color: #FFFFFF; filter: none; }
.fuss .logo__raute { background: var(--akzent-hell); }
.logo .logo-zusatz { color: var(--holz); }
.welt-werkstatt .kopf .logo-zusatz { color: #5D636A; }
.logo__raute { flex: none; width: .3em; height: .3em; margin: 0 .16em 0 .08em; background: var(--akzent); transform: rotate(45deg); }
.kopf nav { display: none; }

/* ---------- Hero ---------- */

.hero { padding: 40px 0 56px; }
.hero .einleitung { margin-top: 18px; }
.hero .knopf--breit { margin-top: 24px; }
.hero .knopf + .klein { margin-top: 12px; text-align: center; }
.gruende { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.gruende li {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px;
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--papier);
  font-size: 13px; font-weight: 600;
}
/* Männer-Seite: oben der Verlauf aus Schwarz und Stahlblau, darauf helle Schrift */
.welt-werkstatt .hero { background: var(--verlauf); color: #FFFFFF; }
.welt-werkstatt .hero .augenbraue { color: #B7C6D3; }
.welt-werkstatt .hero .augenbraue::before { background: var(--akzent-hell); }
.welt-werkstatt .hero .titel em { color: var(--akzent-hell); }
.welt-werkstatt .hero .einleitung { color: #D3DAE0; }
.welt-werkstatt .hero .klein { color: #B7C6D3; }
.welt-werkstatt .hero .knopf { background: #FFFFFF; color: var(--text); }
.welt-werkstatt .hero .knopf:hover { color: var(--text); background: #E9EEF2; filter: none; }
.welt-werkstatt .hero .gruende li { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.welt-werkstatt .hero .gruende svg { color: var(--akzent-hell); }
.gruende svg { flex: 0 0 14px; color: var(--akzent); }

.hero-beispiel { margin-top: 36px; }
.notiz {
  display: flex; justify-content: flex-end; align-items: flex-start; gap: 6px; padding-right: 12px;
  font-family: 'Caveat', cursive; font-weight: 500; font-size: 26px; line-height: 1.05; color: var(--akzent);
}
.notiz span { transform: rotate(-4deg); margin-top: 2px; }
.welt-werkstatt .notiz { font-family: var(--titel-schrift); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #FFFFFF; }
.welt-werkstatt .notiz span { padding: 6px 10px; border: 1.5px solid #FFFFFF; transform: rotate(-3deg); }
.hero-beispiel .post { max-width: none; margin: 4px calc(-1 * var(--rand-r)) 0 calc(-1 * var(--rand-l)); border-left: 0; border-right: 0; }

/* ---------- Instagram-Beitrag, hell wie in der App ---------- */

.post {
  max-width: 520px; background: var(--ig-bg); color: var(--ig-tx); border: 1px solid var(--ig-linie);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4;
}
.post__kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.post__ring {
  flex: 0 0 34px; width: 34px; height: 34px; padding: 2px; border-radius: 50%;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF 85%, #4F5BD5);
}
.post__avatar {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--ig-bg);
  background: var(--s-ak); color: var(--s-bg); font-family: var(--s-ftt); font-weight: 700; font-size: 13px; line-height: 1;
}
.post__wer { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.post__name { font-weight: 600; }
.post__hinweis { font-size: 12px; color: var(--ig-leise); }
.post__medien { position: relative; }
.post__band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.post__band::-webkit-scrollbar { display: none; }
.post__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.post__zaehler {
  position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 9px; border-radius: 13px;
  background: rgba(18, 18, 18, .72); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .02em; pointer-events: none;
}
.post__pfeil {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center; background: none; color: #262626; cursor: pointer;
}
.post__pfeil span { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: 0 1px 6px rgba(0, 0, 0, .28); }
.post__pfeil:hover span { background: #FFFFFF; }
.post__pfeil--zurueck { left: 0; justify-content: flex-start; padding-left: 2px; }
.post__pfeil--weiter { right: 0; justify-content: flex-end; padding-right: 2px; }
.post__pfeil[hidden] { display: none; }
.post__leiste { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 2px; }
.post__leiste .zeichen { display: flex; }
.post__leiste svg { box-sizing: content-box; padding: 8px 6px; }
.post__punkte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.post__punkte span { width: 6px; height: 6px; border-radius: 50%; background: var(--ig-leise); opacity: .5; transition: background .2s, opacity .2s; }
.post__punkte span.ist-aktiv { background: #0095F6; opacity: 1; }
.post__zahlen { padding: 0 12px; }
.post__zahlen b, .post__text b { font-weight: 600; }
.post__text { padding: 4px 12px 0; }
.post__kommentare { padding: 4px 12px 0; color: var(--ig-leise); }
.post__zeit { padding: 4px 12px 14px; font-size: 12px; color: var(--ig-leise); }

/* ---------- Slides der Beispiel-Marken: gebaut wie in der App, alle Maße relativ zur Slide-Breite ---------- */

.s {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size;
  background: var(--s-bg); color: var(--s-tx); font-family: var(--s-fu); line-height: 1.35;
}
.s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s__innen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 9cqw 8cqw 6cqw; }
.s__kicker { font-weight: 700; font-size: 3.1cqw; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ak); color: color-mix(in srgb, var(--s-ak) 75%, var(--s-tx)); }
.s__titel {
  margin-top: 2.2cqw; font-family: var(--s-ftt); font-weight: var(--s-ftw); font-size: calc(9.4cqw * var(--s-skala, 1)); line-height: 1.04;
  letter-spacing: -.005em; text-transform: var(--s-gross, none); text-wrap: balance;
}
.s__titel em { font-style: var(--s-kursiv, italic); color: var(--s-ak); }
.s__text { margin-top: 3cqw; font-size: 4.2cqw; line-height: 1.45; color: color-mix(in srgb, var(--s-tx) 84%, var(--s-bg)); }
.s__notiz { align-self: flex-end; margin-top: 3cqw; font-family: var(--s-fh); font-size: 7cqw; line-height: 1; color: var(--s-ak); transform: rotate(-4deg); }
.s__knopf {
  align-self: flex-start; margin-top: 6cqw; padding: 2.6cqw 4.6cqw; border-radius: 999px; background: var(--s-ak); background: color-mix(in srgb, var(--s-ak) 80%, var(--s-tx)); color: var(--s-bg);
  font-weight: 700; font-size: 3.8cqw; line-height: 1.2;
}
.s__fuss {
  margin-top: auto; padding-top: 4cqw; display: flex; justify-content: space-between; gap: 3cqw;
  font-family: var(--s-fu); font-size: 2.9cqw; font-weight: 600; letter-spacing: .04em; color: var(--s-tx); color: color-mix(in srgb, var(--s-tx) 78%, var(--s-bg));
}
.s__fuss span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vollbild mit Kasten (helle Marken) oder mit Verlauf (dunkle Bilder) */
.s__kasten {
  position: absolute; left: 6cqw; right: 6cqw; display: flex; flex-direction: column; padding: 6.5cqw 7cqw 4.5cqw;
  background: color-mix(in srgb, var(--s-bg) 94%, transparent);
}
.s--box-oben .s__kasten { top: 6cqw; }
.s--box-unten .s__kasten { bottom: 6cqw; }
.s__kasten .s__titel { font-size: calc(8.2cqw * var(--s-skala, 1)); }
.s__kasten .s__fuss { padding-top: 5cqw; }
.s--verlauf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 8, .86) 0%, rgba(8, 8, 8, .5) 40%, rgba(8, 8, 8, 0) 68%); }
.s--verlauf .s__innen { z-index: 1; justify-content: flex-end; color: #FFFFFF; }
.s--verlauf .s__titel { font-size: calc(9cqw * var(--s-skala, 1)); }
.s--verlauf .s__fuss { margin-top: 5cqw; color: rgba(255, 255, 255, .78); }

/* Nur Text mit großer Zahl */
.s__nr {
  margin-top: 1cqw; font-family: var(--s-ftt); font-weight: var(--s-ftw); font-size: calc(30cqw * var(--s-skala, 1)); line-height: .82;
  color: var(--s-ak); text-transform: var(--s-gross, none);
}
.s--text .s__titel { margin-top: 5cqw; font-size: calc(10.4cqw * var(--s-skala, 1)); }

/* Bild oben, Text unten */
.s__oben { position: absolute; left: 0; right: 0; top: 0; height: 54%; overflow: hidden; }
.s--bildoben .s__innen { top: 54%; padding-top: 5.5cqw; }
.s--bildoben .s__titel { font-size: calc(8cqw * var(--s-skala, 1)); }
.s--bildoben .s__text { margin-top: 2cqw; font-size: 3.9cqw; }

/* Liste mit Häkchen */
.s__liste { margin-top: 7cqw; display: flex; flex-direction: column; gap: 4cqw; font-size: 5cqw; font-weight: 600; line-height: 1.25; }
.s__liste li { display: flex; align-items: center; gap: 3.6cqw; }
.s__marke { flex: 0 0 8cqw; width: 8cqw; height: 8cqw; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s-ak); color: var(--s-bg); }
.s__marke svg { width: 4.6cqw; height: 4.6cqw; }

/* Große Zahl mit Einheit */
.s__zahl {
  margin-top: 2cqw; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 2.4cqw;
  font-family: var(--s-ftt); font-weight: var(--s-ftw); font-size: calc(var(--z, 30cqw) * var(--s-skala, 1)); line-height: .9; color: var(--s-ak);
}
.s__einheit { font-size: 6.4cqw; line-height: 1; color: var(--s-tx); text-transform: var(--s-gross, none); }
.s--zahl .s__titel { margin-top: 4cqw; }

/* Einladung am Ende */
.s--cta .s__innen { justify-content: center; }
.s--cta .s__titel { font-size: calc(10cqw * var(--s-skala, 1)); }
.s--cta .s__fuss { position: absolute; left: 8cqw; right: 8cqw; bottom: 6cqw; }
.s__kreis { position: relative; width: 40cqw; aspect-ratio: 1; margin-bottom: 4cqw; border-radius: 50%; overflow: hidden; }

/* Vorher und nachher übereinander, Titel im Band dazwischen */
.s__halb { position: absolute; left: 0; right: 0; top: 0; height: 38%; overflow: hidden; }
.s__halb--unten { top: auto; bottom: 0; }
.s__band { position: absolute; left: 0; right: 0; top: 38%; height: 24%; display: flex; flex-direction: column; justify-content: center; padding: 0 7cqw; background: var(--s-bg); }
.s__band .s__titel { margin-top: 1.4cqw; font-size: calc(7.6cqw * var(--s-skala, 1)); }
.s__band .s__fuss { margin-top: 2cqw; padding-top: 0; }
.s__etikett {
  position: absolute; left: 4.5cqw; top: 4.5cqw; padding: 1.2cqw 2.8cqw; background: var(--s-bg); color: var(--s-tx);
  font-family: var(--s-ftt); font-weight: 700; font-size: 3.8cqw; letter-spacing: .12em; text-transform: uppercase;
}
.s__etikett--gut { background: var(--s-ak); color: var(--s-bg); }

/* Der typische schwache Post als Gegenstück: Handyfoto, Schrift mit Schatten, grelles Band */
.schlecht { position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; background: #222222; }
.schlecht img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.35) contrast(1.06) brightness(1.04); }
.schlecht__oben {
  position: absolute; left: 4cqw; right: 4cqw; top: 8cqw; text-align: center; color: #FFFFFF;
  font: 900 9.4cqw/1.05 'Arial Black', 'Arial Bold', Arial, sans-serif; text-shadow: 0 0 1cqw #000000, 0 .5cqw 1.4cqw rgba(0, 0, 0, .7);
}
.schlecht__band {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 11cqw; padding: 2.6cqw 3cqw; text-align: center;
  font: 700 5.4cqw/1.2 Arial, sans-serif; transform: rotate(-2.5deg); box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .35);
}

/* Vergleich: oben liegt der Post mit Slidewerk, links von der Linie schaut der typische Post hervor */
.vergleich { position: relative; touch-action: pan-y pinch-zoom; cursor: ew-resize; -webkit-user-select: none; user-select: none; --teil: 32%; }
.vergleich__nachher { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--teil)); }
.vergleich img { -webkit-user-drag: none; pointer-events: none; }
.vergleich__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.vergleich__linie { position: absolute; top: 0; bottom: 0; left: var(--teil); z-index: 3; width: 0; pointer-events: none; }
.vergleich__linie::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.vergleich__knauf {
  position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #FFFFFF; color: #111111; box-shadow: 0 4px 16px rgba(0, 0, 0, .32);
}
.vergleich__regler:focus-visible ~ .vergleich__linie .vergleich__knauf { outline: 3px solid var(--fokus); outline-offset: 3px; }
.vergleich__etikett {
  position: absolute; top: 12px; z-index: 2; padding: 5px 10px; border-radius: var(--rund); pointer-events: none; transition: opacity .2s;
  background: rgba(17, 17, 17, .74); color: #FFFFFF; font: 700 12px/1.2 var(--schrift); letter-spacing: .04em;
}
.vergleich__etikett--vorher { left: 12px; }
.vergleich__etikett--nachher { right: 12px; background: var(--akzent); color: var(--akzent-auf); }
.vergleich__etikett.ist-weg { opacity: 0; }
.welt-werkstatt .vergleich__etikett { font-family: var(--titel-schrift); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Bereiche: sechs Reiter, darunter immer nur das Beispiel des gewählten Bereichs ---------- */

.filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.welt-werkstatt .filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter button {
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 6px 10px;
  border: 1px solid var(--text2); border-radius: var(--rund); background: transparent; color: var(--text);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.welt-werkstatt .filter button {
  border: 1.5px solid var(--linie-stark); font-family: var(--titel-schrift); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.filter button[aria-selected="true"] { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-auf); font-weight: 700; }

.feed { margin-top: 24px; }
.feed .post { max-width: none; margin-left: calc(-1 * var(--rand-l)); margin-right: calc(-1 * var(--rand-r)); border-left: 0; border-right: 0; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) { .karte { animation: einblenden .35s ease both; } }

.stern { position: relative; margin-left: 1px; color: inherit; font-weight: 600; text-decoration: none; }
.stern::after { content: ""; position: absolute; inset: -14px -18px; }
.stern:hover { color: inherit; text-decoration: underline; }

/* ---------- Zeit sparen: angedeutetes Design-Programm gegen Slidewerk am Handy ---------- */

.zeitvergleich { display: grid; gap: 16px; margin-top: 28px; }
.zeitkarte { display: flex; flex-direction: column; overflow: hidden; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--ecke); }
.zeitkarte--neu { border: 2px solid var(--akzent); }
.zeitkarte__bild { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 28px 16px; background: var(--linie); }
.zeitkarte--neu .zeitkarte__bild { background: var(--tief); }
.welt-werkstatt .zeitkarte--neu .zeitkarte__bild { background: var(--verlauf); }
.zeitkarte figcaption { padding: 18px 18px 22px; }
.zeitkarte__wer { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.zeitkarte__zeit { margin-top: 4px; font-family: var(--titel-schrift); font-weight: var(--titel-gewicht); font-size: 32px; line-height: 1.1; text-transform: var(--titel-gross); }
.zeitkarte--neu .zeitkarte__zeit { color: var(--akzent); }
.zeitkarte figcaption p:last-child { margin-top: 8px; font-size: 15px; color: var(--text2); }
.zeit__ersparnis { margin-top: 32px; font-size: 30px; line-height: 1.15; text-align: center; text-wrap: balance; }
.welt-werkstatt .zeit__ersparnis em { color: var(--akzent); }
.zeit__hinweis { margin-top: 8px; font-size: 15px; text-align: center; }

.uhr {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font: 700 11px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums;
}
.uhr--lang { background: #B3261E; color: #FFFFFF; }
.uhr--kurz { background: var(--akzent); color: var(--akzent-auf); }

.editor {
  width: 100%; max-width: 330px; overflow: hidden; background: #FFFFFF; border: 1px solid #C9CCD1; border-radius: 10px;
  box-shadow: 0 14px 30px rgba(18, 20, 23, .16); color: #2B2F36; font: 11px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.editor__leiste { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; background: #F1F2F4; border-bottom: 1px solid #DDE0E4; }
.editor__punkte { display: flex; gap: 4px; }
.editor__punkte i { width: 7px; height: 7px; border-radius: 50%; background: #C4C8CE; }
.editor__datei { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5B616A; }
.editor__werkzeuge { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-bottom: 1px solid #E6E8EB; }
.editor__werkzeuge span { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 6px; border: 1px solid #DDE0E4; border-radius: 4px; }
.editor__auswahl::after { content: "\25BE"; margin-left: 5px; font-size: 9px; color: #8A9099; }
.editor__werkzeuge .editor__farbe { padding: 0; border: 0; border-radius: 50%; background: #5B7DB1; }
.editor__mitte { display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px; height: 176px; }
.editor__seite { display: flex; flex-direction: column; gap: 3px; padding: 8px 3px; background: #F7F8F9; border-right: 1px solid #E6E8EB; }
.editor__seite span { font-size: 8.5px; text-align: center; color: #5B616A; }
.editor__seite span::before { content: ""; display: block; width: 13px; height: 13px; margin: 3px auto 2px; border: 1.5px solid #8A9099; border-radius: 3px; }
.editor__flaeche { display: flex; align-items: center; justify-content: center; background: #E9EBEE; }
.editor__folie { position: relative; width: 112px; aspect-ratio: 4 / 5; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.editor__oben { position: absolute; left: 0; right: 0; top: 0; height: 36%; background: repeating-linear-gradient(45deg, #EEF0F2 0 6px, #E3E6E9 6px 12px); }
.editor__rahmen { position: absolute; left: 10px; right: 10px; top: 52%; padding: 7px 2px; border: 1.5px solid #3B82F6; color: #9AA0A8; font-size: 9px; text-align: center; white-space: nowrap; }
.editor__rahmen::before,
.editor__rahmen::after { content: ""; position: absolute; width: 6px; height: 6px; background: #FFFFFF; border: 1.5px solid #3B82F6; }
.editor__rahmen::before { left: -4px; top: -4px; }
.editor__rahmen::after { right: -4px; bottom: -4px; }
.editor__zeiger { position: absolute; right: 8px; bottom: 6px; }
.editor__seiten { display: flex; flex-direction: column; gap: 5px; padding: 8px 6px; background: #F7F8F9; border-left: 1px solid #E6E8EB; }
.editor__seiten i { display: block; aspect-ratio: 4 / 5; border: 1px dashed #B4B9C0; border-radius: 2px; }
.editor__seiten i.ist-fertig { border: 0; background: linear-gradient(#D5D9DE 0 40%, #FFFFFF 40%); box-shadow: 0 0 0 1px #CDD1D6; }

.handy {
  position: relative; width: 172px; display: flex; flex-direction: column; gap: 8px; padding: 32px 9px 12px;
  background: #FFFFFF; border: 7px solid #121418; border-radius: 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.handy .uhr { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); }
.handy__folie { overflow: hidden; border-radius: 3px; }
.handy__fertig {
  display: flex; align-items: center; justify-content: center; gap: 4px; color: #1F2328;
  font: 600 10.5px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.handy__fertig svg { color: #1E7F45; }
.handy__knopf {
  display: block; padding: 8px 0; border-radius: var(--rund); background: var(--akzent); color: var(--akzent-auf);
  font: 700 11px/1 var(--knopf-schrift); letter-spacing: var(--knopf-abstand); text-transform: var(--knopf-gross); text-align: center;
}

/* ---------- So geht's ---------- */

.foto-rahmen { margin-top: 24px; padding: 8px; background: var(--grund); border: 1px solid var(--linie); }
.foto-rahmen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.welt-werkstatt .foto-rahmen { position: relative; margin-right: 12px; padding: 0; border: 0; background: none; }
.welt-werkstatt .foto-rahmen::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1.5px solid var(--linie-stark); }
.welt-werkstatt .foto-rahmen img { position: relative; }
.schritte { margin-top: 24px; border-bottom: 1px solid var(--linie); }
.schritte li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--linie); }
.schritte__nr { flex: 0 0 34px; font-family: var(--titel-schrift); font-style: italic; font-weight: 500; font-size: 44px; line-height: .85; color: var(--akzent); }
.welt-werkstatt .schritte__nr { flex: 0 0 56px; font-style: normal; font-weight: 700; font-size: 40px; color: var(--holz); }
.schritte p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text2); }

/* ---------- Was drin ist ---------- */

.liste { margin-top: 24px; border-top: 1px solid var(--linie); }
.liste li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.welt-werkstatt .liste { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--linie-stark); background: var(--linie-stark); }
.welt-werkstatt .liste li { padding: 16px; border: 0; background: var(--grund); }
.liste svg { flex: 0 0 24px; margin-top: 2px; color: var(--akzent); }
.welt-werkstatt .liste svg { color: var(--akzent); }
.liste__titel { font-family: var(--titel-schrift); font-weight: 600; font-size: 21px; line-height: 1.2; }
.welt-werkstatt .liste__titel { font-weight: 700; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; }
.liste__titel + p { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text2); }

/* ---------- Preis ---------- */

.preis-bild { padding: 8px; background: var(--grund); border: 1px solid var(--linie); }
.preis-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
.welt-werkstatt .preis-bild { position: relative; margin-right: 12px; padding: 0; border: 0; background: none; }
.welt-werkstatt .preis-bild::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1.5px solid var(--linie-stark); }
.welt-werkstatt .preis-bild img { position: relative; }
.preis-kasten { margin-top: 16px; padding: 28px 22px 24px; background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--ecke); }
.welt-werkstatt .preis-kasten { margin-top: 26px; }
.preis-kasten .titel { margin-top: 12px; font-size: 40px; line-height: 1.02; font-weight: 600; }
.welt-werkstatt .preis-kasten .titel { font-size: 36px; line-height: 1.02; font-weight: 700; color: var(--text); }
.preis-kasten .danach { margin-top: 10px; font-size: 17px; line-height: 1.5; }
.haken { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.45; }
.haken li { display: flex; align-items: flex-start; gap: 10px; }
.haken svg { flex: 0 0 18px; margin-top: 2px; color: var(--akzent); }
.welt-werkstatt .haken { color: var(--text2); }
.welt-werkstatt .haken svg { color: var(--akzent); }
.preis-kasten .knopf { margin-top: 24px; }
.preis-kasten .klein { margin-top: 14px; text-align: center; }
.hinweis-kasten { margin-top: 16px; display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--ecke); }
.welt-werkstatt .hinweis-kasten { border: 1.5px solid var(--linie-stark); }
.hinweis-kasten svg { flex: 0 0 26px; margin-top: 2px; color: var(--akzent); }
.welt-werkstatt .hinweis-kasten svg { color: var(--akzent); }
.hinweis-kasten .liste__titel { font-size: 22px; }
.hinweis-kasten p + p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text2); }

/* ---------- Fragen ---------- */

.fragen { margin-top: 22px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 0;
  list-style: none; cursor: pointer;
  font-family: var(--titel-schrift); font-weight: 600; font-size: 21px; line-height: 1.2;
}
.welt-werkstatt .fragen summary { padding: 14px 0; font-size: 18px; letter-spacing: 0; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary svg { flex: 0 0 20px; color: var(--akzent); transition: transform .2s ease; }
.fragen details[open] summary svg { transform: rotate(45deg); }
.fragen details p { padding: 0 28px 18px 0; font-size: 15px; line-height: 1.6; color: var(--text2); }
.fragen + p { margin-top: 20px; font-size: 15px; color: var(--text2); }

/* ---------- Schluss ---------- */

.schluss { text-align: center; }
.welt-werkstatt .schluss .augenbraue { justify-content: center; }
.welt-werkstatt .schluss .augenbraue::after { content: ""; flex: 0 0 28px; height: 2px; margin-top: .7em; background: var(--akzent); }
.schluss h2.titel { font-size: 36px; }
.welt-werkstatt .schluss h2.titel { font-size: 36px; }
.schluss .knopf { margin-top: 24px; }
.schluss .klein { margin-top: 12px; }

/* ---------- Fuß ---------- */

.fuss { padding: 44px 0 36px; background: var(--tief); color: var(--tief-text); }
.fuss a { color: var(--tief-text); }
.fuss a:hover { color: var(--akzent-hell); }
.fuss .logo { font-size: 30px; }
.welt-werkstatt .fuss .logo { font-size: 20px; }
.fuss .kontakt { margin-top: 6px; font-size: 14px; color: var(--tief-text2); }
.fuss .zur-anderen { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 15px; font-weight: 600; }
.fuss nav { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--tief-linie); display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 14px; }
.fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; text-decoration: none; }
.fuss nav:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* „Vertrag widerrufen“ muss hervorgehoben sein (§ 356a BGB): dünner Rahmen, sonst so klein wie die übrigen Links */
.fuss nav a.widerruf, .start-fuss nav a.widerruf { min-height: 34px; margin-block: 5px; padding: 0 12px; border: 1px solid currentColor; border-radius: var(--rund); }
.fuss .klein { margin-top: 14px; color: var(--tief-text2); }

/* ---------- Feste Kaufleiste am Handy ---------- */

.kaufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--papier); border-top: 1px solid var(--linie); box-shadow: 0 -10px 24px rgba(0, 0, 0, .10);
  transform: translateY(110%); transition: transform .25s ease;
}
.kaufleiste.ist-sichtbar { transform: none; }
.kaufleiste .knopf { display: flex; width: 100%; min-height: 48px; }
.kaufleiste p { margin-top: 4px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--text3); }
@media (prefers-reduced-motion: reduce) { .kaufleiste { transition: none; } }
/* Handy quer: wenig Höhe, deshalb ohne die kleine Zeile und mit weniger Rand */
@media (max-height: 500px) {
  .kaufleiste { padding-top: 6px; }
  .kaufleiste p { display: none; }
}

/* ---------- Startseite ---------- */

.start { min-height: 100vh; min-height: 100svh; }
.start .rahmen { max-width: 980px; padding-top: 28px; padding-bottom: 20px; }
.start header { text-align: center; }
.start .logo { justify-content: center; font-size: 26px; }
.start h1 { margin: 18px auto 0; max-width: 680px; font-family: var(--titel-schrift); font-weight: 500; font-size: 34px; line-height: 1.06; }
.start h1 em { font-style: italic; color: var(--akzent); }
.start .einleitung { max-width: 560px; margin: 14px auto 0; font-size: 15px; line-height: 1.55; }
.start .gruende { justify-content: center; margin-top: 16px; }
.start h2 { margin-top: 26px; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.wahl { max-width: 820px; margin: 14px auto 0; display: flex; gap: 10px; align-items: stretch; }
.wahl a {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; text-decoration: none;
}
.wahl img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.wahl .wahl__text { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.wahl .wahl__name { font-size: clamp(28px, 9vw, 38px); line-height: .9; overflow-wrap: anywhere; }
.wahl .wahl__bereiche { font-size: 13px; line-height: 1.4; }
.wahl .wahl__knopf {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  border-radius: 12px; font-size: 15px; font-weight: 700;
}
.wahl--frau { background: #FBF8F2; border: 1px solid #DED5C4; color: #1B2340; }
.wahl--frau .wahl__name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; }
.wahl--frau .wahl__bereiche { color: #4E556E; }
.wahl--frau .wahl__knopf { background: #A0552F; color: #FFFFFF; }
.wahl--mann { background: linear-gradient(160deg, #1A1D21 0%, #2A323C 55%, #3D5266 100%); border: 1px solid #1A1D21; color: #FFFFFF; }
.wahl--mann .wahl__name { font-family: 'Inter Tight', Arial, sans-serif; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.wahl--mann .wahl__bereiche { color: #D3DAE0; }
.wahl--mann .wahl__knopf { background: #FFFFFF; color: #121417; }
.wahl a:hover { color: inherit; }
.wahl a:hover .wahl__knopf { filter: brightness(1.06); }
/* Startseite: Zeitvergleich unter Frau und Mann, mit Ersparnis und drei Häkchen */
.startzeit { max-width: 820px; margin: 18px auto 0; padding: 18px 16px 16px; background: var(--papier); border: 1px solid var(--linie); border-radius: 16px; }
.startzeit__kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.startzeit__zeile { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.startzeit__zeile + .startzeit__zeile { margin-top: 10px; }
.startzeit__name { font-weight: 600; }
.startzeit__balken { height: 12px; border-radius: 6px; background: #CFC8BC; }
.startzeit__balken--kurz { width: 8%; min-width: 14px; background: var(--akzent); }
.startzeit__wert { font-size: 13px; color: var(--text2); white-space: nowrap; }
.startzeit__wert b { font-size: 15px; color: var(--akzent); }
.startzeit__spar { margin-top: 14px; padding: 9px 12px; border-radius: 10px; background: rgba(160, 85, 47, .1); color: #8A4626; font-size: 14px; font-weight: 700; }
.startzeit__haken { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.startzeit__haken li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.startzeit__haken svg { flex: none; margin-top: 1px; color: var(--akzent); }
.startzeit__fuss { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text2); }

/* Startseite: Video ganz unten, am Computer mittig, am Handy so breit wie der Inhalt (Joshi, 27.10.2026) */
.startvideo { max-width: 520px; margin: 18px auto 0; }
.startvideo__rahmen { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--linie); border-radius: 16px; background: #F6F1E7; }
.startvideo__film { display: block; width: 100%; height: 100%; object-fit: cover; }
.startvideo__knoepfe { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.startvideo__knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(27, 35, 64, .16); border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1B2340; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.startvideo__knopf:hover { background: #FFFFFF; }
.startvideo__pause { padding: 0; }
.startvideo__hinweis { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text2); text-align: center; }
.start-fuss { margin-top: 24px; text-align: center; }
.start-fuss p { font-size: 14px; font-weight: 600; }
.start-fuss nav { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; font-size: 13px; }
.start-fuss nav a { display: inline-flex; align-items: center; min-height: 44px; }
.start-fuss .klein { margin-top: 8px; }

/* ---------- Rechtliche Seiten und Formulare ---------- */

.schlicht { padding: 40px 0 64px; }
.schlicht .rahmen { max-width: 760px; }
.schlicht h1 { font-family: var(--titel-schrift); font-weight: 500; font-size: clamp(28px, 8.4vw, 40px); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; }
.schlicht h2 { margin-top: 28px; font-family: var(--titel-schrift); font-weight: 600; font-size: 26px; line-height: 1.2; }
.schlicht p, .schlicht li { margin-top: 12px; color: var(--text2); }
.schlicht ul { padding-left: 20px; list-style: disc; }
.platzhalter { margin-top: 20px; padding: 16px 18px; border: 1px dashed var(--akzent); border-radius: 8px; background: var(--papier); color: var(--text); }
.formular { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .feld legend { font-weight: 700; color: var(--text); }
.feld .hilfe { margin: 0; font-size: 14px; color: var(--text2); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="date"], .feld textarea, .feld select {
  min-height: 48px; padding: 10px 12px; border: 1px solid var(--text2); border-radius: 8px; background: #FFFFFF; color: #1E2230; font: inherit;
}
.feld textarea { min-height: 96px; resize: vertical; }
.feld fieldset { margin: 0; padding: 0; border: 0; }
.feld .wahl-zeile { font-weight: 400; display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; color: var(--text); }
.feld .wahl-zeile input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); }
.bestaetigung { margin-top: 24px; padding: 20px; border: 1px solid var(--akzent); border-radius: 8px; background: var(--papier); overflow-wrap: anywhere; scroll-margin-top: 16px; }
.bestaetigung h2 { margin-top: 0; }
.bestaetigung .knopf { margin-top: 20px; }
.feld [aria-invalid="true"] { border-color: #9B2C1F; box-shadow: 0 0 0 1px #9B2C1F; }
.feld .fehler { margin: 0; font-size: 14px; font-weight: 600; color: #9B2C1F; }
@media print {
  .kopf, .sprung, .bestaetigung .knopf, .fuss { display: none; }
  .bestaetigung { border: 0; padding: 0; }
}

/* ---------- Computer-Ansicht ---------- */

/* Tablet hochkant: Beispiel-Posts nicht bildschirmbreit */
@media (min-width: 600px) and (max-width: 899px) {
  .feed .post { max-width: 520px; margin-left: auto; margin-right: auto; border: 1px solid var(--ig-linie); }
}
/* Handy: das Vorher-Nachher-Bild rückt nach oben, die vier Stichwörter stehen darunter */
@media (max-width: 899px) {
  .hero { padding-top: 28px; }
  .hero .rahmen { display: flex; flex-direction: column; }
  .hero .rahmen > div:first-child { display: contents; }
  .hero-beispiel { order: 1; margin-top: 22px; }
  .hero .gruende { order: 2; margin-top: 20px; }
}
/* Sehr schmale Handys: im Kopf nur „Slidewerk“, damit nichts seitlich scrollt */
@media (max-width: 359px) {
  .welt-werkstatt .kopf .logo-zusatz { display: none; }
}
/* Handy und Tablet: Fokus nicht unter der Kaufleiste, Foto nicht am Titel */
@media (max-width: 899px) {
  html { scroll-padding-bottom: 100px; }
  .foto-rahmen { margin-bottom: 28px; }
  .welt-werkstatt .foto-rahmen { margin-bottom: 38px; }
  .zeitkarte__bild { min-height: 240px; }
}

@media (min-width: 900px) {
  :root { --rand-l: max(32px, env(safe-area-inset-left, 0px)); --rand-r: max(32px, env(safe-area-inset-right, 0px)); }
  .abschnitt { padding: 104px 0; }
  .augenbraue { font-size: 12px; letter-spacing: .18em; }
  .welt-werkstatt .augenbraue { font-size: 12px; }
  h1.titel { font-size: 60px; }
  .welt-werkstatt h1.titel { font-size: 60px; }
  h2.titel { font-size: 52px; line-height: 1.05; }
  .welt-werkstatt h2.titel { font-size: 48px; }
  h3.titel { font-size: 28px; }
  .einleitung { font-size: 17px; }

  .kopf .rahmen { padding-top: 16px; padding-bottom: 16px; }
  .kopf nav { display: flex; align-items: center; gap: 4px 28px; font-size: 15px; font-weight: 600; }
  .welt-werkstatt .kopf nav { font-family: var(--titel-schrift); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
  .kopf nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
  .kopf .nur-handy { display: none; }
  .logo { font-size: 30px; }
  .welt-werkstatt .logo { font-size: 20px; }

  .hero { padding: 88px 0 104px; }
  .hero .rahmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .hero .einleitung { font-size: 19px; max-width: 480px; }
  .welt-werkstatt .knopf--breit { font-size: 16px; letter-spacing: .06em; }
  .hero .knopf--breit { display: inline-flex; width: auto; padding: 0 30px; }
  .hero .knopf + .klein { text-align: left; margin-left: 4px; }
  .hero-beispiel { margin-top: 0; }
  .hero-beispiel .post { width: 340px; margin: 6px auto 0; overflow: hidden; border: 10px solid #121418; border-radius: 44px; padding-top: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .18); }
  .welt-werkstatt .hero-beispiel .post { border-color: #0B0C0E; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
  .hero-beispiel .notiz { width: max-content; margin: 0 auto; padding-right: 0; transform: translateX(150px); }

  .filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .filter button { padding: 6px 22px; }
  .feed { margin-top: 36px; }
  .feed .post { max-width: 440px; margin: 0 auto; border: 1px solid var(--ig-linie); border-radius: 6px; overflow: hidden; }
  .zeitvergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
  .zeitkarte__bild { min-height: 380px; }
  .editor { max-width: 420px; }
  .editor__mitte { height: 230px; grid-template-columns: 60px minmax(0, 1fr) 38px; }
  .editor__folie { width: 150px; }
  .handy { width: 196px; }
  .zeitkarte figcaption { padding: 24px 28px 28px; }
  .zeitkarte__zeit { font-size: 40px; }
  .zeit__ersparnis { margin-top: 48px; font-size: 44px; }

  .geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
  .geteilt--umgekehrt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .geteilt .foto-rahmen { margin-top: 0; }
  .foto-rahmen img { aspect-ratio: 4 / 5; }
  .schritte__nr { flex-basis: 44px; font-size: 60px; }
  .schritte h3.titel { font-size: 28px; }
  .schritte p { font-size: 17px; }

  .liste.liste--raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .welt-werkstatt .liste.liste--raster { column-gap: 1px; }
  .liste li { padding: 28px 0; }
  .welt-werkstatt .liste li { padding: 28px; }
  .liste__titel { font-size: 24px; }

  .preis-bild img { aspect-ratio: 4 / 5; height: 100%; }
  .preis-bild { height: 100%; }
  .preis-kasten { margin-top: 0; padding: 44px 48px 40px; }
  .welt-werkstatt .preis-kasten { margin-top: 0; }
  .preis-kasten .titel { font-size: 60px; }
  .welt-werkstatt .preis-kasten .titel { font-size: 52px; }

  .fragen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; }
  .fragen-raster .fragen { margin-top: 0; }
  .fragen summary { font-size: 26px; padding: 24px 0; }
  .fragen details p { font-size: 17px; padding-right: 56px; }

  .schluss h2.titel { font-size: 56px; }
  .welt-werkstatt .schluss h2.titel { font-size: 52px; }
  .schluss .knopf { display: inline-flex; width: auto; padding: 0 34px; }

  .fuss { padding: 64px 0 48px; }
  .fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }

  .kaufleiste { display: none; }

  .start .rahmen { padding-top: 56px; }
  .start h1 { font-size: 60px; }
  .start .einleitung { font-size: 18px; }
  .wahl { gap: 24px; }
  .startzeit { margin-top: 24px; padding: 24px 28px 22px; }
  .startzeit__zeile { grid-template-columns: 130px 1fr auto; font-size: 15px; }
  .wahl .wahl__text { padding: 24px; }
  .wahl .wahl__name { font-size: 60px; }
  .wahl .wahl__bereiche { font-size: 16px; }

  .schlicht { padding: 72px 0 96px; }
  .schlicht h1 { font-size: 52px; }
}