/* =========================================================================
   Tischlerei Wieseneck — Demo-Website von BB IT Solutions
   Fiktives Unternehmen. Alle Inhalte dienen nur der Demonstration.

   Gestaltungsrichtung: "Werkstattpapier"
   Papierweiß + Tinte + Ocker, scharfe Kanten, Haarlinien statt Karten,
   Typografie als Hauptgestaltungsmittel. Bewusst keine Verläufe,
   keine Schattenspielereien, keine runden Container.

   Hinweis für den Produktivbetrieb: Schriften würden bei einem echten
   Kundenprojekt lokal eingebunden (DSGVO), nicht über Google Fonts.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:       #F4F1EA;
  --paper-2:     #EAE4D8;
  --paper-3:     #E0D8C7;
  --ink:         #1B1917;
  --ink-2:       #57514A;
  --ink-3:       #6E675E;
  --line:        #D5CDBE;
  --line-2:      #BCB19C;
  --ochre:       #8A5A1C;
  --ochre-warm:  #C08B45;
  --dark:        #211E1A;
  --dark-2:      #2B2721;
  --dark-line:   #3C372F;
  --dark-text:   #C3BAAB;

  --ff-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --bar: 34px;              /* Höhe der BB-Rückleiste */
  --head: 74px;             /* Höhe der Kopfzeile */
  --sec: clamp(64px, 8.5vw, 124px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Basis ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + var(--head) + 16px);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

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

