/* =========================================================
   Seele & Leib — modern rebuild
   Farben, Schrift & Ornamente bleiben der Originalseite treu.
   ========================================================= */

/* CulturaNew-Book by DSType – lizenziert über MyFonts (Build 3133012)
   Verwendung: Headings, Display-Elemente
   Lizenzdatei: assets/fonts/_LICENSE.css */
@font-face{
  font-family: 'CulturaNew-Book';
  src: url('../fonts/2FCE54_0_0.woff2') format('woff2'),
       url('../fonts/2FCE54_0_0.woff')  format('woff'),
       url('../fonts/2FCE54_0_0.ttf')   format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* Inter (Variable) – Open Source, SIL OFL · Verwendung: Fließtext / UI */
@font-face{
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style:  normal;
  font-display: swap;
}
@font-face{
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style:  italic;
  font-display: swap;
}

:root{
  /* Originalfarbwelt */
  --c-purple:      #413C5E;
  --c-purple-soft: #7A768E;
  --c-mauve:       #A09DAE;
  --c-navy:        #002D5B;
  --c-orange:      #CD500A;
  --c-sand:        #e4c9a1;
  --c-peach:       #F5BE8B;

  /* Flächen */
  --c-bg:          #fbf8f4;
  --c-bg-alt:      #f3ede4;
  --c-ink:         #2a2740;
  --c-muted:       #6a6782;
  --c-line:        #e6ddd0;
  --c-white:       #ffffff;

  /* Typografie — Original-Hausschrift für Display + Inter für Fließtext */
  --font-serif:    "CulturaNew-Book", Georgia, "Times New Roman", serif;
  --font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type-Scale — bewusst nur drei Body-Größen */
  --fs-label:      .68rem;  /* UI-Labels in Caps (Nav, Buttons, Kicker)   */
  --fs-small:      .78rem;  /* Sekundärtext (Notizen, Footer, Caption)    */
  --fs-body:       .87rem;  /* Fließtext überall                          */

  --maxw:          1180px;
  --radius:        14px;
  --shadow-sm:     0 2px 10px rgba(65,60,94,.06);
  --shadow-md:     0 18px 40px -20px rgba(65,60,94,.25);
  --t:             .35s cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* scroll-behavior wird bewusst NICHT auf smooth gesetzt —
   die Steuerung läuft komplett über JS (siehe main.js) */
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--c-orange); text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--c-purple); }
::selection{ background:var(--c-orange); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--c-purple);
  letter-spacing:.01em;
  line-height:1.15;
  margin:0;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem, 3vw, 2rem); }
.container.narrow{ max-width:780px; }

/* =========================================================
   Seitliche Ornamente (original arrows)
   ========================================================= */
