/* Tortendesign Viktoria Fink – gemeinsames Design-System (Editorial)
   Schrift: Bodoni Moda (Display) + Jost (Text & UI) */

:root{
  --paper:#F7F2EC;
  --paper-2:#EFE6DD;
  --blush:#EED6CF;
  --blush-2:#F4E5E0;
  --ink:#2A2220;
  --ink-2:#4A3F3A;
  --mute:#6F625B;
  --bronze:#8A6234;
  --bronze-l:#B48A55;
  --line:rgba(42,34,32,0.14);
  --line-b:rgba(138,98,52,0.35);
  --max:1680px;
  --gut:clamp(20px,4.2vw,80px);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --sans:'Jost','Futura','Century Gothic',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper)}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--blush);color:var(--ink)}

.vf{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.7;font-weight:350;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* Bodoni Moda mit fester optischer Größe: kräftigere Haarstriche, schärfer auf normalen Monitoren (Windows/ClearType) */
.vf{font-variation-settings:"opsz" 28}
.vf h1,.vf h2,.vf h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
.num,.cat-t,.dd-panel a,.flow-steps strong,.path strong,.feat strong,.hx-num,.ab-sig,.sig,.cat-desc p,.ph-cap em{font-variation-settings:"opsz" 18}
.vf h1{line-height:.96;letter-spacing:-0.025em}
.vf h2{line-height:1.02;letter-spacing:-0.02em}
.vf h3{line-height:1.12;letter-spacing:-0.01em}
.vf h1 em,.vf h2 em,.vf h3 em{font-style:italic;font-weight:400}
.vf p{margin:0;text-wrap:pretty}


.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:16px}

/* Raster */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.measure{max-width:34em}

/* Kleine Typo-Elemente */
.label{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--bronze)}
.label::before{content:'';width:32px;height:1px;background:currentColor;opacity:.7}
.label.plain::before{display:none}
.num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--bronze);line-height:1;font-variant-numeric:lining-nums}
.lead{font-size:clamp(18px,1.35vw,21px);line-height:1.65;color:var(--ink-2);font-weight:350}
.dot{width:4px;height:4px;border-radius:50%;background:var(--bronze);display:inline-block;flex:none}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 30px;border:1px solid transparent;border-radius:0;font-family:var(--sans);font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-decoration:none;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn .arr{display:inline-block;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--bronze);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:var(--blush);color:var(--ink)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.link{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-decoration:none;color:var(--ink);background:transparent;border:0;padding:0;cursor:pointer;font-family:var(--sans)}
.link::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.link:hover::after{transform:scaleX(0)}
.link .arr{transition:transform .5s var(--ease)}
.link:hover .arr{transform:translateX(5px)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* Header – zweizeilig, Logo mittig; blendet sich beim Runterscrollen aus und beim Hochscrollen ein (js/site.js) */
:root{--hdr-full:203px;--hdr-off:0px}
.vf{padding-top:var(--hdr-full)}
.vf.home{padding-top:0}
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;color:var(--ink);background:rgba(247,242,236,.94);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:transform .7s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.over:not(.is-mini){background:transparent;color:var(--paper);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.over:not(.is-mini)::before{content:'';position:absolute;inset:0 0 -60px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(24,18,16,.55),rgba(24,18,16,0))}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"l logo r" "nav nav nav";align-items:center;column-gap:24px}
.hdr-side{display:flex;align-items:center;gap:10px}
.hdr-l{grid-area:l;justify-self:start}
.hdr-r{grid-area:r;justify-self:end;gap:6px}
.hdr-act{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-decoration:none;color:inherit;transition:opacity .3s}
.hdr-act:hover{opacity:.7}
.hdr-act svg{flex:none}
.hdr-logo{grid-area:logo;display:block;margin:18px 0 4px;border-radius:50%;background:var(--paper);box-shadow:0 10px 30px -14px rgba(24,18,16,.5);transition:margin .5s var(--ease)}
.logo{display:block;width:116px;height:116px;transition:width .5s var(--ease),height .5s var(--ease)}
.nav{grid-area:nav;justify-self:center;display:flex;align-items:center;gap:44px}
.nav > a,.dd > a{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-decoration:none;color:inherit;padding:18px 0 22px}
.nav > a::after,.dd > a::after{content:'';position:absolute;left:0;right:0;bottom:15px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.nav > a:hover::after,.nav > a.on::after,.dd:hover > a::after,.dd > a.on::after{transform:scaleX(1)}
.dd{position:relative}
.dd > a svg{transition:transform .5s var(--ease)}
.dd:hover > a svg,.dd:focus-within > a svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% - 8px);left:50%;width:280px;margin-left:-140px;padding:12px 0;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px -30px rgba(24,18,16,.45);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible}
.dd-panel a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:11px 26px;font-family:var(--serif);font-size:20px;text-decoration:none;color:var(--ink);transition:background .3s,color .3s}
.dd-panel a small{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--bronze)}
.dd-panel a:hover{background:var(--blush-2)}
/* kompakte Variante nach dem Scrollen: eine Zeile */
.hdr.is-mini .hdr-in{grid-template-columns:1fr auto 1fr;grid-template-areas:"logo nav r"}
.hdr.is-mini .hdr-l{display:none}
.hdr.is-mini .hdr-logo{min-width:60px}
@media (max-width:1240px){
  .nav{gap:30px}
  .nav > a,.dd > a{font-size:12.5px;letter-spacing:.16em}
  .hdr.is-mini .hdr-r .hdr-act span{display:none}
}
.hdr.is-mini .hdr-logo{margin:10px 0;box-shadow:none;justify-self:start}
.hdr.is-mini .logo{width:60px;height:60px}
.hdr.is-mini .nav > a,.hdr.is-mini .dd > a{padding:28px 0}
.hdr.is-mini .nav > a::after,.hdr.is-mini .dd > a::after{bottom:22px}
.burger{display:none;position:relative;width:48px;height:48px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
.burger span{position:absolute;left:12px;right:12px;height:1px;background:currentColor;transition:transform .5s var(--ease),opacity .3s}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:28px}
.burger.is-open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.mnav{display:none}
.sticky-cta{display:none}