img, svg{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{
  font-family: var(--ff-serif);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1{ font-size: clamp(2.3rem, 1.35rem + 3.6vw, 4rem); line-height:1.03; }
h2{ font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem); }
h3{ font-size: clamp(1.2rem, 1.02rem + .6vw, 1.5rem); line-height:1.22; }
h4{ font-size: 1.0625rem; font-family: var(--ff-sans); font-weight:600; letter-spacing:0; }

p{ margin: 0 0 1.15em; color: var(--ink-2); }
p:last-child{ margin-bottom:0; }

a{ color: var(--ochre); }

strong{ font-weight:600; color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
}

::selection{ background: var(--ochre); color: var(--paper); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-size:.9rem;
}
.skip:focus{ left: 8px; top: calc(var(--bar) + 8px); }

/* ---------- 3. Layout ---------- */
.wrap{
  width:100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow{ max-width: 860px; }

.section{ padding-block: var(--sec); }
.section--tight{ padding-block: clamp(48px, 6vw, 84px); }

.band-paper2{ background: var(--paper-2); }
.band-dark{ background: var(--dark); color: var(--dark-text); }
.band-dark h2, .band-dark h3, .band-dark h4{ color: var(--paper); }
.band-dark p{ color: var(--dark-text); }

.hr{ height:1px; background: var(--line); border:0; margin:0; }

/* ---------- 4. Typografische Bausteine ---------- */
.label{
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1.1rem;
  display: block;
}
.band-dark .label{ color: var(--ochre-warm); }

.lead{
  font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}

.meta{
  font-size: .82rem;
  color: var(--ink-3);
  letter-spacing: .01em;
}

.num{
  font-family: var(--ff-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ochre);
  font-variant-numeric: tabular-nums;
}

/* Textlink mit Unterstrich-Animation */
.tlink{
  display:inline-block;
  color: var(--ink);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  padding-bottom:3px;
  background-image: linear-gradient(var(--ochre), var(--ochre));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease), color .25s;
}
.tlink:hover{ color: var(--ochre); background-size: 30% 1px; }
.tlink .arw{ display:inline-block; transition: transform .3s var(--ease); }
.tlink:hover .arw{ transform: translateX(4px); }
.band-dark .tlink{ color: var(--paper); background-image: linear-gradient(var(--ochre-warm), var(--ochre-warm)); }
.band-dark .tlink:hover{ color: var(--ochre-warm); }

/* Buttons: rechteckig, ruhig, kein Verlauf */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--ff-sans);
  font-size:.92rem; font-weight:600; letter-spacing:.01em;
  padding: 14px 24px;
  border:1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  text-decoration:none;
  cursor:pointer;
  transition: background-color .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover{ background: var(--ochre); border-color: var(--ochre); color:#fff; }
.btn:active{ transform: translateY(1px); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.band-dark .btn{ background: var(--paper); color: var(--dark); border-color: var(--paper); }
.band-dark .btn:hover{ background: var(--ochre-warm); border-color: var(--ochre-warm); color: var(--dark); }
.band-dark .btn--ghost{ background:transparent; color: var(--paper); border-color: var(--dark-line); }
.band-dark .btn--ghost:hover{ background: var(--paper); color: var(--dark); border-color: var(--paper); }

.btn-row{ display:flex; flex-wrap:wrap; gap: 14px 20px; align-items:center; }

/* ---------- 5. Kopfzeile ---------- */
.topbar{
  position: sticky;
  top: var(--bar);
  z-index: 900;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background-color .3s;
}
.topbar.is-stuck{ box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(27,25,23,.55); }

.topbar__inner{
  height: var(--head);
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand__mark{ flex:none; width:30px; height:30px; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family: var(--ff-serif);
  font-size: 1.22rem;
  letter-spacing: -.01em;
}
.brand__sub{
  font-size: .58rem; font-weight:600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-3); margin-top:5px;
}

.nav{ display:flex; align-items:center; gap: 30px; }
.nav a{
  position:relative;
  font-size:.92rem; font-weight:500; color: var(--ink-2);
  text-decoration:none; padding: 6px 0;
  transition: color .22s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--ochre);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav a:hover{ color: var(--ink); }
.nav a:hover::after{ transform: scaleX(1); }
.nav a[aria-current="page"]{ color: var(--ink); }
.nav a[aria-current="page"]::after{ transform: scaleX(1); background: var(--ink); }

.topbar__side{ display:flex; align-items:center; gap: 20px; }
.topbar__tel{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border-left:1px solid var(--line); padding-left:20px; line-height:1.2;
}
.topbar__tel small{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.topbar__tel b{ font-size:.95rem; font-weight:600; transition: color .22s; }
.topbar__tel:hover b{ color: var(--ochre); }

/* Burger */
.burger{
  display:none;
  width:44px; height:44px; margin-right:-10px;
  border:0; background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:22px; height:1.5px; background: var(--ink);
  position:relative; transition: background-color .2s;
}
.burger span::before, .burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background: var(--ink);
  transition: transform .32s var(--ease), top .25s var(--ease);
}
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background: transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }

/* Mobilmenü */
.mnav{
  position: fixed;
  inset: calc(var(--bar) + var(--head)) 0 0 0;
  background: var(--paper);
  z-index: 890;
  padding: 8px var(--pad) 40px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.mnav.is-open{ display:flex; }
.mnav a.mnav__item{
  display:flex; align-items:baseline; gap:14px;
  font-family: var(--ff-serif); font-size: 1.6rem; color: var(--ink);
  text-decoration:none; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.mnav a.mnav__item .num{ font-size:.68rem; }
.mnav__foot{ margin-top: 32px; }
.mnav__foot a{ text-decoration:none; }
.mnav__tel{ font-family: var(--ff-serif); font-size:1.5rem; color:var(--ink); text-decoration:none; display:block; }
body.is-locked{ overflow:hidden; }

@media (max-width: 1000px){
  .nav, .topbar__tel{ display:none; }
  .burger{ display:flex; }
}

/* ---------- 6. Hero ---------- */
.hero{ border-bottom: 1px solid var(--line); }
.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.hero__text{
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px);
  padding-right: clamp(0px, 3vw, 56px);
  align-self:center;
}
.hero h1{ margin-bottom: .38em; max-width: 15ch; }
.hero__lead{ max-width: 46ch; }
.hero__facts{
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display:flex; flex-wrap:wrap; gap: 8px 28px;
  font-size:.82rem; color: var(--ink-3);
}
.hero__facts span{ display:inline-flex; align-items:center; gap:9px; }
.hero__facts span::before{
  content:""; width:5px; height:5px; background: var(--ochre); flex:none;
}
.hero__figure{ position:relative; min-height: 320px; }
.hero__figure img{ width:100%; height:100%; object-fit: cover; }

@media (min-width: 900px){
  /* Volle Breite, aber die linke Kante bleibt exakt auf dem Raster
     des zentrierten Containers – sonst steht der Hero neben allem anderen. */
  .hero .wrap{
    max-width: none;
    padding-left: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
    padding-right: 0;
  }
  .hero__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 44%); min-height: 72vh; }
  .hero__text{ padding-right: 0; }
  .hero__inner{
    width: 100%;
    max-width: 640px;
    padding-right: clamp(32px, 4vw, 72px);
  }
  .hero__figure{ min-height: 100%; }
}
@media (max-width: 899px){
  .hero__figure{
    margin-inline: calc(var(--pad) * -1);
    height: clamp(230px, 40vh, 360px);
    min-height: 0;
  }
}