.side-arrow{
  position:fixed;
  top:50%;
  width:22px;
  height:240px;
  transform:translateY(-50%);
  z-index:5;
  pointer-events:none;
  opacity:.85;
  transition:opacity var(--t), transform var(--t);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.side-arrow-left{
  left:max(1rem, calc(50% - 620px));
  background-image:url("../images/right-side-arrow.svg");
}
.side-arrow-right{
  right:max(1rem, calc(50% - 620px));
  background-image:url("../images/left-side-arrow.svg");
}
@media (max-width: 900px){
  .side-arrow{ height:180px; width:16px; opacity:.85; }
  .side-arrow-left{ left:.4rem; }
  .side-arrow-right{ right:.4rem; }
}
@media (max-width: 600px){
  .side-arrow{ height:120px; width:12px; opacity:.85; }
}
@media (max-width: 320px){
  .side-arrow{ display:none; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(251,248,244,.82);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.site-header.scrolled{
  border-color:var(--c-line);
  box-shadow:var(--shadow-sm);
}
.nav-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:1.25rem clamp(1rem, 3vw, 2rem) 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  position:relative;
}
.brand{
  display:block;
  line-height:0;
  transition:opacity var(--t);
}
.brand img{
  display:block;
  width:clamp(280px, 34vw, 360px);
  height:auto;
}
.brand:hover{ opacity:.8; }

.site-header.scrolled .brand img{
  width:clamp(200px, 24vw, 280px);
  transition:width var(--t);
}

.mainnav ul{
  display:flex;
  gap:2.2rem;
  list-style:none;
  margin:0;
  padding:0;
  justify-content:center;
  flex-wrap:wrap;
}
.mainnav a{
  color:var(--c-purple);
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  padding:.25rem 0;
}
.mainnav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:0;
  height:1px;
  background:var(--c-orange);
  transition:width var(--t), left var(--t);
}
.mainnav a:hover{ color:var(--c-orange); }
.mainnav a:hover::after{ width:100%; left:0; }

.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:10px;
  cursor:pointer;
  width:44px;
  height:44px;
  position:absolute;
  top:50%;
  right:.5rem;
  transform:translateY(-50%);
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--c-purple);
  margin:4px auto;
  transition:transform var(--t), opacity var(--t);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 720px){
  .nav-wrap{ padding:1rem 1rem .85rem; }
  .nav-toggle{ display:block; }
  .mainnav{
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--c-bg);
    border-bottom:1px solid var(--c-line);
    max-height:0;
    overflow:hidden;
    transition:max-height 1.3s cubic-bezier(.2,.7,.2,1);
  }
  .mainnav.open{ max-height:480px; transition:max-height 2s cubic-bezier(.2,.7,.2,1); }
  .mainnav ul{
    flex-direction:column;
    gap:0;
    padding:.5rem 2rem 0;
  }
  .mainnav li{ border-bottom:1px solid var(--c-line); width:100%; text-align:center; }
  .mainnav li:last-child{ border-bottom:0; }
  .mainnav a{
    display:block;
    padding:1rem 0;
    font-size:var(--fs-small);
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  padding:0;
}
.hero-media{
  flex:0 0 52%;
  position:relative;
  overflow:hidden;
  background: url("../images/landing-page.jpg") center/cover no-repeat;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, var(--c-bg) 100%);
}
@keyframes slowPan{
  from{ transform:scale(1.02) translateY(0); }
  to  { transform:scale(1.08) translateY(-8px); }
}
.hero-inner{
  flex:1;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6rem 4rem 6rem 3rem;
  max-width:700px;
  text-align:left;
}
.hero-inner::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-100px;
  width:130px;
  background:linear-gradient(to right, transparent, var(--c-bg));
  z-index:2;
  pointer-events:none;
}
/* Weicher Übergang am unteren Rand des Hero */
.hero::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:140px;
  background:linear-gradient(to bottom, transparent, var(--c-bg));
  z-index:2;
  pointer-events:none;
}
@media(max-width:768px){
  /* Hero: vertikal stapeln */
  .hero{ flex-direction:column; min-height:auto; }
  .scroll-hint{ display:none; }
  .hero-media{ flex:0 0 auto; width:100%; min-height:65vw; max-height:80vw; }
  .hero-media::after{
    background:linear-gradient(to bottom, transparent 25%, var(--c-bg) 70%);
  }
  .hero-media{ border:none; margin-bottom:-40px; }
  /* Linker Fade weg — bei gestapeltem Layout nicht nötig */
  .hero-inner::before{ display:none; }
  .hero::after{ height:60px; }
  .hero-inner{
    position:relative;
    z-index:2;
    background:var(--c-bg);
    padding:1.5rem 1.5rem 3rem;
    text-align:center;
  }
  /* Titel zentriert & kompakter */
  .hero-title{
    font-size:clamp(1.6rem, 7vw, 2.4rem);
    justify-content:center;
  }
  /* Eyebrow — kleinerer Abstand */
  .eyebrow{ letter-spacing:.15em; }
  /* Buttons stapeln & volle Breite */
  .hero-cta{
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
    margin-top:1.5rem;
  }
  .hero .btn{ justify-content:center; }
  .hero .btn-ghost{
    justify-content:center;
    padding-left:0;
    text-align:center;
  }
}

