/* ============================================================
   Dorn-Webdesign · Gemeinsames Stylesheet
   Keine externen Ressourcen. System-Fonts. Kein Tracking.
   ============================================================ */

:root{
  --paper:      #FBF7F0;
  --sand:       #F3ECE0;
  --card:       #FFFDF9;
  --ink:        #2D2823;
  --ink-soft:   #6B6157;
  --line:       #E5DACB;
  --ember:      #A9541F;
  --ember-deep: #7E3B12;
  --ember-soft: #EDD9C4;
  --glow:       rgba(196,124,64,.16);

  --serif: "Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:  ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;

  --radius: 18px;
  --shadow-rest:  0 1px 2px rgba(45,40,35,.05), 0 8px 24px rgba(45,40,35,.06);
  --shadow-lift:  0 2px 4px rgba(45,40,35,.06), 0 18px 44px rgba(126,59,18,.14);
  --ease: cubic-bezier(.22,.61,.25,1);
  --wrap: 1100px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--ember-soft); color:var(--ember-deep); }

img,svg{ max-width:100%; display:block; }
a{ color:var(--ember-deep); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--ember); }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.18; letter-spacing:-.01em; margin:0 0 .6em; }
h1{ font-size:clamp(2rem, 4.6vw, 3.3rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1em; }

.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
section{ padding:6.5rem 0; }
@media (max-width:640px){ section{ padding:4.25rem 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ember-deep); margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:var(--ember); border-radius:2px;
}
.lead{ color:var(--ink-soft); max-width:56ch; }

/* --- Dorn-Zweig: Signatur-Motiv als Sektions-Trenner ------------- */
.branch{
  display:flex; justify-content:center; padding:0; margin:0 auto;
  color:var(--ember); opacity:.55;
}
.branch svg{ width:min(320px, 60vw); height:auto; }

/* --- Skip-Link & Fokus ------------------------------------------- */
.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--ember); outline-offset:3px; border-radius:4px; }

/* --- Header -------------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.brand .mark{ color:var(--ember); flex:none; }
.brand span small{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:.66rem; letter-spacing:.1em; color:var(--ink-soft);
}
.nav ul{ display:flex; gap:1.6rem; list-style:none; margin:0; padding:0; }
.nav ul a{
  font-size:.92rem; color:var(--ink-soft); text-decoration:none;
  padding:.3rem 0; border-bottom:1.5px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.nav ul a:hover{ color:var(--ember-deep); border-color:var(--ember); }
@media (max-width:760px){ .nav ul{ display:none; } }

.back-link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.92rem; color:var(--ink-soft); text-decoration:none;
  padding:.3rem 0; border-bottom:1.5px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.back-link:hover{ color:var(--ember-deep); border-color:var(--ember); }
.back-link svg{ width:15px; height:15px; }

/* --- Hero ----------------------------------------------------------- */
.hero{
  position:relative; padding:7.5rem 0 6.5rem; overflow:clip;
}
.hero .wrap{ position:relative; z-index:2; max-width:880px; }
.hero h1{ max-width:19ch; }
.hero h1 em{ font-style:normal; color:var(--ember-deep); position:relative; white-space:nowrap; }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em;
  height:.34em; background:var(--ember-soft); z-index:-1; border-radius:3px;
}
.hero .lead{ font-size:1.15rem; margin:1.2rem 0 2.2rem; }

.blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; filter:blur(70px); opacity:.8; }
.blob{ position:absolute; border-radius:50%; }
.blob.b1{ width:44vw; height:44vw; max-width:560px; max-height:560px; background:radial-gradient(circle at 30% 30%, #F2C9A0, transparent 70%); top:-12%; right:-8%; animation:drift1 26s ease-in-out infinite alternate; }
.blob.b2{ width:36vw; height:36vw; max-width:460px; max-height:460px; background:radial-gradient(circle at 60% 40%, #E9D6B8, transparent 70%); bottom:-20%; left:-6%; animation:drift2 32s ease-in-out infinite alternate; }
.blob.b3{ width:22vw; height:22vw; max-width:300px; max-height:300px; background:radial-gradient(circle at 50% 50%, #DFAE85, transparent 72%); top:30%; left:38%; opacity:.55; animation:drift3 38s ease-in-out infinite alternate; }
@keyframes drift1{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-6%,9%) scale(1.08);} }
@keyframes drift2{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(8%,-7%) scale(1.05);} }
@keyframes drift3{ from{ transform:translate(0,0);} to{ transform:translate(-10%,12%);} }

.cta{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ember); color:#FFF8F1;
  font-weight:600; font-size:1rem;
  padding:.95rem 1.7rem; border-radius:999px; border:none;
  text-decoration:none; cursor:pointer;
  box-shadow:0 4px 14px rgba(169,84,31,.28);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cta:hover{ background:var(--ember-deep); color:#FFF8F1; transform:translateY(-2px); box-shadow:0 8px 22px rgba(126,59,18,.32); }
.cta:active{ transform:translateY(0); }
.cta svg{ width:17px; height:17px; }

.hero-meta{
  margin-top:2.6rem; display:flex; gap:1.4rem; flex-wrap:wrap;
  font-size:.9rem; color:var(--ink-soft);
}
.hero-meta span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-meta svg{ width:15px; height:15px; color:var(--ember); flex:none; }

.domain-chip{
  display:inline-block; margin-bottom:1.4rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em;
  color:var(--ember-deep); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:.35rem .9rem;
}

/* --- Leistungen ------------------------------------------------------ */
.services{ position:relative; background:var(--sand); overflow:clip; }
.glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--glow), transparent 65%);
  pointer-events:none; z-index:0; opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .5s var(--ease);
}
.services.glow-on .glow{ opacity:1; }
.services .wrap{ position:relative; z-index:1; }

.cards{
  display:grid; gap:1.3rem; margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
}
.card{
  position:relative; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.7rem 1.6rem;
  box-shadow:var(--shadow-rest);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; left:1.7rem; right:auto; top:0;
  width:34px; height:3px; border-radius:0 0 3px 3px;
  background:var(--ember);
  transition:width .4s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--ember-soft); }
