/* rondre — rondre.com (01.11.2026). Aufbau und Klassen nach dem scanta-Stylesheet
   (Tokens, Container-Stufen, .eyebrow, Modal nach .lang-modal, .legal-page).
   Farben aus der früheren rondre-iOS-App: Schwarz, Kartengrau #1C1C1E, Grau #8E8E93. */

:root{
  --bg:#000000;
  --ink:#ffffff;
  --muted:#8e8e93;
  --text:#c7c7cc;
  --surface:#1c1c1e;
  --surface-2:#2c2c2e;
  --line:#38383a;
  --tile:#0a0a0b;
  --tile-line:#151517;
  --radius:30px;
  --radius-sm:18px;
  --sp-section:clamp(2.75rem,4.5vw,3.5rem);
  --maxw:1320px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.65,0,.35,1);
  --ease-calm:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html{background:var(--bg);color-scheme:dark}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  letter-spacing:-.01em;line-height:1.5;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;overflow-x:hidden;position:relative;
}
.site-main{flex:1 0 auto}
img,svg{max-width:100%;display:block}

.container{width:100%;margin:0 auto;padding:0 16px}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}
@media (min-width:1400px){.container{max-width:1320px}}

h1,h2,h3{letter-spacing:-.03em;font-weight:700;line-height:1.08}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{color:var(--muted);font-weight:500;letter-spacing:.28em;font-size:.78rem;text-transform:uppercase}

/* ===== Startseite (01.11.2026, Andreas' Wahl: Variante A „Signatur“ + Icon-Raster aus D ohne grüne Punkte,
   Weiteres/Inspirationen/inspiration-landingpage.html). Jede Animation läuft genau einmal beim Laden, kein Loop. */
.hero{position:relative;overflow:hidden;overflow:clip;isolation:isolate;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;padding:96px 16px 120px}

/* Icon-Raster: leere App-Icons über die ganze Fläche (Kacheln baut main.js passend zur Breite).
   Ohne Animation (Andreas, 01.11.2026): das Raster steht vom ersten Bild an so da wie am Ende. */
.hero__grid{position:absolute;inset:-2vw;z-index:-2;display:grid;gap:var(--gap,20px);
  grid-template-columns:repeat(auto-fill,var(--s,90px));grid-auto-rows:var(--s,90px);justify-content:center;align-content:center}
.hero__tile{border-radius:23%;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tile-line)}
/* Schwarzer Kern hinter Logo und Text, Raster läuft nach außen weich aus */
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 42% at 50% 50%,#000 38%,rgba(0,0,0,.86) 58%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 72%,rgba(0,0,0,.85) 100%)}

.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__logo{width:clamp(240px,40vw,640px);line-height:0}
.hero__mark{width:100%;height:auto;overflow:visible}
/* Logo wird geschrieben (01.11.2026, Andreas' Wahl: Federkiel aus inspiration-schreibwerkzeug.html).
   Das Logo liegt hinter einer Maske aus Federzügen entlang der Mittellinie; main.js zieht sie nacheinander auf
   (ruhiges Hand-Tempo, kurzes Absetzen) und führt den Federkiel mit. Mit JS sind die Züge anfangs verborgen;
   als Sicherung werden sie nach 8 s auf jeden Fall sichtbar. Ohne JS steht das Logo sofort da. */