/* Seiteneinstieg (Unterseiten) */
.pg-head{max-width:860px;margin:0 auto;text-align:center;padding:clamp(56px,5vw,96px) 0 clamp(40px,4vw,64px)}
.pg-head h1{font-size:clamp(34px,3.6vw,60px);line-height:1.1;margin-bottom:20px}
.pg-head .lead{max-width:36em;margin:0 auto}

/* Rosen-Ornament mit Linien – kleiner Akzent über den Seitenüberschriften */
.orn{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--bronze-l);margin-bottom:26px}
.orn i{display:block;width:56px;height:1px;background:currentColor;opacity:.75}
.orn svg{flex:none}
.orn.start{justify-content:flex-start}

/* Lauftext-Band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;white-space:nowrap}
.band-track{display:inline-flex;gap:48px;animation:band 48s linear infinite;will-change:transform}
.band span{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.6vw,44px);line-height:1;color:var(--ink)}
.band i{font-style:normal;color:var(--bronze);font-size:.7em;align-self:center}
@keyframes band{to{transform:translateX(-50%)}}

/* Abschluss-CTA: echtes Foto, ruhige Typo */
.cta{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.cta::after{content:'';position:absolute;inset:0;background:rgba(36,28,25,.68)}
.cta .wrap{position:relative;z-index:1}
.cta-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:clamp(80px,8vw,140px) 0}
.cta h2{font-size:clamp(30px,2.9vw,48px);line-height:1.15;color:var(--paper)}
.cta-in > p{max-width:36em;color:rgba(247,242,236,.84)}
.cta .btn{margin-top:8px}
.cta-note{font-size:13.5px;color:rgba(247,242,236,.66)}

/* Footer */
.ftr{padding:clamp(40px,3.5vw,60px) 0 28px;border-top:1px solid var(--line)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px}
.ftr .logo-f{width:84px;height:84px;display:block}
.ftr-brand{display:flex;flex-direction:column;gap:14px}
.ftr-note{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,23px);color:var(--ink);line-height:1.25}
.ftr h3{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--bronze);margin:0 0 12px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;font-size:15.5px}
.ftr-adr{padding:6px 0;line-height:1.5}
.ftr ul a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:34px;transition:color .3s}
.ftr ul a:hover{color:var(--bronze)}
.ftr-bottom{margin-top:clamp(28px,3vw,44px);padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;letter-spacing:.08em;color:var(--mute)}
.ftr-credit a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-b);transition:color .3s,border-color .3s}
.ftr-credit a:hover{color:var(--bronze);border-color:var(--bronze)}