/* Bildunterschrift / Platzhalter-Kennzeichnung */
.figcap{
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 10px;
  display:flex; align-items:center; gap:9px;
}
.figcap::before{ content:""; width:16px; height:1px; background: var(--line-2); flex:none; }
.hero__figure .figcap{
  position:absolute; left:0; bottom:0; margin:0;
  background: var(--paper); padding: 8px 16px 8px 14px; color: var(--ink-3);
}
.hero__figure .figcap::before{ display:none; }

/* ---------- 7. Leistungsverzeichnis (Zeilen statt Karten) ---------- */
.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0 8px;
  align-items:start;
  padding: 26px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color: var(--ink);
  transition: background-color .3s var(--ease), padding-inline .3s var(--ease);
}
.svc:hover{ background: var(--paper-2); padding-inline: 18px; }
.svc__num{ padding-top: .55em; }
.svc__body{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 24px; align-items:baseline; }
.svc__title{ font-family: var(--ff-serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height:1.15; }
.svc__desc{ grid-column:1/2; font-size:.95rem; color: var(--ink-2); margin:0; max-width: 62ch; }
.svc__go{
  grid-row: 1 / span 2; grid-column: 2/3;
  align-self:center;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; color: var(--ochre);
  display:inline-flex; align-items:center; gap:8px;
  opacity:0; transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.svc:hover .svc__go, .svc:focus-visible .svc__go{ opacity:1; transform:none; }
@media (max-width: 700px){
  .svc{ grid-template-columns: 48px minmax(0,1fr); padding: 20px 0; }
  .svc__body{ grid-template-columns: 1fr; }
  .svc__go{ display:none; }
}

/* ---------- 8. Kopfblock zweispaltig ---------- */
.split{
  display:grid; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items:start;
}
@media (min-width: 860px){
  .split{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .split--even{ grid-template-columns: 1fr 1fr; }
  .split--wide-left{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.split__head h2{ position:sticky; top: calc(var(--bar) + var(--head) + 32px); }
@media (max-width: 859px){ .split__head h2{ position:static; } }

/* ---------- 9. Werkstattband (dunkel) ---------- */
.shop{ position:relative; overflow:hidden; }
.shop__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; opacity:.22; pointer-events:none;
}
.shop .wrap{ position:relative; }
.shop__quote{
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.32;
  color: var(--paper);
  margin: 0 0 26px;
  max-width: 22ch;
  text-wrap: pretty;
}
.shop__sign{ font-size:.85rem; color: var(--dark-text); }
.shop__sign b{ color: var(--paper); font-weight:600; }

.facts{ margin:0; }
.facts div{
  display:grid; grid-template-columns: 1fr auto; gap: 6px 20px;
  padding: 14px 0; border-bottom:1px solid var(--dark-line);
  align-items:baseline;
}
.facts div:first-child{ border-top:1px solid var(--dark-line); }
.facts dt{ font-size:.9rem; color: var(--dark-text); }
.facts dd{
  margin:0; text-align:right;
  font-family: var(--ff-serif); font-size:1.15rem; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.facts dd small{ font-family: var(--ff-sans); font-size:.72rem; color: var(--dark-text); display:block; }

/* ---------- 10. Holzarten ---------- */
.woods{
  display:grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top:1px solid var(--line);
}
.wood{
  padding: 30px clamp(14px, 2vw, 26px) 26px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.wood:last-child{ border-right:0; }
.wood__disc{ width: 88px; height:88px; margin-bottom: 20px; }
.wood h3{ font-size:1.22rem; margin-bottom:.35em; }
.wood p{ font-size:.88rem; margin-bottom:.9em; }
.wood__spec{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px){
  .woods{ grid-template-columns: 1fr 1fr; }
  .wood:nth-child(2n){ border-right:0; }
  .wood__disc{ width:64px; height:64px; }
}

/* ---------- 11. Ablauf (Maßketten-Optik) ---------- */
.steps{
  display:grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--ink);
  counter-reset: step;
}
.step{
  position:relative;
  padding: 30px 26px 30px 0;
  border-bottom: 1px solid var(--line);
}
.step::before{
  content:""; position:absolute; top:-1px; left:0; width:1px; height:11px; background: var(--ink);
}
.step__no{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; color: var(--ochre);
  display:block; margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.step h3{ font-size:1.15rem; margin-bottom:.4em; }
.step p{ font-size:.9rem; margin-bottom:.7em; }
.step__dur{
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-3);
  border-top:1px solid var(--line); padding-top:10px; display:inline-block;
}
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } .step{ padding-right:0; } }

/* ---------- 12. Projekte ---------- */
.proj{
  display:grid; gap: clamp(22px, 4vw, 56px);
  grid-template-columns: 1fr;
  padding-block: clamp(36px, 5vw, 66px);
  border-bottom: 1px solid var(--line);
  align-items:center;
}
.proj:first-of-type{ border-top: 1px solid var(--line); }
@media (min-width: 820px){
  .proj{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .proj--flip .proj__fig{ order: 2; }
  .proj--flip .proj__body{ order: 1; }
}
.proj__fig{ position:relative; }
.proj__fig img{ width:100%; }
.proj__body h3{ font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); margin-bottom:.3em; }
.proj__meta{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-3);
  margin-bottom: 1.2em;
}
.proj__specs{ margin: 1.4em 0 0; border-top:1px solid var(--line); }
.proj__specs div{
  display:grid; grid-template-columns: 128px minmax(0,1fr); gap: 4px 16px;
  padding: 10px 0; border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.proj__specs dt{ color: var(--ink-3); }
.proj__specs dd{ margin:0; color: var(--ink); }
@media (max-width: 480px){
  .proj__specs div{ grid-template-columns: 1fr; padding: 9px 0; }
  .proj__specs dt{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
}

/* ---------- 13. Kundenstimmen ---------- */
.voices{ display:grid; gap:0; grid-template-columns:1fr; }
@media (min-width: 900px){ .voices{ grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); } }
.voice{ padding: 30px 0; border-bottom:1px solid var(--line); }
.voice:first-child, .voice:nth-child(2){ border-top:1px solid var(--line); }
@media (max-width: 899px){ .voice:nth-child(2){ border-top:0; } }
.voice blockquote{
  margin:0 0 16px;
  font-family: var(--ff-serif);
  font-size: clamp(1.08rem, 1rem + .45vw, 1.28rem);
  line-height:1.5; color: var(--ink);
  text-wrap: pretty;
}
.voice figcaption{ font-size:.8rem; color: var(--ink-3); }
.voice figcaption b{ color: var(--ink); font-weight:600; display:block; font-size:.85rem; }

/* ---------- 14. Kontaktband ---------- */
.contact-band{ border-top:1px solid var(--line); }
.cinfo{ margin:0; }
.cinfo div{
  display:grid; grid-template-columns: 130px minmax(0,1fr); gap:4px 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  align-items:baseline;
}
.cinfo div:first-child{ border-top:1px solid var(--line); }
.cinfo dt{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-3); }
.cinfo dd{ margin:0; font-size:.98rem; }
.cinfo dd a{ color: var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); }
.cinfo dd a:hover{ color: var(--ochre); border-color: var(--ochre); }
.cinfo dd small{ display:block; color: var(--ink-3); font-size:.82rem; }
@media (max-width: 520px){
  .cinfo div{ grid-template-columns: 1fr; }
}

/* ---------- 15. Formular ---------- */
.form{ display:grid; gap: 20px; }
.form__row{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width: 640px){ .form__row--2{ grid-template-columns: 1fr 1fr; } }
.field label{
  display:block; font-size:.76rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.field input, .field select, .field textarea{
  width:100%;
  font-family: var(--ff-sans); font-size:1rem; color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 13px 14px;
  transition: border-color .22s, background-color .22s;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E675E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; background-size: 11px;
  padding-right: 38px;
}
.field textarea{ min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--ochre); background: #fff;
  box-shadow: inset 0 0 0 1px var(--ochre);
}
.field--check{ display:flex; gap:12px; align-items:flex-start; }
.field--check input{ width:18px; height:18px; margin-top:3px; flex:none; accent-color: var(--ochre); }
.field--check label{ text-transform:none; letter-spacing:0; font-size:.86rem; font-weight:400; color: var(--ink-2); margin:0; }
.form__note{
  font-size:.8rem; color: var(--ink-3);
  border-left: 2px solid var(--ochre); padding-left: 14px;
}
.form__status{
  display:none; padding: 16px 18px;
  border:1px solid var(--ochre); background: var(--paper-2);
  font-size:.92rem; color: var(--ink);
}
.form__status.is-shown{ display:block; }

/* ---------- 16. Seitenkopf Unterseiten ---------- */
.phead{
  border-bottom:1px solid var(--line);
  padding-block: clamp(38px, 5vw, 76px) clamp(30px, 4vw, 56px);
}
.phead h1{ max-width: 18ch; margin-bottom:.3em; }
.crumb{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-3); margin-bottom: 1.6rem;
}
.crumb a{ color: var(--ink-3); text-decoration:none; }
.crumb a:hover{ color: var(--ochre); }
.crumb span{ margin-inline: 8px; color: var(--line-2); }