/* Kleine Phones (unter 480px) */

@media(max-width:480px){
  .hero-media{ min-height:75vw; max-height:90vw; }
  .hero-inner{ padding:1.2rem 1.2rem 2.5rem; }
  /* CV-Grid: erzwinge eine Spalte */
  .cv-grid{ grid-template-columns:1fr; gap:2rem; }
  /* Timeline-Jahr schmaler */
  .t-year{ flex:0 0 80px; font-size:.8rem; }
  /* Karten volle Breite */
  .cards{ grid-template-columns:1fr; }
  .spez-grid{ grid-template-columns:1fr; }
}

.eyebrow{
  font-size:var(--fs-label);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--c-orange);
  margin:0 0 1.25rem;
  font-weight:500;
}

.hero-title{
  font-family:var(--font-serif);
  font-weight:400;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height:1;
  color:var(--c-purple);
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:.35em;
  flex-wrap:wrap;
}
.hero-title .amp{
  font-style:italic;
  color:var(--c-orange);
  font-family:var(--font-serif);
  font-weight:400;
  font-size:.85em;
}

.hero-lead{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(.98rem, 1.6vw, 1.18rem);
  line-height:1.55;
  color:var(--c-purple-soft);
  margin:1.5rem auto 2.2rem;
  max-width:600px;
}

.hero-cta{
  display:flex;
  gap:1.25rem;
  justify-content:flex-start;
  flex-wrap:wrap;
  align-items:center;
  margin-top:2rem;
}

/* Moderne Hero-Buttons */
.hero .btn{
  background:var(--c-orange);
  color:#fff;
  border-color:var(--c-orange);
  border-radius:6px;
  letter-spacing:.1em;
  padding:.9rem 2.2rem;
  box-shadow:0 2px 12px rgba(205,80,10,.2);
}
.hero .btn:hover{
  background:var(--c-purple);
  border-color:var(--c-purple);
  box-shadow:0 4px 18px rgba(65,60,94,.25);
}
.hero .btn-ghost{
  background:transparent;
  color:var(--c-purple);
  border:none;
  box-shadow:none;
  padding-left:0;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--c-mauve);
}
.hero .btn-ghost:hover{
  background:transparent;
  color:var(--c-orange);
  text-decoration-color:var(--c-orange);
  box-shadow:none;
  transform:none;
}

.scroll-hint{
  display:block;
  position:absolute;
  bottom:1.8rem;
  left:50%;
  transform:translateX(-50%);
  width:26px; height:40px;
  border:1.5px solid var(--c-purple);
  border-radius:14px;
  z-index:1;
  opacity:.7;
}
.scroll-hint span{
  display:block;
  width:3px; height:8px;
  background:var(--c-purple);
  border-radius:2px;
  margin:6px auto 0;
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0); opacity:.6; }
  50%   { transform:translateY(10px); opacity:0; }
}

/* =========================================================
   Buttons mit originalen Pfeil-Ornamenten (<i class="arrow-*">)
   ========================================================= */
