/* ============================================================
   PICVELA · Website v2 ("Atelier")
   Hell, editorial, ruhig. Nach den freigegebenen Mockups.
   Serife fuer Display, Sora fuer Text und UI, ein Akzent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Flaechen */
  --paper:   #FBF8F4;   /* Seitengrund */
  --blush:   #FAEDE4;   /* zweites Feld, warme Baender */
  --card:    #FFFFFF;   /* Karten, Panels */
  --sand:    #F4EDE4;   /* dritte, ruhige Flaeche */
  /* Ausklang der Seite. Drei Stufen, damit die Wellen sichtbar werden,
     ohne dass irgendwo eine harte Kante entsteht: hinten fast noch Blush,
     vorne der Beginn des Verlaufs, unten der tiefste Ton. */
  --fuss-hinten: #F5EADE;
  --fuss-start:  #EFE5D6;
  --fuss-ende:   #E4DACA;

  /* Schriftfarben */
  --ink:     #1E1A17;   /* Headlines */
  --body:    #5C554E;   /* Flie0text, ~6.4:1 */
  --muted:   #8A827A;   /* nur Meta und Beschriftungen */

  /* Linien */
  --line:    #EDE5DC;
  --line-2:  #DFD5C9;

  /* Marke */
  --accent:      #E07820;  /* Vela-Orange, Flaechen und CTA */
  --accent-d:    #C8631B;  /* Hover */
  --accent-ink:  #A8551A;  /* kleine orange Schrift, ~5:1 */
  --accent-soft: #FBEEE0;  /* zarte orange Flaeche */
  --success:     #3E8E6E;

  /* Schrift */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Skala */
  /* Deckel bei 3.9rem statt 4.2: bei 4.2 passt "Bilder, die ankommen."
     nicht mehr in eine Zeile (666 von 624 px verfuegbarer Breite). */
  --t-display: clamp(2.35rem, 1.35rem + 3.4vw, 3.9rem);
  /* Wellenband der Fusszeile: zwei versetzte Lagen. Die Kaemme sitzen
     bewusst ungleich weit auseinander, damit nichts symmetrisch wirkt. */
  --wave: clamp(30px, 3.6vw, 56px);
  /* vordere Lage - Kaemme bei 160 / 545 / 945 von 1200 */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 60 14 100 6 160 6 C 230 6 250 25 340 25 C 445 25 460 8 545 8 C 640 8 660 26 750 26 C 855 26 870 7 945 7 C 1035 7 1115 16 1200 12 L1200 30 L0 30 Z' fill='%23000'/%3E%3C/svg%3E");
  /* hintere Lage - Kaemme versetzt bei 250 / 660 / 1060 */
  --wave-mask-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C 80 20 150 7 250 8 C 350 9 380 24 470 24 C 570 24 580 8 660 9 C 750 10 780 25 870 25 C 960 25 990 8 1060 8 C 1130 8 1170 16 1200 14 L1200 30 L0 30 Z' fill='%23000'/%3E%3C/svg%3E");
  --t-h2:      clamp(1.85rem, 1.3rem + 2vw, 2.9rem);
  --t-h3:      clamp(1.15rem, 1rem + .6vw, 1.45rem);
  --t-lead:    clamp(1rem, .96rem + .25vw, 1.12rem);

  /* Raster */
  --pad:  clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --sec:  clamp(64px, 7.5vw, 120px);

  /* Tiefe, warm getoent und weit gestreut */
  --sh-s: 0 1px 2px rgba(60,44,30,.04), 0 10px 24px -16px rgba(60,44,30,.16);
  --sh-m: 0 2px 6px rgba(60,44,30,.05), 0 26px 54px -26px rgba(60,44,30,.22);
  --sh-l: 0 4px 12px rgba(60,44,30,.05), 0 44px 80px -34px rgba(60,44,30,.26);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.4,0,.2,1);

  /* Ebenen */
  /* Hoehe der klebenden Kopfzeile. Muss zur tatsaechlich gerenderten
     Hoehe passen - der Titelbereich zieht sie von der Fensterhoehe ab. */
  --head-h: 80px;
  --z-head: 60;
  --z-flyout: 70;
  --z-boot: 200;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
/* Auf sehr breiten Schirmen darf die ganze Seite mitatmen, sonst wirkt
   der Inhalt in der Mitte verloren. */
@media(min-width:1680px){ :root{ --maxw:1480px; --pad:clamp(48px,4.4vw,88px) } }
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(44px,5vw,76px)}
.bg-blush{background:var(--blush)}
.bg-sand{background:var(--sand)}
.bg-card{background:var(--card)}