.hero__mark .logo-fill{fill:#fff}
:root:not(.no-js) .hero__mark .logo-pen path{visibility:hidden;animation:penFallback 0s 8s forwards}
@keyframes penFallback{to{visibility:visible;stroke-dashoffset:0}}
.hero__mark .logo-quill{pointer-events:none}
.hero__rule{display:block;width:clamp(140px,22vw,320px);height:1px;margin:clamp(1.6rem,4.5vh,2.6rem) 0 clamp(1.3rem,3.4vh,2rem);
  background:linear-gradient(90deg,transparent,var(--line),transparent);transform:scaleX(0)}
.is-written .hero__rule{animation:ruleIn 1.3s var(--ease-soft) .1s forwards}
@keyframes ruleIn{to{transform:scaleX(1)}}
/* Texte wie Variante B: Eyebrow-Buchstaben rücken aus der Unschärfe zusammen, der Leitsatz wird scharf */
.hero__eyebrow{opacity:0;letter-spacing:.5em;filter:blur(4px)}
.is-written .hero__eyebrow{animation:eyebrowIn 1.6s var(--ease-calm) .35s forwards}
@keyframes eyebrowIn{to{opacity:1;letter-spacing:.28em;filter:blur(0)}}
.hero__lead{margin-top:.55rem;font-size:clamp(1.15rem,.9rem + 1.1vw,1.6rem);font-weight:500;color:#d1d1d6;letter-spacing:-.02em;
  opacity:0;transform:translateY(8px);filter:blur(6px)}
.is-written .hero__lead{animation:leadIn 1.4s var(--ease-calm) .6s forwards}
@keyframes leadIn{to{opacity:1;transform:none;filter:blur(0)}}

@media (orientation:portrait){
  .hero__logo{width:min(76vw,560px)}
  .hero__rule{width:min(50vw,320px)}
  .hero__veil{background:
    radial-gradient(ellipse 72% 30% at 50% 50%,#000 40%,rgba(0,0,0,.86) 62%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 74%,rgba(0,0,0,.85) 100%)}
}

/* ===== Footer (01.11.2026, Andreas): klein, nur Impressum · Datenschutz · Sprachwechsel.
   Auf der Startseite liegt er unten über dem Hero und blendet nach den Texten ein. */
.site-foot{position:relative;z-index:5;padding:22px 16px calc(22px + env(safe-area-inset-bottom));text-align:center}
.site-foot__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 0;font-size:.82rem;color:var(--muted)}
.site-foot__links a{padding:.35rem .2rem;transition:color .2s}
.site-foot__links a:hover{color:#fff}
.site-foot__links a,.site-foot__links a:focus,.site-foot__links a:focus-visible{outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent}   /* kein Rahmen nach Klick oder Schließen des Modals (Andreas, 01.11.) */
.site-foot__links a+a::before{content:"·";display:inline-block;margin:0 .75rem 0 .55rem;opacity:.45;color:var(--muted)}
/* Nur Deckkraft, keine Bewegung (01.11.2026): mit translateY ragte der Footer beim Einblenden kurz über das
   Fensterende, Safari zeigte für 1–2 s eine Scrollleiste. */
.page-index .site-foot{position:absolute;left:0;right:0;bottom:0;opacity:0}
.page-index.is-written .site-foot{animation:fadeIn 1.2s ease 1.2s forwards}
/* Ohne JS gibt es kein is-written: Texte und Footer stehen sofort da */
.no-js .hero__rule{transform:none}
.no-js .hero__eyebrow,.no-js .hero__lead,.no-js .page-index .site-foot{opacity:1;filter:none;transform:none}
.no-js .hero__eyebrow{letter-spacing:.28em}
@keyframes fadeIn{to{opacity:1}}

/* ===== Rechts-Modal (01.11.2026): Muster wie das scanta-Sprachmodal (.lang-modal), dunkel.
   Desktop mittig mit weichem Einblenden, Handy als Sheet von unten mit Griff (nach unten ziehen schließt). */
.legal-modal{position:fixed;inset:0;z-index:1100}
.legal-modal[hidden]{display:none}
.legal-modal__back{position:absolute;inset:0;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:modalFade .25s ease both}
.legal-modal__card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(720px,92vw);max-height:82vh;background:var(--surface);border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;flex-direction:column;overflow:hidden;animation:modalPop .32s var(--ease-out) both}
.legal-modal__grip{display:none}
.legal-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.35rem 1rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.07)}
.legal-modal__title{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.legal-modal__updated{margin-top:.15rem;font-size:.82rem;color:var(--muted)}
.legal-modal__close{appearance:none;border:0;background:rgba(255,255,255,.08);border-radius:999px;
  width:34px;height:34px;cursor:pointer;display:grid;place-items:center;color:#fff;flex:none;transition:background-color .2s}
.legal-modal__close:hover{background:rgba(255,255,255,.16)}
.legal-modal__close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.legal-modal__body{overflow-y:auto;padding:.4rem 1.6rem 2.4rem;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;outline:none}
.legal-modal__card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(28,28,30,0),var(--surface))}
.legal-modal.is-closing .legal-modal__back{animation:modalFade .2s ease reverse both}
.legal-modal.is-closing .legal-modal__card{animation:modalPopOut .2s ease both}
body.legal-modal-open{overflow:hidden}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes modalPopOut{to{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
@media (max-width:640px){
  /* Sheet von unten wie bei scanta: `svh` ist die sichtbare Höhe mit Safaris Leisten, die vh-Zeile bleibt als Rückfall davor. */
  .legal-modal__card{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;
    max-height:90vh;max-height:88svh;border-radius:22px 22px 0 0;
    box-shadow:0 -18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);animation:sheetUp .34s var(--ease-out) both}
  .legal-modal__grip{display:block;width:38px;height:5px;border-radius:5px;background:rgba(255,255,255,.22);margin:8px auto 0;flex:none}
  .legal-modal__head{padding:.8rem 1rem .85rem 1.25rem;touch-action:none}
  .legal-modal__body{padding:.2rem 1.25rem calc(2rem + env(safe-area-inset-bottom))}
  .legal-modal.is-closing .legal-modal__card{animation:sheetDown .22s ease both}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheetDown{from{transform:translateY(var(--drag,0px))}to{transform:translateY(100%)}}

/* ===== Rechtstexte: eigene Seiten (/imprint, /privacy) und Inhalt des Modals. Klassen wie bei scanta, dunkel. */
.section.legal-page{padding:clamp(2rem,6vw,4rem) 0 var(--sp-section)}
.legal-page__home{display:inline-block;width:110px;margin-bottom:clamp(2rem,5vw,3.2rem)}
.legal-page__logo{width:100%;height:auto;fill:#fff}
.legal-page__inner{max-width:760px}
.legal-page h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.4rem}
.legal-page__updated{color:var(--muted);font-size:.95rem;margin:0 0 2.2rem}
.legal-page__intro{font-size:1.02rem;margin:1.2rem 0 .4rem}
.legal-page h2{font-size:1.2rem;margin:2rem 0 .8rem;color:#fff}
.legal-page h3{font-size:1.02rem;font-weight:700;margin:1.5rem 0 .55rem;color:#fff}
.legal-page p{margin-bottom:1rem;line-height:1.7;color:var(--text)}
.legal-page ul{margin:.4rem 0 1.1rem;padding-left:1.3rem}
.legal-page li{margin-bottom:.5rem;line-height:1.6;color:var(--text)}
.legal-page strong{font-weight:600;color:#fff}
.legal-page a{color:#fff;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;overflow-wrap:break-word}
.legal-page a:hover{text-decoration-style:solid}
.legal-modal__body h2:first-child{margin-top:1.4rem}

/* ===== Schrift (Inter, selbst gehostet wie bei scanta) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2")}

/* ===== Weniger Bewegung: alles sofort im Endzustand */
@media (prefers-reduced-motion:reduce){
  .hero__rule,.hero__eyebrow,.hero__lead,.page-index .site-foot,
  .legal-modal__back,.legal-modal__card{animation:none!important;opacity:1}
  .hero__rule,.hero__lead{transform:none}
  .hero__eyebrow,.hero__lead{filter:none}
  .hero__eyebrow{letter-spacing:.28em}
  :root:not(.no-js) .hero__mark .logo-pen path{visibility:visible;animation:none}
  .hero__mark .logo-quill{display:none}
}