.btn{
  --btn-color: var(--c-purple);
  --btn-hover: var(--c-orange);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 2rem;
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--btn-color);
  background:transparent;
  border:1px solid var(--btn-color);
  border-radius:999px;
  cursor:pointer;
  transition:color var(--t), background var(--t), border-color var(--t), transform var(--t);
}
.btn:hover{
  color:#fff;
  background:var(--btn-hover);
  border-color:var(--btn-hover);
  transform:translateY(-1px);
}
.btn-ghost{
  --btn-color: var(--c-purple-soft);
  --btn-hover: var(--c-purple);
}
/* Kleiner Pfeil-Akzent in Buttons (visuell abgeleitet von den Side-Arrows) */
.btn .i-arrow-left,
.btn .i-arrow-right{
  width:18px;
  height:1px;
  background:currentColor;
  position:relative;
  flex:0 0 18px;
  opacity:.7;
  transition:opacity var(--t), transform var(--t), width var(--t);
}
.btn .i-arrow-left{ margin-right:.9rem; }
.btn .i-arrow-right{ margin-left:.9rem; }
.btn .i-arrow-left::before,
.btn .i-arrow-right::before{
  content:"";
  position:absolute;
  width:7px; height:7px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  top:50%;
}
.btn .i-arrow-left::before{
  left:0;
  transform:translateY(-50%) rotate(-135deg);
}
.btn .i-arrow-right::before{
  right:0;
  transform:translateY(-50%) rotate(45deg);
}
.btn:hover .i-arrow-left,
.btn:hover .i-arrow-right{ opacity:1; width:22px; flex-basis:22px; }

/* =========================================================
   Abschnitte
   ========================================================= */
.section{
  position:relative;
  padding:clamp(4rem, 9vw, 7rem) 0;
  scroll-margin-top:130px;
}
.section-alt{ background:var(--c-bg-alt); }

.section-head{
  text-align:center;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.kicker{
  font-size:var(--fs-label);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--c-orange);
  margin:0 0 .75rem;
  font-weight:500;
}
.section-title{
  font-size:clamp(1.6rem, 3.4vw, 2.35rem);
  color:var(--c-purple);
  position:relative;
  display:inline-block;
  padding-bottom:2rem;
}
.section-title::after{
  content:"";
  display:block;
  width:72px; height:28px;
  background:url("../images/title-element.svg") center/contain no-repeat;
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
}

/* Intro */
.intro .pullquote{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem, 1.9vw, 1.4rem);
  line-height:1.5;
  color:var(--c-purple-soft);
  text-align:center;
  margin:0 auto 2rem;
  border:0;
  padding:0;
  max-width:640px;
  position:relative;
}
.intro .pullquote::before,
.intro .pullquote::after{
  content:"";
  display:block;
  width:42px; height:18px;
  background:url("../images/title-element.svg") center/contain no-repeat;
  margin:1rem auto;
  opacity:.7;
}
.intro .intro-body,
.hero .intro-body{
  color:var(--c-muted);
  font-size:var(--fs-body);
}
.intro .intro-body{
  text-align:center;
}

.kicker{ text-align:center; }
.section-head .kicker{ display:block; }

/* =========================================================
   Karten (Unterstützung bei)
   ========================================================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
}
.card{
  position:relative;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:2.2rem 1.8rem 2rem;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--c-orange), var(--c-sand));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--c-sand);
}
.card:hover::before{ transform:scaleX(1); }
.card-num{
  font-family:var(--font-serif);
  font-size:2rem;
  color:var(--c-orange);
  font-style:italic;
  line-height:1;
  margin-bottom:.5rem;
  opacity:.75;
}
.card h3{
  font-size:1.2rem;
  color:var(--c-navy);
  margin-bottom:.6rem;
}
.card p{ margin:0; color:var(--c-muted); font-size:var(--fs-body); line-height:1.7; }

/* =========================================================
   Accordion (Arbeitsweise)
   ========================================================= */