/* ---------- Typografie ---------- */
.display{font-family:var(--serif);font-size:var(--t-display);font-weight:500;line-height:1.08;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.h2{font-family:var(--serif);font-size:var(--t-h2);font-weight:500;line-height:1.14;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;line-height:1.25;color:var(--ink)}
.lead{font-size:var(--t-lead);color:var(--body);max-width:56ch;text-wrap:pretty}
.small{font-size:.88rem}
.fine{font-size:.82rem;color:var(--muted)}
.eyebrow{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;
}
strong,b{font-weight:600;color:var(--ink)}

/* ---------- Buttons und Links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  padding:.86em 1.5em;border-radius:var(--r-s);border:1.5px solid transparent;
  transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px rgba(224,120,32,.6)}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(224,120,32,.66)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--accent);color:var(--accent-ink);background:transparent}
.btn-ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:var(--card)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-lg{padding:1em 1.9em;font-size:1rem}
.btn-block{width:100%}

.tlink{
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;font-size:.95rem;color:var(--accent-ink);
  border-bottom:1.5px solid var(--accent);padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.tlink .chev{transition:transform .35s var(--ease);font-size:1.05em;line-height:1}
.tlink:hover{color:var(--accent-d)}
.tlink:hover .chev{transform:translateX(4px)}
.tlink--ink{color:var(--ink);border-color:var(--line-2)}
.tlink--ink:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ============================================================
   KOPFZEILE
   ============================================================ */
.head{
  position:sticky;top:0;z-index:var(--z-head);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:26px;max-width:var(--maxw);margin-inline:auto;padding:17px var(--pad)}
.head__logo{display:inline-flex;align-items:center;flex:0 0 auto}
.head__logo img{height:34px;width:auto}
.head__nav{display:flex;align-items:center;gap:clamp(26px,3.4vw,46px)}
.head__nav a{position:relative;font-size:.95rem;font-weight:500;color:var(--body);padding-block:6px;transition:color .2s}
.head__nav a:hover{color:var(--ink)}
.head__nav a.is-on{color:var(--ink);font-weight:600}
.head__nav a.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:var(--accent)}
/* Hervorgehobener Menuepunkt fuer die Demo: zarte orange Flaeche mit
   Punkt davor. Bleibt Text, kein zweiter Knopf neben "Zugang anfragen". */