/* ---------- 17. Leistungsdetail ---------- */
.svc-detail{ padding-block: clamp(44px, 6vw, 88px); border-bottom:1px solid var(--line); }
.svc-detail:last-of-type{ border-bottom:0; }
.ticks{ list-style:none; margin: 0; padding:0; }
.ticks li{
  position:relative; padding: 11px 0 11px 26px;
  border-bottom:1px solid var(--line);
  font-size:.94rem; color: var(--ink-2);
}
.ticks li:first-child{ border-top:1px solid var(--line); }
.ticks li::before{
  content:""; position:absolute; left:0; top:19px;
  width:9px; height:1px; background: var(--ochre);
}
.pricebox{
  margin-top: 26px; padding: 20px 22px;
  background: var(--paper-2); border-left: 3px solid var(--ochre);
}
.pricebox b{ display:block; font-family: var(--ff-serif); font-size:1.3rem; font-weight:400; margin-bottom:4px; }
.pricebox span{ font-size:.84rem; color: var(--ink-3); }
.band-paper2 .pricebox{ background: var(--paper); }

/* ---------- 18. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding: 20px 0;
  font-family: var(--ff-serif); font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color: var(--ochre); }
.faq summary::after{
  content:"+"; font-family: var(--ff-sans); font-size:1.2rem; color: var(--ochre);
  flex:none; line-height:1; transition: transform .3s var(--ease);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq .faq__a{ padding: 0 0 22px; max-width: 68ch; }
.faq .faq__a p{ font-size:.95rem; }

/* ---------- 19. Team ---------- */
.team{ display:grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top:1px solid var(--line); }
.member{
  padding: 26px clamp(14px, 2vw, 28px) 26px 0;
  border-bottom:1px solid var(--line);
}
.member__mono{
  width: 62px; height: 62px; margin-bottom: 18px;
  display:flex; align-items:center; justify-content:center;
  background: var(--paper-2); border:1px solid var(--line);
  font-family: var(--ff-serif); font-size:1.2rem; color: var(--ochre);
  letter-spacing: .02em;
}
.member h3{ font-size:1.16rem; margin-bottom:.2em; }
.member__role{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ochre);
  margin-bottom: 1em; display:block;
}
.member p{ font-size:.88rem; }