.accordion{
  max-width:820px;
  margin:0 auto;
  border-top:1px solid var(--c-line);
}
.accordion details{
  border-bottom:1px solid var(--c-line);
}
.accordion summary{
  list-style:none;
  cursor:pointer;
  padding:1.4rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  transition:color var(--t), background var(--t);
  outline:none;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary:hover{ background:rgba(205,80,10,.04); }
.sum-label{
  font-family:var(--font-serif);
  font-size:1.15rem;
  color:var(--c-purple);
  display:inline-flex;
  align-items:center;
}
.sum-label .i-arrow-left{
  width:14px; height:1px;
  background:currentColor;
  position:relative;
  display:inline-block;
  margin-right:.8rem;
  opacity:.5;
  flex:0 0 14px;
  transition:opacity var(--t);
  transform:scaleX(-1);
}
.sum-label .i-arrow-left::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:6px; height:6px;
  border-left:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.sum-label .i-arrow-right{ display:none; }
.accordion details[open] .sum-label{ color:var(--c-orange); }
.accordion details[open] .sum-label .i-arrow-left{ opacity:1; }

.sum-icon{
  width:18px; height:18px;
  position:relative;
  flex:0 0 auto;
}
.sum-icon::before,
.sum-icon::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:14px; height:1.5px;
  background:var(--c-purple);
  transform:translate(-50%, -50%);
  transition:transform var(--t), background var(--t);
}
.sum-icon::after{ transform:translate(-50%, -50%) rotate(90deg); }
.accordion details[open] .sum-icon::after{ transform:translate(-50%, -50%) rotate(0deg); }
.accordion details[open] .sum-icon::before,
.accordion details[open] .sum-icon::after{ background:var(--c-orange); }

.acc-body{
  padding:0 1rem 1.6rem 2.7rem;
  color:var(--c-muted);
  font-size:var(--fs-body);
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.25,.1,.25,1), opacity .4s ease, padding .5s cubic-bezier(.25,.1,.25,1);
}
.bullets{ list-style:none; padding:0; margin:0; }
.bullets li{
  position:relative;
  padding-left:1.3rem;
  margin-bottom:.5rem;
}
.bullets li::before{
  content:"";
  position:absolute;
  left:0; top:.7em;
  width:10px; height:1px;
  background:var(--c-orange);
}

/* =========================================================
   Spezialisierungen
   ========================================================= */
.spez-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
}
.spez{
  background:var(--c-white);
  border-radius:var(--radius);
  padding:2.2rem;
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t);
  position:relative;
}
.spez::after{
  content:"";
  display:block;
  width:48px; height:18px;
  background:url("../images/title-element.svg") center/contain no-repeat;
  margin-top:1.5rem;
  opacity:.6;
}
.spez:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.spez h3{
  font-size:1.3rem;
  color:var(--c-navy);
  margin-bottom:.85rem;
}
.spez p{ color:var(--c-muted); margin:0 0 1rem; font-size:var(--fs-body); }
.spez p:last-of-type{ margin-bottom:0; }
.muted{ color:var(--c-muted); }
.small{ font-size:var(--fs-small); }

/* =========================================================
   CV / Über mich
   ========================================================= */
.cv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:3rem;
}
.cv-head{
  font-size:1.25rem;
  color:var(--c-orange);
  margin-bottom:1.4rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--c-line);
}
.timeline{
  list-style:none;
  margin:0;
  padding:0;
}
.timeline li{
  display:flex;
  gap:1.2rem;
  padding:1rem 0;
  border-bottom:1px dashed var(--c-line);
}
.timeline li:last-child{ border-bottom:0; }
.t-year{
  flex:0 0 100px;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:var(--fs-body);
  color:var(--c-purple);
  letter-spacing:.02em;
}
.t-body{
  flex:1;
  color:var(--c-ink);
  font-size:var(--fs-body);
  line-height:1.6;
}