.head__nav .nav-demo{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:600;
  transition:background .2s,color .2s;
}
.head__nav .nav-demo::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.head__nav .nav-demo:hover{background:var(--accent);color:#fff}
.head__nav .nav-demo:hover::before{background:#fff}
.head__nav .nav-demo.is-on::after{display:none}
.mnav .nav-demo{color:var(--accent-ink);font-weight:600}
.head__right{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.head__right .signin{font-size:.95rem;font-weight:500;color:var(--body)}
.head__right .signin:hover{color:var(--ink)}
.head__right .btn{padding:.66em 1.2em;font-size:.9rem}
.head__burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--ink)}
.head__burger svg{width:19px;height:19px}
@media(max-width:1000px){
  .head__nav{display:none}
  .head__right .signin{display:none}
  .head__burger{display:inline-flex}
}
@media(max-width:560px){
  .head__in{gap:10px;padding-inline:16px}
  .head__logo img{height:26px}
  .head__right{gap:10px}
  .head__right .btn{padding:.55em .8em;font-size:.82rem}
  .head__burger{width:38px;height:38px}
}
/* Mobil-Menue */
.mnav{display:none;border-bottom:1px solid var(--line);background:var(--paper)}
.mnav.is-open{display:block}
.mnav a{display:block;padding:14px var(--pad);border-top:1px solid var(--line);font-weight:500;color:var(--body)}
.mnav a:first-child{border-top:none}
.mnav a.is-on{color:var(--accent-ink);font-weight:600}

/* ============================================================
   LADE-INTRO: das Segel setzt sich  ("vela" = lat. Segel)
   ============================================================ */
.boot{
  position:fixed;inset:0;z-index:var(--z-boot);
  display:grid;place-items:center;background:var(--paper);
  animation:bootOut .7s var(--ease-io) 2.15s forwards;
}
.boot__in{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;text-align:center}
.boot__mark{width:clamp(76px,11vw,104px);height:auto;overflow:visible}
.boot__sq{transform-origin:32px 32px;animation:bootSq .62s var(--ease) both}
.boot__mast{
  stroke:#FAF7F2;stroke-width:3.4;stroke-linecap:round;fill:none;
  stroke-dasharray:28;stroke-dashoffset:28;
  animation:bootDraw .5s var(--ease-io) .34s forwards;
}
.boot__sail{transform-origin:20px 44px;animation:bootSail .72s var(--ease) .56s both}
.boot__water{
  stroke:#FAF7F2;stroke-width:3.5;stroke-linecap:round;fill:none;
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:bootDraw .5s var(--ease-io) .96s forwards;
}
.boot__word{
  font-family:var(--sans);font-weight:700;font-size:clamp(1.6rem,4vw,2.15rem);
  letter-spacing:-.02em;color:var(--ink);opacity:0;
  animation:bootRise .6s var(--ease) 1.12s forwards;
}
.boot__word i{font-style:normal;color:var(--accent)}
.boot__claim{
  font-family:var(--serif);font-style:italic;font-size:clamp(.95rem,2vw,1.1rem);
  color:var(--muted);opacity:0;animation:bootRise .6s var(--ease) 1.42s forwards;
}
@keyframes bootSq{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes bootDraw{to{stroke-dashoffset:0}}
@keyframes bootSail{from{opacity:0;transform:scaleX(.02)}to{opacity:1;transform:scaleX(1)}}
@keyframes bootRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes bootOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.boot.is-done{display:none}

/* ---------- Welle: nur der obere Rand der Fusszeile ----------
   Eine border-radius kann nur einen einzigen Bogen. Fuer mehrere Wellen
   sitzt ein Pseudo-Element oberhalb der Fusszeile, traegt die Farbe des
   Abschnitts darueber und wird von einer SVG-Maske geschnitten.
   Die uebrigen Baender bleiben bewusst gerade abgesetzt. */
.foot{position:relative;z-index:1}

/* Nur wenn Masken wirklich unterstuetzt werden - sonst waeren die
   Pseudo-Elemente durchgehende Farbbalken. */
@supports ((mask-size: 100% 100%) or (-webkit-mask-size: 100% 100%)){
  .foot::before,.foot::after{
    content:"";position:absolute;left:0;right:0;bottom:100%;pointer-events:none;
    -webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
    mask-size:100% 100%;mask-repeat:no-repeat;
  }
  /* hintere, hoehere Lage - nur eine Ahnung tiefer als das Band darueber */
  .foot::before{
    height:calc(var(--wave) * 1.55);background-color:var(--fuss-hinten);
    -webkit-mask-image:var(--wave-mask-b);mask-image:var(--wave-mask-b);
  }
  /* vordere Lage in der Startfarbe des Verlaufs, deckt die hintere teilweise */
  .foot::after{
    height:var(--wave);background-color:var(--fuss-start);
    -webkit-mask-image:var(--wave-mask);mask-image:var(--wave-mask);
  }
}

/* ---------- Hinweis: Seite geht beim ersten Start noch nicht live ---------- */
.draft{background:var(--ink);color:#fff;text-align:center;padding:11px var(--pad);font-size:.86rem;line-height:1.5}
.draft b{color:#fff;font-weight:600}
.draft a{color:var(--accent);font-weight:600;border-bottom:1px solid currentColor}

/* ---------- Seitenkopf der Unterseiten ---------- */
.pagehead{padding-block:clamp(52px,6vw,88px) clamp(30px,3.6vw,48px);border-bottom:1px solid var(--line)}
.pagehead .display{max-width:20ch}
.pagehead .lead{margin-top:16px}
.pagehead__cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:28px}
.pagehead--center{text-align:center}
.pagehead--center .display{margin-inline:auto}
.pagehead--center .lead{margin-inline:auto;text-align:center}
.pagehead--center .pagehead__cta{justify-content:center}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  /* stretch statt center: das Bild schliesst oben buendig mit der
     Menueleiste ab, kein Weissspalt. */
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.26fr);align-items:stretch;
  /* Fuellt genau den Rest des Fensters unter der Kopfzeile - kein Streifen
     des naechsten Abschnitts soll beim Laden schon zu sehen sein.
     min-height statt height: braucht der Inhalt mehr Platz, waechst der
     Bereich mit, statt beschnitten zu werden. dvh beruecksichtigt die
     ein- und ausfahrenden Leisten mobiler Browser, vh ist der Rueckfall. */
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100dvh - var(--head-h));
}
/* Die Hoehe traegt jetzt .hero, das Bild dehnt sich ueber align-items:stretch. */
.hero__figure{min-height:0;min-width:0}
.hero__figure img{
  width:100%;height:100%;object-fit:cover;object-position:center 24%;
  /* Asymmetrischer Schwung nach Mockup: breiteste Stelle bei 1/3 von
     unten. Obere 2/3 = langer Bogen (10% eingezogen), unteres Drittel
     laeuft kaum sichtbar ein (3%). */
  border-radius:0 10% 3% 0 / 0 67% 33% 0;
}
.hero__copy{
  --hero-pr:max(var(--pad), calc(50vw - (var(--maxw) / 2) + var(--pad)));
  position:relative;min-width:0;
  /* Zwei Zeilen: Text mittig, Filmstreifen schliesst unten buendig
     mit dem Titelbild ab. */
  display:grid;grid-template-rows:1fr auto;
  padding-top:clamp(44px,5vw,76px);padding-bottom:0;
  padding-left:clamp(20px,3vw,44px);
  padding-right:var(--hero-pr);
}
.hero__inner{position:relative;max-width:880px;align-self:center}
.hero__copy .display{margin-bottom:20px;text-wrap:balance}
/* Die Textspalte ist schmaler, als die Ueberschrift fuer zwei Zeilen
   braeuchte. text-wrap:balance greift ueber den harten Umbruch hinweg
   nicht, deshalb halten zusammengebundene Woerter das letzte Wort davon
   ab, allein in einer Zeile zu landen. Passt alles in eine Zeile, bleibt
   es in einer Zeile. */