.card:hover::before{ width:72px; }
.card .icon{
  width:44px; height:44px; border-radius:12px;
  background:var(--ember-soft); color:var(--ember-deep);
  display:grid; place-items:center; margin-bottom:1.1rem;
}
.card .icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.45em; }
.card p{ color:var(--ink-soft); font-size:.97rem; margin:0; }

/* --- Über mich ------------------------------------------------------- */
.about .wrap{
  display:grid; gap:3rem; align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
@media (max-width:820px){ .about .wrap{ grid-template-columns:1fr; } }
.about-side{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.7rem 1.6rem;
  box-shadow:var(--shadow-rest);
}
.about-side h3{ font-size:1.02rem; font-family:var(--sans); font-weight:700; letter-spacing:.01em; }
.about-side ul{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.75rem; }
.about-side li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.about-side li svg{ width:17px; height:17px; color:var(--ember); flex:none; margin-top:.2rem; }

/* --- Ablauf ----------------------------------------------------------- */
.process{ background:var(--sand); }
.steps{
  counter-reset:step;
  display:grid; gap:1.3rem; margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.step{
  counter-increment:step;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-rest); position:relative;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--serif); font-size:2.4rem; font-weight:600;
  color:var(--ember-soft); line-height:1; display:block; margin-bottom:.7rem;
}
.step h3{ font-size:1.08rem; }
.step p{ color:var(--ink-soft); font-size:.94rem; margin:0; }

/* --- Preise ------------------------------------------------------------ */
.price-grid{
  display:grid; gap:1.3rem; margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.price{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.7rem 1.6rem;
  box-shadow:var(--shadow-rest); display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.price:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--ember-soft); }
.price .amount{
  font-family:var(--serif); font-size:1.9rem; font-weight:600; color:var(--ember-deep);
  margin:.2rem 0 .1rem;
}
.price .amount small{ font-family:var(--sans); font-size:.85rem; font-weight:400; color:var(--ink-soft); }
.price p{ color:var(--ink-soft); font-size:.95rem; margin:.6rem 0 0; }
.price-note{
  margin-top:1.8rem; font-size:.95rem; color:var(--ink-soft); max-width:64ch;
}

/* --- Kontakt ------------------------------------------------------------ */
.contact .wrap{
  display:grid; gap:3rem; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}
@media (max-width:820px){ .contact .wrap{ grid-template-columns:1fr; } }
form{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.9rem 1.8rem;
  box-shadow:var(--shadow-rest);
}
.field{ margin-bottom:1.2rem; }
label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:.4rem; }
input[type=text],input[type=email],textarea{
  width:100%; font:inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:.75rem .9rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input:focus,textarea:focus{
  outline:none; border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(169,84,31,.15);
}
textarea{ min-height:140px; resize:vertical; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); margin-bottom:1.4rem; }
.consent input{ margin-top:.25rem; accent-color:var(--ember); width:1.05rem; height:1.05rem; flex:none; }
.consent label{ font-weight:400; margin:0; }
.form-hint{ font-size:.82rem; color:var(--ink-soft); margin-top:1rem; }
.mail-alt{ margin-top:1.6rem; font-size:.95rem; color:var(--ink-soft); }
.mail-alt .js-mail{ font-weight:600; }

/* --- Impressum / Datenschutz (Unterseiten) -------------------------------- */
.legal{ padding:4.5rem 0 5.5rem; }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(1.8rem, 3.4vw, 2.4rem); }
.legal h2{ font-size:1.15rem; font-family:var(--sans); font-weight:700; margin-top:2em; }
.legal p{ font-size:.96rem; color:var(--ink-soft); }
.legal-block{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin:1.2rem 0; font-size:.98rem;
  box-shadow:var(--shadow-rest);
}
.legal-block p{ color:var(--ink); }
.legal-block .js-addr span{ display:block; }

/* --- Footer --------------------------------------------------------------- */
footer.site{
  background:var(--ink); color:#CFC6BB; padding:2.6rem 0;
  font-size:.92rem;
}
footer .wrap{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; }
footer a{ color:#EAD9C4; }
footer a:hover{ color:#fff; }
footer .fbrand{ font-family:var(--serif); color:#F5EEE3; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
footer .fbrand svg{ color:#D89B6A; }
footer nav{ display:flex; gap:1.4rem; }

/* --- Reveal on scroll ------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* --- Reduced Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .blob{ animation:none !important; }
  .glow{ display:none; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card,.price,.cta{ transition:none; }
  .card:hover,.price:hover,.cta:hover{ transform:none; }
}
/* Blur ist auf Mobil teuer, daher Blobs verkleinern und beruhigen */
@media (max-width:640px){
  .blobs{ filter:blur(48px); opacity:.65; }
  .glow{ display:none; }
}