/* Rechtstexte (Impressum, Datenschutz) – gut lesbar auf allen Breiten */
.legal{padding:clamp(40px,4vw,64px) 0 clamp(80px,7vw,130px);border-top:1px solid var(--line)}
.legal-body{max-width:760px;margin:0 auto;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.legal-body h2{font-size:clamp(26px,2.2vw,34px);line-height:1.15;margin:clamp(56px,5vw,80px) 0 22px;padding-top:28px;border-top:1px solid var(--line-b);scroll-margin-top:calc(var(--hdr-off) + 120px)}
.legal-body h2:first-child{margin-top:0}
.legal-body h2 .num{font-size:.8em;margin-right:.35em}
.legal-body h3{font-size:clamp(21px,1.6vw,24px);margin:40px 0 12px}
.legal-body h2 + h3{margin-top:0}
.legal-body h4{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--ink);margin:26px 0 8px}
.legal-body p,.legal-body li{color:var(--ink-2);font-size:clamp(16px,1.1vw,17.5px);line-height:1.75}
.legal-body p + p{margin-top:14px}
.legal-body ul{margin:14px 0;padding-left:1.2em}
.legal-body li + li{margin-top:10px}
.legal-body li::marker{color:var(--bronze)}
.legal-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-l);text-underline-offset:3px;overflow-wrap:anywhere;transition:color .3s}
.legal-body a:hover{color:var(--bronze)}
.legal-body .caps{font-size:14.5px;line-height:1.7;letter-spacing:.01em}
.legal-src{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px!important;color:var(--mute)!important}
.legal-src a{color:inherit}
/* Impressum: Angaben als ruhiges Raster */
.imp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,64px);max-width:880px;margin:0 auto}
.imp-blk{padding:28px 0;border-top:1px solid var(--line-b)}
.imp-blk.full{grid-column:1/-1}
.imp-blk h2{font-family:var(--sans);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--bronze);margin:0 0 14px;line-height:1.5}
.imp-blk p{color:var(--ink-2);line-height:1.7}
.imp-blk p + p{margin-top:12px}
.imp-blk .big{font-family:var(--serif);font-size:clamp(24px,2vw,30px);line-height:1.25;color:var(--ink)}
.imp-blk dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;color:var(--ink-2)}
.imp-blk dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.imp-blk dd{margin:0}
.imp-blk a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-l);text-underline-offset:3px;overflow-wrap:anywhere}
.imp-blk a:hover{color:var(--bronze)}
.imp .legal-src{grid-column:1/-1}
/* Datenschutz: Inhaltsverzeichnis – Desktop seitlich mitlaufend, sonst als Block oben */
.legal-grid{display:grid;grid-template-columns:240px minmax(0,760px);gap:clamp(48px,6vw,110px);justify-content:center;align-items:start}
.toc{position:sticky;top:calc(var(--hdr-off) + 32px);transition:top .7s var(--ease)}
.toc h2{font-family:var(--sans);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--bronze);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.toc a{display:flex;gap:12px;align-items:baseline;min-height:44px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.35;text-decoration:none;color:var(--ink-2);transition:color .3s}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on .num{color:var(--bronze)}
.toc .num{font-size:17px;min-width:1.3em;color:var(--bronze-l)}
@media (max-width:1100px){
  .legal-grid{grid-template-columns:minmax(0,760px)}
  .toc{position:static;padding:22px 24px 10px;background:var(--blush-2);margin-bottom:48px}
  .toc ol{border-top:0}
  .toc li:last-child a{border-bottom:0}
}
/* Tablet & Handy: Bezeichnung über dem Wert, damit die lange E-Mail-Adresse in eine Zeile passt */
@media (max-width:900px){
  .imp-blk dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .imp-blk dd + dt{margin-top:12px}
  /* größere Tippfläche, ohne die Zeilenabstände zu verändern */
  .imp-blk dd a{display:inline-block;padding:10px 0;margin:-10px 0}
}
@media (max-width:760px){
  .imp{grid-template-columns:minmax(0,1fr)}
  .imp-blk{padding:24px 0}
  .legal-body h2{padding-top:22px}
  .toc{padding:18px 18px 6px;margin:0 calc(var(--gut) * -1) 40px;padding-left:var(--gut);padding-right:var(--gut)}
}