.zusammen{white-space:nowrap}
.hero__copy .lead{max-width:44ch}
.hero__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}
.hero__note{margin-top:16px;font-size:.82rem;color:var(--muted)}
.hero__note b{color:var(--body);font-weight:600}
@media(max-width:940px){
  /* Einspaltig steht das Bild oben und der Text darunter - zusammen sind
     sie ohnehin hoeher als das Fenster, die Mindesthoehe waere sinnlos. */
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero__figure{height:clamp(300px,46vh,420px);order:-1}
  .hero__figure img{border-radius:0}
  .hero__copy{padding-inline:var(--pad);padding-top:34px}
  .hero__inner{max-width:none}
}

/* Filmstreifen unter dem Text */
.strip{
  --strip-bild:clamp(66px,9vw,102px);
  --strip-oben:27px;
  --strip-unten:13px;
  --strip-hoehe:calc(var(--strip-oben) + var(--strip-bild) + var(--strip-unten));
  --strip-tiefer:.25;
  position:relative;align-self:end;
  margin-top:clamp(28px,4vw,44px);margin-bottom:0;
  margin-right:calc(-1 * var(--hero-pr));
  background:#191512;border-radius:6px 0 0 6px;
  /* oben Luft fuer die Randbeschriftung */
  padding:var(--strip-oben) 0 var(--strip-unten);overflow:hidden;
}
.strip::before,.strip::after{
  content:"";position:absolute;left:0;right:0;height:8px;
  background-image:radial-gradient(circle, #FBF8F4 0 2.4px, transparent 2.6px);
  background-size:17px 8px;background-position:center;
}
.strip::before{top:2px}
.strip::after{bottom:2px}
/* Nur im zweispaltigen Titelbereich gibt es eine Bildkante, an der der
   Streifen abgeschnitten werden kann: er sitzt so tief, dass sein unteres
   Viertel darunter verschwindet und aus dem Bild herauslaeuft. Beschnitten
   wird von .hero (overflow:hidden).
   Kein transform - den ueberschreibt die Einblend-Animation (.up.in);
   deshalb ein negativer Aussenabstand, berechnet aus der eigenen Hoehe.
   Einspaltig (unter 941px) folgt darunter die Galerie-Karte, dort gibt es
   keine Kante und der Versatz wuerde nur die Karte hineinziehen. */
@media(min-width:941px){
  .strip{margin-bottom:calc(-1 * var(--strip-tiefer) * var(--strip-hoehe))}
}
/* Randbeschriftung wie die Herstellerangabe auf echtem Film: helle
   Lettern auf dem dunklen Traeger, also im Negativ. */
.strip__code{
  position:absolute;left:0;right:0;top:12px;
  padding-inline:9px;white-space:nowrap;overflow:hidden;pointer-events:none;
  font-size:9px;line-height:1;letter-spacing:.42em;font-weight:600;
  color:rgba(250,247,242,.46);
}
.strip__row{display:flex;gap:6px;padding-inline:6px}
.strip__row img{width:clamp(96px,13vw,152px);height:var(--strip-bild);object-fit:cover;flex:0 0 auto;filter:grayscale(1) contrast(1.06)}
.strip__row img:nth-child(2n){filter:none}

/* Schwebende Galerie-Karte */
.fcard{
  position:absolute;right:clamp(14px,2.2vw,42px);bottom:clamp(16px,3.2vw,48px);z-index:3;
  width:min(80vw,338px);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);padding:18px 20px 17px;box-shadow:var(--sh-l);
}
.fcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.fcard__top b{font-size:1.02rem;color:var(--ink);font-weight:500}
.fcard__top svg{width:19px;height:19px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.6}
.fcard__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}
.fcard__thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.fcard__foot{margin-top:14px;font-size:.88rem;color:var(--accent-ink);font-weight:500}
@media(max-width:640px){.fcard{position:static;width:100%;margin-top:18px;box-shadow:var(--sh-m)}}

