/* ===========================================================================
   FIRMA KANNENGIESSER — Corporate Design
   Basis Schwarz/Weiß, genau ein Akzent: gedecktes Gold.
   Alle Werte als CSS-Variablen — Farb- oder Schriftwechsel ist eine Zeile.
   =========================================================================== */
:root{
  /* --- Farben ---------------------------------------------------------- */
  --ink:        #111111;   /* Primär, Schwarz                              */
  --ink-soft:   #3b3a38;   /* Fließtext                                    */
  --ink-mute:   #6d6b66;   /* Sekundärtext                                 */
  --line:       #e3e1dc;   /* Trennlinien                                  */
  --paper:      #ffffff;
  --paper-warm: #f7f6f3;   /* leicht abgesetzte Fläche                     */

  --gold:       #b3944f;   /* Akzent auf dunklem Grund                     */
  --gold-deep:  #7d6524;   /* Akzent als Text auf Weiß (Kontrast 5.3:1)    */
  --gold-tint:  #f2ecdd;   /* Akzent als Fläche                            */

  /* --- Typografie ------------------------------------------------------ */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Maße ------------------------------------------------------------ */
  --wrap: 1080px;
  --pad:  clamp(1.25rem, 5vw, 2.5rem);
  --sect: clamp(3.5rem, 9vw, 6.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }

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

h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.15; margin:0}
h1{font-size:clamp(2.1rem,6vw,3.6rem); letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem); letter-spacing:-.01em}
h3{font-size:1.15rem; letter-spacing:0}
p{margin:0 0 1.1em}
a{color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--gold-deep)}
img,svg{max-width:100%; height:auto}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.section--warm{background:var(--paper-warm); border-block:1px solid var(--line)}
.section--ink{background:var(--ink); color:rgba(255,255,255,.78)}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .eyebrow{color:var(--gold)}
.section--ink .eyebrow::after{background:rgba(255,255,255,.22)}
.section--ink .ticks li::before{border-color:var(--gold); background:transparent}
.section--ink a:not(.btn){color:#fff}

/* Sprungmarke für Tastatur/Screenreader */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.75rem 1.25rem; z-index:200}
.skip:focus{left:.5rem; top:.5rem}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px}

/* --- Eyebrow / Abschnittslabel ----------------------------------------- */
.eyebrow{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin:0 0 .9rem;
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:5rem}

/* --- Wortmarke (Platzhalter bis das Vektor-Logo vorliegt) --------------- */
.mark{display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink)}
.mark__icon{height:2.5em; width:auto; flex:none; color:inherit; display:block}
.mark__text{display:block; font-family:var(--serif); font-size:1.06rem; line-height:1.15; letter-spacing:.02em}
.mark__text small{
  display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:.2rem; font-weight:600;
}

/* --- Kopfzeile ---------------------------------------------------------- */
.head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:68px}
.nav{display:none; gap:1.9rem}
.nav a{font-size:.9rem; text-decoration:none; color:var(--ink-soft); letter-spacing:.01em}
.nav a:hover{color:var(--ink)}
@media(min-width:900px){ .nav{display:flex} }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.4rem; font-size:.92rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border:1px solid var(--ink); background:var(--ink); color:#fff;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:#fff}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--light{background:#fff; border-color:#fff; color:var(--ink)}
.btn--light:hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn--outline-light{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}
.btn--outline-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:.6rem 1.05rem; font-size:.85rem}
.head .btn{display:none}
@media(min-width:560px){ .head .btn{display:inline-flex} }