/* ---------- 20. Chronik ---------- */
.chron{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.chron li{
  display:grid; grid-template-columns: 92px minmax(0,1fr); gap: 6px 24px;
  padding: 20px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.chron b{
  font-family: var(--ff-serif); font-size:1.2rem; font-weight:400; color: var(--ochre);
  font-variant-numeric: tabular-nums;
}
.chron p{ margin:0; font-size:.94rem; }
@media (max-width: 520px){ .chron li{ grid-template-columns: 1fr; gap:2px; } }

/* ---------- 21. Rechtstexte ---------- */
.legal{ max-width: 74ch; }
.legal h2{ font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: 2.2em; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-size:1.1rem; margin-top:1.8em; }
.legal ul{ padding-left: 20px; color: var(--ink-2); }
.legal li{ margin-bottom:.5em; }
.legal .callout{
  border-left:3px solid var(--ochre);
  background: var(--paper-2);
  padding: 20px 22px;
  margin-bottom: 2.4em;
}
.legal .callout p{ margin-bottom:.7em; }
.legal .callout p:last-child{ margin-bottom:0; }

/* ---------- 22. Fußzeile ---------- */
.footer{ background: var(--dark); color: var(--dark-text); padding-top: clamp(48px, 6vw, 80px); }
.footer a{ color: var(--dark-text); text-decoration:none; }
.footer a:hover{ color: var(--ochre-warm); }
.footer__grid{
  display:grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: 1fr;
  padding-bottom: clamp(36px, 4vw, 56px);
}
@media (min-width: 780px){ .footer__grid{ grid-template-columns: 1.5fr 1fr 1fr; } }
.footer .brand{ color: var(--paper); }
.footer .brand__sub{ color: var(--dark-text); }
.footer__fic{
  margin-top: 16px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color: var(--ochre-warm);
}
.footer__addr{ font-style: normal; margin-top: 18px; font-size:.9rem; line-height:1.8; }
.footer h4{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--paper); margin-bottom: 16px; }
.footer__list{ list-style:none; margin:0; padding:0; font-size:.92rem; line-height: 2.1; }
.footer__hours{ font-size:.9rem; line-height:1.9; margin:0; }
.footer__hours span{ display:flex; justify-content:space-between; gap:16px; max-width: 230px; }
.footer__hours span b{ color: var(--paper); font-weight:500; }

.footer__legal{
  border-top: 1px solid var(--dark-line);
  padding-block: 22px 28px;
  display:flex; flex-wrap:wrap; gap: 10px 28px; justify-content:space-between;
  font-size:.82rem;
}
.footer__legal nav{ display:flex; flex-wrap:wrap; gap: 10px 22px; }

/* Pflichtkennzeichnung — kleiner, aber klar lesbar */
.demo-note{
  border-top: 1px solid var(--dark-line);
  padding-block: 20px 30px;
}
.demo-note p{
  margin:0;
  font-size: .78rem;
  line-height: 1.7;
  color: #A79C8C;
  max-width: 92ch;
}
.demo-note b{ color: var(--paper); font-weight:600; }

/* ---------- 23. Bewegung ---------- */
/* Ohne JavaScript bleibt alles sichtbar (siehe <noscript> im Kopf jeder Seite). */
.rv{ opacity:0; transform: translateY(14px); }
.rv.is-in{ opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-d1.is-in{ transition-delay: .07s; }
.rv-d2.is-in{ transition-delay: .14s; }
.rv-d3.is-in{ transition-delay: .21s; }

@media (prefers-reduced-motion: reduce){
  .rv, .rv.is-in{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- 24. Druck ---------- */
@media print{
  .topbar, .mnav, .burger, #bb-demo-bar, .hero__figure{ display:none !important; }
  body{ background:#fff; color:#000; padding-top:0 !important; }
}