/* ============================================================
   ABLAUF: vier Schritte
   ============================================================ */
.flow__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,2.08fr);gap:clamp(24px,4vw,60px);align-items:start}
.flow__grid > .h2{font-size:clamp(1.55rem, 1.15rem + 1.2vw, 2.1rem)}
.flow__steps{--flow-gap:clamp(16px,2.4vw,32px);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--flow-gap)}
.flow__step{position:relative}
.flow__head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.flow__step:not(:last-child) .flow__head::after{
  content:"";flex:1 1 auto;height:1px;background:var(--line-2);
  margin-right:calc(-1 * var(--flow-gap));
}
.flow__ic{
  width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--accent);flex:0 0 46px;
}
.flow__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.flow__n{font-size:.98rem;font-weight:500;color:var(--accent);letter-spacing:.02em;font-variant-numeric:tabular-nums;flex:0 0 auto}
.flow__step h3{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink)}
.flow__step p{font-size:.88rem;color:var(--body);margin-top:6px;line-height:1.6}
@media(max-width:900px){
  .flow__grid{grid-template-columns:1fr;gap:28px}
  .flow__steps{grid-template-columns:1fr 1fr;gap:26px}
  .flow__step::after{display:none}
}
@media(max-width:520px){.flow__steps{grid-template-columns:1fr}}

/* ============================================================
   SPLIT: Text und Bild nebeneinander
   ============================================================ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,80px);align-items:center}
.split--media-first .split__media{order:-1}
.split__copy{max-width:46ch}
.split__copy .h2{margin-bottom:16px}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:34px}
  .split--media-first .split__media{order:0}
}

/* Browser-Rahmen */
.browser{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-l)}
.browser__bar{display:flex;align-items:center;gap:7px;padding:13px 16px}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#E2DAD0}
.browser__body{padding:0 16px 16px}
.browser__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2px 2px 14px}
.browser__head .t{font-family:var(--serif);font-size:1.06rem;color:var(--ink);font-weight:500}
.browser__head .acts{display:flex;gap:13px;color:var(--muted)}
.browser__head .acts svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.browser__grid{display:grid;grid-template-columns:1.05fr 1.25fr 1.2fr;grid-template-rows:repeat(2,1fr);gap:6px;aspect-ratio:16/9.4}
.browser__grid img{width:100%;height:100%;object-fit:cover}
.browser__grid img:nth-child(1){grid-row:span 2}
.browser__grid img:nth-child(4){grid-row:span 2;grid-column:3}
.browser__foot{padding:12px 2px 2px;font-size:.78rem;color:var(--muted)}

/* ============================================================
   DEMO-BLOCK
   Traegt bewusst mehr Gewicht als eine normale Sektion: die Demo
   ist der einzige Weg ins Produkt, solange die Testphase laeuft.
   ============================================================ */
.demo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  background:var(--accent-soft);border:1px solid #F2DCC4;
  border-radius:var(--r-l);padding:clamp(28px,3.6vw,56px);
}
.demo__copy{min-width:0}
.demo__facts{list-style:none;margin-top:clamp(20px,2.4vw,30px);display:grid;gap:13px}
.demo__facts li{position:relative;padding-left:30px;font-size:.95rem;line-height:1.6}
.demo__facts li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(224,120,32,.16);
}
.demo__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}
.demo__media{min-width:0}
/* Echte Aufnahme aus dem Studio, leicht angeschnitten wie ein Fenster */
.demo__shot{border-radius:var(--r-m);overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh-l)}
.demo__shot img{width:100%;height:auto;display:block}
.demo__shot figcaption{padding:11px 14px;font-size:.8rem;color:var(--muted);
  border-top:1px solid var(--line);background:var(--card)}