/* =========================================================
   Kontakt
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3rem;
  align-items:start;
}
@media (max-width: 820px){
  .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
}
.contact-info{
  display:grid;
  gap:1.5rem;
}
.c-block{
  display:flex;
  gap:1.1rem;
  align-items:flex-start;
  background:var(--c-white);
  padding:1.2rem 1.3rem;
  border-radius:var(--radius);
  border:1px solid var(--c-line);
  transition:border-color var(--t), transform var(--t);
}
.c-block:hover{ border-color:var(--c-orange); transform:translateX(3px); }
.c-block strong{ color:var(--c-purple); font-weight:600; }
.c-icon{
  flex:0 0 36px;
  width:36px; height:36px;
  background-size:22px 22px;
  background-repeat:no-repeat;
  background-position:center;
  background-color:rgba(205,80,10,.08);
  border-radius:50%;
  margin-top:2px;
}
.c-icon-maps { background-image:url("../images/icon-maps.svg"); }
.c-addr{ display:inline-block; margin-top:.4rem; color:var(--c-muted); font-size:var(--fs-small); }
.c-icon-phone{ background-image:url("../images/icon-phone.svg"); }
.c-icon-mail { background-image:url("../images/icon-mail.svg"); }

.contact-form{
  background:var(--c-white);
  padding:2rem;
  border-radius:var(--radius);
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm);
  display:grid;
  gap:1.2rem;
}
.contact-form label{
  display:block;
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-mauve);
}
.contact-form label span{ display:block; margin-bottom:.5rem; }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.78rem 1rem;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  color:var(--c-ink);
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:8px;
  outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--c-orange);
  box-shadow:0 0 0 3px rgba(205,80,10,.15);
}
.contact-form textarea{ resize:vertical; min-height:140px; }
.contact-form .btn{ justify-self:start; }
.hp-field{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.form-error{
  display:block;
  font-size:var(--fs-small);
  color:#c0392b;
  margin-top:.35rem;
}
.input-error{
  border-color:#c0392b !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.12) !important;
}
.form-status{
  font-size:var(--fs-small);
  color:#c0392b;
  min-height:1.2em;
}
.form-note{
  font-size:var(--fs-small);
  color:var(--c-muted);
  margin:0;
  line-height:1.5;
}

/* =========================================================
   Legal (Impressum / Datenschutz)
   ========================================================= */
.legal-section{
  padding:clamp(3rem, 6vw, 5rem) 0;
}
.legal-section:first-of-type{
  padding-top:clamp(4rem, 6vw, 6rem);
}
.legal-section h1{
  text-align:center;
  margin-bottom:2.5rem;
}
.legal-section h2{
  font-family:var(--font-serif);
  font-size:1.15rem;
  font-weight:400;
  color:var(--c-purple);
  margin:2.2rem 0 .6rem;
}
.legal-section p,
.legal-section li{
  font-size:var(--fs-body);
  color:var(--c-muted);
  line-height:1.75;
}
.legal-section ul{
  list-style:disc;
  padding-left:1.5rem;
  margin:.5rem 0 1rem;
}
.legal-section li{
  margin-bottom:.35rem;
}
.legal-section a{
  color:var(--c-orange);
  text-decoration:underline;
  text-decoration-color:rgba(205,80,10,.3);
  text-underline-offset:2px;
}
.legal-section a:hover{
  text-decoration-color:var(--c-orange);
}
.legal-date{
  margin-top:2rem;
  font-style:italic;
  opacity:.6;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--c-purple);
  color:#dcd6eb;
  padding:4rem 0 1.5rem;
  position:relative;
}
.footer-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.f-brand{
  font-family:var(--font-serif);
  font-size:1.4rem;
  color:#fff;
  margin-bottom:.6rem;
}
.f-tag{
  font-size:var(--fs-small);
  color:#b8b1c9;
  margin:0;
  line-height:1.6;
}
.site-footer h4{
  color:#fff;
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 1rem;
  font-weight:600;
}
.site-footer ul{
  list-style:none;
  padding:0;
  margin:0;
}
.site-footer li{ margin-bottom:.5rem; font-size:var(--fs-small); }
.site-footer a{ color:#c9c1da; }
.site-footer a:hover{ color:#fff; }
.f-legal{
  padding-top:1.5rem;
  text-align:center;
  font-size:var(--fs-small);
  color:#8e86a3;
  letter-spacing:.05em;
}


/* =========================================================
   Reveal-On-Scroll
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   Kleine Anpassungen
   ========================================================= */
ul.plain{ list-style:none; padding:0; margin:0; }