/* Callista Studio — shared styles for sub-pages (Impressum, Datenschutz) */

:root{
  --paper:#F4F0E6; --paper-2:#EDE8DA;
  --ink:#141A16; --ink-soft:#46504A;
  --green:#2F6A50; --green-dark:#275A44; --sprout:#74BC97;
  --red:#C0392C; --accent:#2F6A50;
  --hair:rgba(20,26,22,.14); --hair-strong:rgba(20,26,22,.26);
  --ease:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --maxw:1320px; --pad:48px;
  --serif:"Fraunces",Georgia,serif; /* @kind font */
  --sans:"Schibsted Grotesk",system-ui,sans-serif; /* @kind font */
  --mono:"JetBrains Mono",ui-monospace,monospace; /* @kind font */
}
html[data-theme="dark"]{
  --paper:#0C1611; --paper-2:#101d16;
  --ink:#E9EFEA; --ink-soft:#90A89B;
  --hair:rgba(255,255,255,.12); --hair-strong:rgba(255,255,255,.22);
  --accent:#7FC79E;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
html{overflow-x:clip} /* dekorative .reg-Eckmarken (right/left:-11px) dürfen keinen horizontalen Scroll auslösen; clip bricht position:sticky nicht */
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative; overflow-x:hidden;
  transition:background-color .55s var(--ease), color .55s var(--ease);
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.05;
}
html[data-theme="dark"] body::before{mix-blend-mode:screen}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:5px}

/* ---- header ---- */
.lhead{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--hair); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:saturate(1.1) blur(7px); -webkit-backdrop-filter:saturate(1.1) blur(7px)}
.lhead-in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .mark{width:29px; height:29px; border-radius:8px; flex:none}
.brand .word{font-family:var(--sans); font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--ink); line-height:1}
.brand .word .stud{color:var(--ink-soft); font-weight:500}
.brand .word .dot{color:var(--green)}
.controls{display:flex; align-items:center; gap:20px}
.back{font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair-strong); padding-bottom:2px; transition:border-color .25s var(--ease), gap .25s var(--ease)}
.back:hover{border-color:var(--ink)}
.lang{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em}
.lang button{background:none; border:none; cursor:pointer; font:inherit; color:var(--ink-soft); padding:0; position:relative; transition:color .2s var(--ease), transform .2s var(--ease)}
.lang button::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--green); transform:scaleX(0); transform-origin:right center; transition:transform .35s var(--ease)}
.lang button:hover::after, .lang button.on::after{transform:scaleX(1); transform-origin:left center}
html[data-theme="dark"] .lang button::after{background:var(--accent)}
.lang button.on{color:var(--ink)}
.lang button:active{transform:scale(.94)}
.lang .sep{color:var(--hair-strong)}
.theme{width:34px; height:34px; border-radius:50%; border:1px solid var(--hair); background:none; cursor:pointer; display:grid; place-items:center; color:var(--ink-soft); transition:border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease)}
.theme:hover{border-color:var(--hair-strong); color:var(--ink)}
.theme:active{transform:scale(.94)}

/* ---- legal prose ---- */
.legal{position:relative; z-index:1; padding:72px var(--pad) 96px}
.legal .inner{max-width:800px}
.legal .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:12px; margin-bottom:22px}
.legal .kicker::before{content:""; width:26px; height:1px; background:var(--ink-soft)}
.legal h1{font-family:var(--serif); font-weight:360; font-variation-settings:"opsz" 144; font-size:clamp(40px,5.4vw,68px); line-height:1.02; letter-spacing:-.018em; color:var(--ink); margin-bottom:18px}
.legal .lead{font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:62ch; margin-bottom:8px}
.legal .note{position:relative; border:1px solid var(--hair-strong); background:rgba(255,255,255,.4); padding:18px 22px; margin:30px 0 8px; font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink-soft)}
html[data-theme="dark"] .legal .note{background:rgba(255,255,255,.04)}
.legal section{padding:34px 0; border-top:1px solid var(--hair)}
.legal section:first-of-type{border-top:none}
.legal h2{font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin-bottom:16px; display:flex; gap:16px; align-items:baseline}
.legal h2 .n{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--green); letter-spacing:.06em; flex:none}
html[data-theme="dark"] .legal h2 .n{color:var(--accent)}
.legal h3{font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ink); margin:18px 0 8px}
.legal p{font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:72ch; margin-bottom:14px}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--ink); font-weight:600}
.legal a{color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--hair-strong); transition:text-decoration-color .2s var(--ease)}
.legal a:hover{text-decoration-color:var(--green)}
.legal ul{list-style:none; margin:6px 0 16px; display:flex; flex-direction:column; gap:9px; max-width:70ch}
.legal li{font-family:var(--sans); font-size:15.5px; line-height:1.5; color:var(--ink-soft); display:flex; gap:12px; align-items:baseline}
.legal li::before{content:""; width:16px; height:1px; background:var(--green); flex:none; transform:translateY(8px)}
html[data-theme="dark"] .legal li::before{background:var(--accent)}
.legal address{font-style:normal; font-family:var(--sans); font-size:16px; line-height:1.75; color:var(--ink)}
.legal .ph{color:var(--ink-soft); background:color-mix(in srgb, var(--hair) 60%, transparent); padding:1px 7px; border-radius:3px; font-family:var(--mono); font-size:13px}
.legal .xlink{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--sans); font-weight:600; font-size:15px; color:var(--green); text-decoration:none; border-bottom:none}
html[data-theme="dark"] .legal .xlink{color:var(--accent)}
.legal .xlink:hover{gap:11px}

/* ---- footer ---- */
footer.site{position:relative; z-index:1; background:var(--paper-2); border-top:1px solid var(--hair); padding:48px 0 38px; transition:background-color .55s var(--ease), border-color .55s var(--ease)}
.foot-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:11px; font-family:var(--sans); font-weight:600; font-size:18px; color:var(--ink)}
.foot-brand .mk{width:26px; height:26px; border-radius:7px}
.foot-links{display:flex; gap:22px; font-family:var(--mono); font-size:12px; letter-spacing:.02em}
.foot-links a{position:relative; color:var(--ink-soft); text-decoration:none; padding-bottom:2px; transition:color .2s var(--ease)}
.foot-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--green); transform:scaleX(0); transform-origin:right center; transition:transform .35s var(--ease)}
.foot-links a:hover{color:var(--ink)}
.foot-links a:hover::after{transform:scaleX(1); transform-origin:left center}
html[data-theme="dark"] .foot-links a::after{background:var(--accent)}
.foot-copy{margin-top:28px; padding-top:22px; border-top:1px solid var(--hair); font-family:var(--mono); font-size:12px; color:var(--ink-soft)}

@media (max-width:720px){
  :root{--pad:22px}
  .lhead-in{height:64px}
  .back{display:none}
  .legal{padding:48px var(--pad) 72px}
  .legal h2{flex-direction:column; gap:6px}
  .foot-row{flex-direction:column; align-items:flex-start; gap:18px}
}
.theme{display:none !important}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto} }