/* Mehrere kleine Ansichten nebeneinander im Browserrahmen */
.demo__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.demo__shots img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:4px}
@media(max-width:900px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo__media{order:-1}
}
@media(max-width:560px){
  .demo__shots{grid-template-columns:repeat(2,1fr)}
  .demo__shots img:last-child{display:none}
}

/* Auswahl-Beleg */
.pickcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px;box-shadow:var(--sh-m);display:flex;align-items:center;gap:18px;max-width:420px;
}
.pickcard img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-s);flex:0 0 auto}
.pickcard__rows{flex:1;min-width:0}
.pickcard__row{display:flex;align-items:center;gap:11px;padding:9px 0}
.pickcard__row + .pickcard__row{border-top:1px solid var(--line)}
.pickcard__row svg{width:21px;height:21px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
.pickcard__row span{font-size:.95rem;color:var(--body)}
.pickcard__row b{color:var(--ink);font-weight:700}
@media(max-width:420px){.pickcard{flex-direction:column;align-items:flex-start}}

/* ============================================================
   DESIGN-GALERIE
   ============================================================ */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(18px,2.4vw,28px)}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-s);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.dcard:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.dcard__shot{aspect-ratio:16/10;overflow:hidden;background:var(--sand)}
.dcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.dcard__body{padding:15px 17px 18px}
.dcard__body .n{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink)}
.dcard__body .t{font-size:.8rem;color:var(--muted);margin-top:2px}
.dcard__body p{font-size:.88rem;color:var(--body);margin-top:9px;line-height:1.6}

/* ============================================================
   MERKMALE: dichte Liste mit Haarlinien
   ============================================================ */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,72px);border-top:1px solid var(--line-2)}
.feat{padding:22px 0;border-bottom:1px solid var(--line)}
.feat h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--ink);display:flex;align-items:baseline;gap:.5em}
.feat p{font-size:.92rem;color:var(--body);margin-top:7px;max-width:46ch;line-height:1.65}
@media(max-width:720px){.feats{grid-template-columns:1fr}}

/* ============================================================
   BAND mit Foto
   ============================================================ */
.band{position:relative;min-height:clamp(300px,44vw,480px);display:flex;align-items:flex-end;overflow:hidden}
.band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,12,.14),rgba(30,20,12,.06) 45%,rgba(30,20,12,.72))}
.band__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(30px,4vw,54px)}
.band__q{font-family:var(--serif);font-size:clamp(1.5rem, 1rem + 2.1vw, 2.6rem);font-weight:500;line-height:1.16;color:#fff;max-width:22ch;text-wrap:balance}
.band__by{margin-top:10px;font-size:.9rem;color:rgba(255,255,255,.82)}

/* ============================================================
   VERTRAUENS-LEISTE
   ============================================================ */
.trust{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);display:grid;grid-template-columns:repeat(4,1fr)}
.trust__i{display:flex;align-items:center;justify-content:center;gap:.6em;padding:17px 14px;font-size:.88rem;color:var(--body);text-align:center}
.trust__i + .trust__i{border-left:1px solid var(--line)}
.trust__i svg{width:18px;height:18px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.6;flex:0 0 auto}
@media(max-width:820px){
  .trust{grid-template-columns:1fr 1fr}
  .trust__i:nth-child(3){border-left:none}
  .trust__i:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:480px){
  .trust{grid-template-columns:1fr}
  .trust__i + .trust__i{border-left:none;border-top:1px solid var(--line)}
}

/* ============================================================
   PREISE
   ============================================================ */