/* Bilder */
.ph{position:relative;overflow:hidden;background:var(--paper-2)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ph-cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.ph-cap em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink-2)}

/* Einblenden beim Scrollen (Klasse .in setzt js/site.js) */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}
/* Fotos: dezent – sanftes Einblenden mit leichtem Zoom */
.js .reveal-img{opacity:0;transition:opacity 1.4s var(--ease)}
.js .reveal-img img{transform:scale(1.04)}
.js .reveal-img.in{opacity:1}
.js .reveal-img.in img{transform:scale(1)}
@keyframes up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.hero-anim{animation:up 1.2s var(--ease) both}
.hero-anim.d1{animation-delay:.12s}.hero-anim.d2{animation-delay:.24s}.hero-anim.d3{animation-delay:.36s}
@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .reveal-img,.js .reveal-img img,.hero-anim{opacity:1;transform:none;clip-path:none;animation:none;transition:none}
  .band-track{animation:none}
  html{scroll-behavior:auto}
}

/* Tablet */
@media (max-width:1100px){
  .nav{gap:34px}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--hdr-full:85px}
  .hdr-in,.hdr.is-mini .hdr-in{grid-template-columns:1fr auto 1fr;grid-template-areas:"l logo r";height:84px}
  .hdr.is-mini .hdr-l{display:flex}
  .nav,.hdr-act span,.hdr-l .hdr-act{display:none}
  .hdr-r .hdr-act{width:48px;justify-content:center}
  .hdr-logo,.hdr.is-mini .hdr-logo{margin:0;box-shadow:none;justify-self:center}
  .logo,.hdr.is-mini .logo{width:60px;height:60px}
  .burger{display:inline-block}
  .hdr.menu-open,.hdr.over.menu-open:not(.is-mini){background:var(--paper);color:var(--ink);border-color:var(--line)}
  .hdr.menu-open::before{display:none}
  .mnav{display:flex;flex-direction:column;padding-top:12px;padding-bottom:32px;border-top:1px solid var(--line)}
  .mnav a{display:flex;align-items:baseline;justify-content:space-between;min-height:64px;font-family:var(--serif);font-size:34px;text-decoration:none;border-bottom:1px solid var(--line);padding:10px 0;animation:up .7s var(--ease) both}
  /* gleichmäßige Staffelung über alle Menüpunkte */
  .mnav a:nth-child(2){animation-delay:.05s}.mnav a:nth-child(3){animation-delay:.1s}.mnav a:nth-child(4){animation-delay:.15s}.mnav a:nth-child(5){animation-delay:.2s}.mnav a:nth-child(6){animation-delay:.25s}
  .hdr-r .hdr-act svg{width:26px;height:26px}
  .mnav a small{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--bronze)}
  /* Touch: Footer-Links mit voller Tippfläche */
  .ftr ul a{min-height:44px}
}
/* Smartphone */
@media (max-width:760px){
  .vf{font-size:17px}
  :root{--hdr-full:73px}
  .hdr-in,.hdr.is-mini .hdr-in{height:72px}
  .logo,.hdr.is-mini .logo{height:52px;width:52px}
  .pg-head{padding:40px 0 32px}
  /* Footer kompakt */
  .ftr{padding:32px 0 24px}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
  .ftr-brand{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px}
  .ftr .logo-f{width:56px;height:56px}
  .ftr h3{margin-bottom:6px}
  .ftr ul{font-size:15px}
  .ftr ul a{min-height:32px}
  .ftr-adr{padding:4px 0 6px}
  .ftr-bottom{margin-top:24px;padding-top:16px;flex-direction:column;gap:4px;font-size:12.5px}
  /* Seiten + Rechtliches nebeneinander, Kontakt (lange E-Mail) über volle Breite darunter */
  .ftr-grid > div:nth-child(3){grid-column:1/-1;order:1}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;box-shadow:0 16px 40px -14px rgba(42,34,32,.55);transition:transform .6s var(--ease),opacity .4s var(--ease)}
  .at-hero .sticky-cta,.at-end .sticky-cta{transform:translateY(140%);opacity:0;pointer-events:none}
}

[data-if]{display:contents}
[data-if][hidden],.lb[hidden]{display:none!important}