/* --- Hero --------------------------------------------------------------- */
.hero{background:var(--ink); color:#fff; padding-block:clamp(3.5rem,10vw,7rem); position:relative; overflow:hidden}
.hero > .wrap{position:relative; z-index:1}
.hero__watermark{
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  height:min(72%,430px); width:auto; color:#fff; opacity:.055;
  pointer-events:none; display:none;
}
@media(min-width:1040px){ .hero__watermark{display:block} }
.hero h1{color:#fff}
.hero__lead{font-size:clamp(1.05rem,2.2vw,1.25rem); color:rgba(255,255,255,.78); max-width:44ch; margin-top:1.4rem}
.hero__rule{width:56px; height:2px; background:var(--gold); margin-bottom:1.8rem}
.hero__kicker{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0 0 1.1rem;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem}
.hero__facts{
  display:grid; gap:1.5rem; margin-top:3.4rem;
  border-top:1px solid rgba(255,255,255,.16); padding-top:2rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){ .hero__facts{grid-template-columns:repeat(3,1fr); gap:2rem} }
.fact strong{display:block; font-family:var(--serif); font-size:1.5rem; color:#fff; line-height:1.2}
.fact span{font-size:.88rem; color:rgba(255,255,255,.6)}

/* --- Leistungen --------------------------------------------------------- */
.grid-services{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.6rem}
@media(min-width:620px){ .grid-services{grid-template-columns:repeat(2,1fr)} }
@media(min-width:940px){ .grid-services{grid-template-columns:repeat(3,1fr)} }
.service{background:var(--paper); padding:1.9rem 1.6rem; transition:background .18s ease}
.service:hover{background:var(--gold-tint)}
.service__no{
  font-family:var(--serif); font-size:.8rem; color:var(--gold-deep);
  letter-spacing:.08em; display:block; margin-bottom:.9rem;
}
.service h3{margin-bottom:.5rem}
.service p{font-size:.92rem; color:var(--ink-mute); margin:0}

/* --- Ablauf ------------------------------------------------------------- */
.steps{display:grid; gap:2.2rem; margin-top:2.8rem}
@media(min-width:780px){ .steps{grid-template-columns:repeat(3,1fr); gap:2.8rem} }
.step{border-top:2px solid var(--ink); padding-top:1.3rem}
.step__no{
  font-family:var(--serif); font-size:2.4rem; line-height:1; color:var(--gold-deep);
  display:block; margin-bottom:.6rem;
}
.step h3{margin-bottom:.45rem}
.step p{font-size:.95rem; color:var(--ink-mute); margin:0}

/* --- Zwei-Spalten-Block -------------------------------------------------- */
.split{display:grid; gap:2.6rem}
@media(min-width:860px){ .split{grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start} }
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.ticks li{position:relative; padding-left:1.75rem; font-size:.98rem}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.55rem; height:.55rem; border:1px solid var(--gold-deep); background:var(--gold-tint);
}

/* --- Kontakt ------------------------------------------------------------- */
.contact{display:grid; gap:2.6rem; margin-top:2.6rem}
@media(min-width:860px){ .contact{grid-template-columns:1fr 1fr; gap:4.5rem} }
.dl{margin:0; display:grid; gap:1.5rem}
.dl dt{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600; margin-bottom:.25rem;
}
.dl dd{margin:0; font-size:1.12rem; color:var(--ink)}
.dl dd a{text-decoration:none; border-bottom:1px solid var(--line)}
.dl dd a:hover{border-color:var(--gold-deep)}
.card{background:var(--paper-warm); border:1px solid var(--line); padding:2rem 1.8rem}
.card h3{margin-bottom:.7rem}
.card p{font-size:.95rem; color:var(--ink-mute)}

/* --- Rechtstexte --------------------------------------------------------- */
.legal{padding-block:var(--sect); border-top:1px solid var(--line)}
.legal h2{margin-bottom:1.6rem}
.legal h3{margin:2rem 0 .5rem; font-size:1rem}
.legal p, .legal li{font-size:.92rem; color:var(--ink-mute); line-height:1.75}
.legal .cols{display:grid; gap:3.5rem}
@media(min-width:920px){ .legal .cols{grid-template-columns:1fr 1fr; gap:4.5rem} }
.note{
  background:var(--gold-tint); border-left:3px solid var(--gold-deep);
  padding:1rem 1.2rem; font-size:.88rem; color:var(--ink-soft); margin:1.2rem 0;
}

/* --- Fußzeile ------------------------------------------------------------ */
.foot{background:var(--ink); color:rgba(255,255,255,.62); padding-block:3rem; font-size:.88rem}
.foot a{color:rgba(255,255,255,.82); text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot__in{display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center}
.foot .mark{color:#fff}
.foot .mark__icon{color:var(--gold)}
.foot .mark__text small{color:rgba(255,255,255,.5)}
.foot nav{display:flex; flex-wrap:wrap; gap:1.4rem}

/* --- Mobiler Anrufbalken -------------------------------------------------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; background:var(--ink); border-top:1px solid rgba(255,255,255,.15);
}
.callbar a{
  flex:1; text-align:center; padding:.95rem .5rem; color:#fff; text-decoration:none;
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
}
.callbar a+a{border-left:1px solid rgba(255,255,255,.15); color:var(--gold)}
@media(min-width:560px){ .callbar{display:none} }
@media(max-width:559px){ body{padding-bottom:3.4rem} }

@media print{
  .head,.callbar,.hero__cta{display:none}
  body{color:#000; font-size:11pt}
  .hero{background:#fff; color:#000}
  .hero h1,.hero__lead{color:#000}
}

/* --- Unterseiten: schmales Kopfband ------------------------------------- */
.pagehead{background:var(--ink); color:rgba(255,255,255,.72); padding-block:clamp(2.6rem,7vw,4.2rem)}
.pagehead h1{color:#fff; font-size:clamp(1.9rem,4.5vw,2.9rem)}
.pagehead .eyebrow{color:var(--gold)}
.pagehead .eyebrow::after{background:rgba(255,255,255,.22)}
.pagehead p{margin:1rem 0 0; font-size:.95rem; max-width:52ch}
.back{display:inline-flex; align-items:center; gap:.45rem; margin-top:1.6rem;
      font-size:.9rem; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.back:hover{color:var(--gold); border-color:var(--gold)}

/* --- Rechtstexte auf Unterseiten ---------------------------------------- */
.legal--page{border-top:0}
.legal--page .cols{grid-template-columns:1fr}
@media(min-width:920px){ .legal--page .cols{grid-template-columns:1fr} }
.legal--page .cols > div{max-width:72ch}

/* --- Fußzeile: Urheberzeile --------------------------------------------- */
.foot__credit{margin:0; width:100%; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);
              display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between}
.foot__credit a{border-bottom:1px solid rgba(255,255,255,.28)}
.foot__credit a:hover{border-color:var(--gold)}

/* --- Mobil: größere Antippflächen ---------------------------------------- */
@media(max-width:720px){
  .nav a, .foot nav a{display:inline-block; padding-block:.6rem}
  .foot nav{gap:.2rem 1.4rem}
  .back{padding-block:.55rem}
  .dl dd a, .legal a, .foot__credit a{display:inline-block; padding-block:.4rem}
  .foot__credit{gap:.2rem 1.5rem}
}

/* ===========================================================================
   MOBILES MENÜ
   =========================================================================== */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; margin-right:-10px;
  background:none; border:0; cursor:pointer; color:var(--ink);
}
.burger span{
  display:block; height:2px; width:100%; background:currentColor;
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){ .burger{display:none} }

.menu{
  position:fixed; inset:0; z-index:90;
  background:var(--paper); padding:calc(68px + 1.5rem) var(--pad) calc(3.8rem + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1), visibility .26s;
  overflow-y:auto;
}
.menu[data-open="true"]{opacity:1; visibility:visible; transform:none}
@media(min-width:900px){ .menu{display:none} }
.menu nav{display:flex; flex-direction:column}
.menu nav a{
  font-family:var(--serif); font-size:1.5rem; color:var(--ink); text-decoration:none;
  padding:.85rem 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(8px);
}
.menu[data-open="true"] nav a{animation:menuIn .34s cubic-bezier(.2,.7,.3,1) forwards}
.menu[data-open="true"] nav a:nth-child(1){animation-delay:.05s}
.menu[data-open="true"] nav a:nth-child(2){animation-delay:.09s}
.menu[data-open="true"] nav a:nth-child(3){animation-delay:.13s}
.menu[data-open="true"] nav a:nth-child(4){animation-delay:.17s}
.menu[data-open="true"] nav a:nth-child(5){animation-delay:.21s}
.menu[data-open="true"] nav a:nth-child(6){animation-delay:.25s}
.menu[data-open="true"] nav a:nth-child(7){animation-delay:.29s}
@keyframes menuIn{to{opacity:1; transform:none}}
.menu__foot{margin-top:auto; padding-top:2rem; display:grid; gap:.7rem}
.menu__foot .btn{width:100%}
.menu__foot p{margin:0; font-size:.85rem; color:var(--ink-mute)}
body[data-menu="offen"]{overflow:hidden}

/* ===========================================================================
   BEWEGUNG
   =========================================================================== */
.head{transition:box-shadow .25s ease, background-color .25s ease}
.head[data-scrolled="true"]{box-shadow:0 1px 20px rgba(0,0,0,.07)}

.nav a{position:relative; padding-block:.2rem}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--gold-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after{transform:scaleX(1)}

.btn{position:relative; overflow:hidden}
.btn:active{transform:translateY(1px)}

.service{position:relative}
.service::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold-deep); transform:scaleY(0); transform-origin:top;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.service:hover::before{transform:scaleY(1)}
.service h3{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.service:hover h3{transform:translateX(4px)}

.step{position:relative}
.step__no{transition:color .3s ease}
.step:hover .step__no{color:var(--ink)}

.card{transition:border-color .3s ease, box-shadow .3s ease}
.card:hover{border-color:var(--gold-deep); box-shadow:0 6px 30px rgba(0,0,0,.05)}

.mark__icon{transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.mark:hover .mark__icon{transform:translateY(-2px) rotate(-2deg)}

/* Einblenden beim Scrollen */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}
.reveal-d1{transition-delay:.06s} .reveal-d2{transition-delay:.12s} .reveal-d3{transition-delay:.18s}
.reveal-d4{transition-delay:.24s} .reveal-d5{transition-delay:.30s} .reveal-d6{transition-delay:.36s}

/* Hero beim Laden */
.hero__kicker,.hero__rule,.hero h1,.hero__lead,.hero__cta,.hero__facts{
  opacity:0; transform:translateY(14px);
  animation:heroIn .8s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero__kicker{animation-delay:.05s}
.hero__rule{animation-delay:.12s}
.hero h1{animation-delay:.18s}
.hero__lead{animation-delay:.30s}
.hero__cta{animation-delay:.40s}
.hero__facts{animation-delay:.50s}
@keyframes heroIn{to{opacity:1; transform:none}}
.hero__watermark{opacity:0; animation:waterIn 1.4s ease .5s forwards}
@keyframes waterIn{to{opacity:.055}}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero__kicker,.hero__rule,.hero h1,.hero__lead,.hero__cta,.hero__facts,
  .hero__watermark,.menu[data-open="true"] nav a{animation:none; opacity:1; transform:none}
  .hero__watermark{opacity:.055}
  .menu{transition:opacity .01s}
}