.toggle{display:inline-flex;align-items:center;gap:14px;font-size:.95rem;color:var(--body)}
.toggle b{color:var(--ink);font-weight:600}
.toggle__sw{position:relative;width:54px;height:30px;border-radius:999px;background:var(--accent);border:none;cursor:pointer;transition:background-color .25s;flex:0 0 auto}
.toggle__sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}
.toggle__sw.is-year::after{transform:translateX(24px)}
.toggle__save{font-size:.85rem;font-weight:600;color:var(--accent-ink)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:stretch}
.plan{
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;box-shadow:var(--sh-s);
}
.plan--hero{border:2px solid var(--accent);box-shadow:var(--sh-m);position:relative}
.plan__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;
}
.plan__n{font-family:var(--serif);font-size:1.65rem;font-weight:600;color:var(--ink);text-align:center}
.plan__t{font-size:.88rem;color:var(--muted);text-align:center;margin-top:4px;min-height:2.6em}
.plan__p{display:flex;align-items:baseline;justify-content:center;gap:.3em;margin-top:16px}
.plan__amt{font-family:var(--sans);font-size:clamp(2.2rem,4vw,2.9rem);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.plan__cur{font-size:1.5rem;font-weight:600;color:var(--ink)}
.plan__per{font-size:.9rem;color:var(--muted)}
.plan__cycle{text-align:center;font-size:.82rem;color:var(--muted);margin-top:7px;min-height:1.3em}
.plan .btn{margin-top:22px}
.plan__list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.plan__list li{position:relative;padding-left:29px;font-size:.92rem;color:var(--body);line-height:1.55}
.plan__list svg{position:absolute;left:0;top:2px;width:19px;height:19px;color:var(--accent)}
.plan__list li.off{color:var(--muted)}
.plan__list li.off svg{color:var(--line-2)}
.plan__list b{color:var(--ink);font-weight:600}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* Vergleichstabelle */
.cmp{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.cmp th,.cmp td{padding:14px 16px;text-align:center;font-size:.9rem;border-bottom:1px solid var(--line)}
.cmp thead th{font-weight:600;color:var(--ink);font-size:.95rem;background:var(--sand)}
.cmp tbody th{text-align:left;font-weight:400;color:var(--body)}
.cmp td{color:var(--body)}
.cmp .col-pro{background:var(--accent-soft)}
.cmp thead .col-pro{color:var(--accent-ink);font-weight:700}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--accent);font-weight:700}
.cmp .no{color:var(--line-2)}
.cmp-scroll{overflow-x:auto}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(24px,4vw,56px);align-items:start}
.faq__list{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line);background:var(--card)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 20px;position:relative;
  font-weight:600;font-size:1rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:29px}
.faq p{padding:0 20px 20px;font-size:.94rem;color:var(--body);line-height:1.7;max-width:68ch}
@media(max-width:820px){.faq{grid-template-columns:1fr;gap:20px}}

/* ============================================================
   ABSCHLUSS
   ============================================================ */
.cta{text-align:center}
.cta .display{max-width:18ch;margin-inline:auto}
.cta .lead{margin:16px auto 0;text-align:center}
.cta__row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ============================================================
   FUSSZEILE
   ============================================================ */
/* Weicher Ausklang: der Verlauf beginnt schon in der Wellenkante und wird
   bis zum Seitenende durchgehend tiefer. Kein harter Strich. */
.foot{
  background:linear-gradient(180deg, var(--fuss-start) 0, var(--fuss-ende) 100%);
  border-top:none;
}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr .9fr;gap:clamp(22px,2.4vw,32px);padding-block:clamp(48px,6vw,72px)}
.foot__brand img{height:30px;margin-bottom:16px}
.foot__brand p{font-size:.9rem;max-width:32ch;line-height:1.7}
/* Der Ausklang unten ist dunkler als Sand, deshalb bekommen die kleinen
   grauen Zeilen hier einen tieferen Grauton (4.7:1 statt 2.9:1). */
