@import url('/fonts.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-bg:#faf8f4;
  --c-bg-warm:#f3efe8;
  --c-text:#1a1a18;
  --c-text-soft:#4a4a45;
  --c-text-muted:#7a7a72;
  --c-accent:#8b6f4e;
  --c-accent-light:#c4a97d;
  --c-border:#d8d3ca;
  --c-border-light:#e8e4dc;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Libre Franklin','Segoe UI',system-ui,sans-serif;
  --max-w:720px;
  --space-xs:0.5rem;
  --space-s:1rem;
  --space-m:2rem;
  --space-l:3.5rem;
  --space-xl:6rem;
}
html{scroll-behavior:smooth;font-size:100%}
body{font-family:var(--font-body);font-weight:300;color:var(--c-text);background:var(--c-bg);line-height:1.75;font-size:1.05rem;-webkit-font-smoothing:antialiased}

a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover,a:focus{color:var(--c-text)}

.lang-de,.lang-en{}
.lang-en{display:none}
html.is-en .lang-de{display:none}
html.is-en .lang-en{display:block}

.skip-link{position:absolute;top:-100%;left:1rem;background:var(--c-text);color:var(--c-bg);padding:0.75rem 1.5rem;z-index:1000;font-size:0.9rem;border-radius:0 0 4px 4px;text-decoration:none}
.skip-link:focus{top:0}

.lang-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:flex-end;align-items:center;padding:1rem 2rem;background:linear-gradient(to bottom,var(--c-bg) 60%,transparent);pointer-events:none}
.lang-toggle{pointer-events:all;display:flex;border:1px solid var(--c-border);border-radius:4px;overflow:hidden;background:var(--c-bg)}
.lang-toggle button{font-family:var(--font-body);font-size:0.8rem;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;padding:0.4rem 0.9rem;border:none;background:transparent;color:var(--c-text-muted);cursor:pointer;transition:all 0.3s ease}
.lang-toggle button.active{background:var(--c-text);color:var(--c-bg)}
.lang-toggle button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}

.container{max-width:var(--max-w);margin:0 auto;padding:0 2rem}

.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--space-xl) 2rem;position:relative}
.hero::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;border-radius:50%;border:1px solid var(--c-border-light);opacity:0;animation:buttonAppear 2s ease-out 0.5s forwards}
.hero::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--c-accent);opacity:0;animation:dotAppear 1.5s ease-out 1.2s forwards}
@keyframes buttonAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(0.8)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes dotAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.hero-pretitle{font-family:var(--font-body);font-size:0.75rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--space-s);opacity:0;animation:fadeUp 1s ease-out 0.3s forwards}
.hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1.15;letter-spacing:-0.01em;color:var(--c-text);margin-bottom:var(--space-m);opacity:0;animation:fadeUp 1s ease-out 0.6s forwards;max-width:680px}
.hero h1.brand{font-size:clamp(2.4rem,6vw,4rem)}
.hero-subtitle{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.15rem,2.5vw,1.4rem);color:var(--c-text-soft);max-width:480px;opacity:0;animation:fadeUp 1s ease-out 0.9s forwards}
@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}

.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);width:1px;height:40px;background:var(--c-border);opacity:0;animation:fadeIn 1s ease-out 2s forwards}
.scroll-hint::after{content:'';position:absolute;bottom:0;left:-1px;width:3px;height:12px;background:var(--c-accent-light);border-radius:2px;animation:scrollPulse 2s ease-in-out infinite}
@keyframes fadeIn{to{opacity:1}}
@keyframes scrollPulse{0%,100%{transform:translateY(0);opacity:0.4}50%{transform:translateY(8px);opacity:1}}

section{padding:var(--space-xl) 0}
.section-divider{width:40px;height:1px;background:var(--c-border);margin:0 auto var(--space-l)}
.section-label{font-family:var(--font-body);font-size:0.7rem;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--space-s)}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;color:var(--c-text);margin-bottom:var(--space-m)}
h3{font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:var(--c-text);margin-bottom:var(--space-xs)}
p{margin-bottom:var(--space-s);color:var(--c-text-soft)}
p:last-child{margin-bottom:0}
.lead{font-size:1.15rem;line-height:1.8;color:var(--c-text-soft)}
.emphasis{font-family:var(--font-display);font-style:italic;font-size:1.3rem;line-height:1.6;color:var(--c-text)}
strong{font-weight:500;color:var(--c-text)}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-s);margin:var(--space-l) 0}
.value-card{padding:var(--space-m) var(--space-s);border:1px solid var(--c-border-light);border-radius:2px;transition:border-color 0.3s ease;text-align:center}
.value-card:hover,.value-card:focus-within{border-color:var(--c-accent-light)}
.value-card h3{font-size:1.2rem;margin-bottom:0.5rem}
.value-card p{font-size:0.92rem;line-height:1.65}

.not-list{list-style:none;padding:0;margin:var(--space-s) 0 var(--space-m)}
.not-list li{padding:0.6rem 0 0.6rem 1.5rem;position:relative;color:var(--c-text-soft);font-size:1rem;border-bottom:1px solid var(--c-border-light)}
.not-list li:last-child{border-bottom:none}
.not-list li::before{content:'\2014';position:absolute;left:0;color:var(--c-text-muted)}

.phase-banner{background:var(--c-bg-warm);padding:var(--space-l) 0;margin:var(--space-l) 0;border-top:1px solid var(--c-border-light);border-bottom:1px solid var(--c-border-light)}
.phase-indicator{display:inline-flex;align-items:center;gap:0.75rem;font-family:var(--font-body);font-size:0.75rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--space-s)}
.phase-indicator .dot{width:6px;height:6px;border-radius:50%;background:var(--c-accent)}

.highlight-block{border-left:2px solid var(--c-accent-light);padding-left:var(--space-m);margin:var(--space-l) 0}
.highlight-block p{font-family:var(--font-display);font-style:italic;font-size:1.2rem;line-height:1.7;color:var(--c-text)}

.note{margin-top:var(--space-xl);padding:var(--space-m);background:var(--c-bg-warm);border-radius:2px}
.note p{color:var(--c-text-muted);font-size:0.9rem;margin:0}

footer{padding:var(--space-l) 0;text-align:center;border-top:1px solid var(--c-border-light);margin-top:var(--space-xl)}
footer p{font-size:0.8rem;color:var(--c-text-muted);letter-spacing:0.02em;margin-bottom:0.5rem}
.footer-links{display:flex;justify-content:center;gap:1.5rem;margin-top:0.75rem;flex-wrap:wrap}
.footer-links a{color:var(--c-text-muted);font-size:0.8rem;text-decoration:none;letter-spacing:0.05em}
.footer-links a:hover,.footer-links a:focus{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}

.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}

/* Legal pages (Impressum/Datenschutz) */
.legal{padding:calc(var(--space-xl) + 2rem) 0 var(--space-xl)}
.legal h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1.2;color:var(--c-text);margin-bottom:var(--space-l)}
.legal h2{font-size:clamp(1.4rem,3vw,1.8rem);margin-top:var(--space-l);margin-bottom:var(--space-m)}
.legal h3{font-family:var(--font-display);font-weight:500;font-size:1.2rem;margin-top:var(--space-m);margin-bottom:var(--space-xs);color:var(--c-text)}
.legal p{font-size:1rem;line-height:1.75;margin-bottom:var(--space-s)}
.legal address{font-style:normal;color:var(--c-text-soft);line-height:1.8;margin-bottom:var(--space-m)}
.legal ul{margin:var(--space-s) 0 var(--space-m) 1.5rem;color:var(--c-text-soft)}
.legal ul li{margin-bottom:0.4rem}
.legal .back-link{display:inline-block;margin-bottom:var(--space-l);font-size:0.85rem;color:var(--c-text-muted);text-decoration:none;letter-spacing:0.08em;text-transform:uppercase}
.legal .back-link::before{content:'\2190\00A0\00A0';color:var(--c-accent)}
.legal .back-link:hover,.legal .back-link:focus{color:var(--c-text)}

@media(max-width:640px){
  .container{padding:0 1.25rem}
  .hero{padding:var(--space-xl) 1.25rem}
  .hero::before{width:200px;height:200px}
  .values{grid-template-columns:1fr;gap:var(--space-s)}
  .lang-bar{padding:0.75rem 1.25rem}
  section{padding:var(--space-l) 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero-pretitle,.hero h1,.hero-subtitle{opacity:1;transform:none}
  .hero::before,.hero::after{opacity:1;transform:translate(-50%,-50%)}
  .scroll-hint{opacity:1}
}
@media print{.lang-bar,.scroll-hint{display:none}.hero{min-height:auto;padding:2rem 0}.hero::before,.hero::after{display:none}}