.foot__by{margin-top:14px;font-size:.85rem;color:#685F56}
.foot__by b{color:var(--body);font-weight:600}
.foot h4{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin-bottom:15px;font-weight:600}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.foot ul a:hover{color:var(--accent-ink)}
.foot__low{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:20px;border-top:1px solid var(--line-2);font-size:.84rem;color:#685F56}
@media(max-width:1040px){.foot__top{grid-template-columns:1fr 1fr 1fr}.foot__brand{grid-column:1/-1}}
@media(max-width:680px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.foot__top{grid-template-columns:1fr}}

/* ============================================================
   BEWEGUNG
   ============================================================ */
.js-motion .up{opacity:0;transform:translateY(22px)}
.js-motion .up.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js-motion .up{opacity:1;transform:none;transition:none}
  .boot,.boot *{animation:none !important}
  .boot{animation:bootOut .3s linear 1s forwards !important}
  .strip__row img{filter:none}
  *{transition-duration:.01ms !important}
}

/* ============================================================
   RECHTSTEXTE
   Lange Fliesstexte: schmales Mass, klare Gliederung, offene
   Platzhalter unuebersehbar markiert.
   ============================================================ */
.rechtstext{max-width:74ch;font-size:.97rem}
.rechtstext h2{font-family:var(--serif);font-size:clamp(1.25rem,1.05rem + .7vw,1.55rem);font-weight:500;color:var(--ink);line-height:1.25;margin:clamp(34px,4vw,52px) 0 12px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.02rem;font-weight:600;color:var(--ink);margin:26px 0 8px}
.rechtstext h4{font-size:.95rem;font-weight:600;color:var(--ink);margin:20px 0 6px}
.rechtstext p{margin-bottom:14px}
.rechtstext ul,.rechtstext ol{margin:0 0 16px 22px;display:grid;gap:8px}
.rechtstext li{padding-left:4px}
.rechtstext li > ul,.rechtstext li > ol{margin-top:8px;margin-bottom:4px}
.rechtstext a{color:var(--accent-ink);border-bottom:1px solid var(--line-2);word-break:break-word}
.rechtstext a:hover{border-color:var(--accent)}
.rechtstext hr{border:none;border-top:1px solid var(--line);margin:clamp(30px,4vw,46px) 0}
.rechtstext blockquote{border-left:3px solid var(--line-2);padding-left:18px;margin:18px 0;color:var(--muted)}
.rechtstext code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--sand);padding:1px 5px;border-radius:4px}
/* Waagerecht scrollen statt die Seite zu sprengen */
.tabelle{overflow-x:auto;margin:0 0 20px}
.tabelle table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.tabelle th,.tabelle td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.tabelle th{background:var(--sand);color:var(--ink);font-weight:600}
.tabelle code{background:var(--card)}
/* Noch auszufuellende Stellen. Bewusst laut. */
.platzhalter{background:#FDE9C8;color:#7A4A05;padding:0 5px;border-radius:3px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.foot__links{display:flex;gap:18px;flex-wrap:wrap}
.foot__links a{color:inherit;border-bottom:1px solid transparent}
.foot__links a:hover{color:var(--accent-ink);border-color:var(--accent)}

/* ============================================================
   NOCH NICHT VERFUEGBAR
   Die Demo ist angekuendigt, aber noch nicht erreichbar. Statt
   den Hinweis zu verstecken, steht er schraeg als Aufkleber
   darueber - und die Schaltflaechen sind wirklich tot, nicht nur
   optisch (kein href, kein Tastaturfokus).
   ============================================================ */
.bald-huelle{position:relative;display:inline-flex}
.bald{
  position:absolute;top:-11px;right:-16px;z-index:2;
  transform:rotate(-9deg);transform-origin:center;
  background:var(--ink);color:var(--paper);
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;
  box-shadow:0 4px 12px -4px rgba(30,26,23,.5);
  pointer-events:none;white-space:nowrap;
}
/* Stillgelegte Schaltflaeche: sichtbar, aber ohne Funktion */
.aus{cursor:default;opacity:.5;filter:saturate(.55)}
.aus:hover{transform:none;box-shadow:none}
.btn.aus:hover{background:var(--accent);border-color:transparent}
/* Menuepunkt Demo: bleibt hervorgehoben, aber ohne Ziel */
.nav-demo.aus{opacity:.72}
/* Im Menue sitzt der Aufkleber oberhalb rechts, damit er das Wort
   "Demo" nicht verdeckt - er soll ergaenzen, nicht ersetzen. */
.bald-huelle:has(.nav-demo) .bald{top:-15px;right:-18px;font-size:.56rem;padding:2px 7px}
.head__nav .bald-huelle{margin-left:6px}
.mnav .bald-huelle{margin-left:0}
.foot__spalte .bald{position:static;transform:rotate(-6deg);display:inline-block;
  margin-left:8px;font-size:.58rem;padding:2px 7px}

/* Im Handy-Menue ist jeder Eintrag eine volle Zeile. Die Huelle muss
   dieses Layout uebernehmen, sonst haengt "Demo" ausserhalb des Rasters
   und der Aufkleber schwebt daneben. */
.mnav .bald-huelle{
  display:flex;align-items:center;gap:12px;
  padding:14px var(--pad);border-top:1px solid var(--line);width:100%;
}
.mnav .bald-huelle .bald{
  position:static;transform:rotate(-6deg);
  font-size:.56rem;padding:2px 7px;
}

/* Bei Textlinks steht der Aufkleber daneben statt darueber - sonst
   verdeckt er das letzte Wort. */
.bald-huelle:has(.tlink){align-items:center;gap:12px}
.bald-huelle:has(.tlink) .bald{position:static;transform:rotate(-6deg)}

/* Einzelne Studio-Ansicht im Browserrahmen */
.demo__einzel{width:100%;height:auto;border-radius:4px;display:block}