/*
Theme Name: Boden Renaissance
Theme URI: https://www.boden-renaissance.de/
Author: Boden Renaissance
Description: Eigenständiges Theme für Boden Renaissance, Willi Lange, Berlin.
             Die Seiteninhalte liegen in den Vorlagen page-*.php, nicht im Editor.
             Farben und Anmutung stammen aus dem Logo und dem Flyer des Betriebs.
Version: 1.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boden-renaissance
*/


/* ==========================================================================
   Boden Renaissance – Stylesheet
   Palette und Anmutung übernommen aus Logo und Flyer des Betriebs:
   Schwarz, Gold (#DFC15E), warmes Papierweiß. Fischgrät als Strukturmotiv.
   ========================================================================== */

:root{
  --ink:        #0E0D0C;
  --ink-2:      #171512;
  --ink-3:      #241F19;
  --gold:       #DFC15E;
  --gold-soft:  #F0DCA0;
  --gold-deep:  #7D6120;   /* dunkel genug für 4,5:1 auf hellem Grund */
  --paper:      #F8F5EF;
  --paper-2:    #F0EADD;
  --paper-3:    #E4DACA;
  --text:       #211E1A;
  --muted:      #6B6358;
  --muted-dark: #A79E8E;
  --line:       #DCD2C0;
  --line-dark:  rgba(223,193,94,.24);

  --wrap: 1160px;
  --measure: 38rem;   /* gemeinsame rechte Kante für Überschrift und Text */

  --f-display: "Cinzel", Georgia, serif;
  --f-head: "Spectral", Georgia, "Times New Roman", serif;
  --f-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;

  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  color-scheme: only light;
}

/* Holztextur aus dem Markenmaterial (Logo-/Flyer-Grund).
   Trägt alle dunklen Flächen: Kopf, Fuß, dunkle Abschnitte, CTA-Band.
   --holz-lqip ist der eingebettete Rückfall, solange holz.jpg lädt. */
:root{
  --holz: url("bilder/holz.jpg");
  --holz-lqip: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAUACgDASIAAhEBAxEB/8QAGQABAQEAAwAAAAAAAAAAAAAAAAIDAQQH/8QAHRAAAgIDAAMAAAAAAAAAAAAAAAECERIhMQNBgf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A88WzZRtGS6awfCKuUNOukuNeNGmS2TOsAOvJAP0AJvZcWwAOcnf0ZPAADMAAf//Z");
}


*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.006em;
  /* Deutsche Komposita sind länger als schmale Displays. Trennen statt
     überlaufen lassen; das lang="de" am html-Element liefert die Regeln. */
  overflow-wrap:break-word;
  hyphens:auto;
}
/* Der untere Wert richtet sich nach dem längsten deutschen Kompositum auf der
   Seite: „Datenschutzerklärung" muss bei 320 px in eine Zeile passen, mit Luft
   zum Rand und ohne Trennstrich. Alles darüber skaliert wie bisher. */
h1{ font-size:clamp(1.75rem,1.05rem + 3.2vw,3.6rem); }
h2{ font-size:clamp(1.65rem,1.15rem + 2vw,2.5rem); max-width:var(--measure); }
h3{ font-size:1.22rem; }
h4{ font-size:.95rem; }
p{ margin:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink); padding:.7rem 1.1rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

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

/* ------------------------------------------------------------------ Kopf */
.site-head{
  position:sticky; top:0; z-index:40;
  /* Bewusst ohne Holztextur: die Navileiste steht direkt über dem Hero-Foto,
     zwei Hölzer übereinander beißen sich. Flaches Schwarz trennt sauber. */
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
  color:var(--paper);
}
.site-head__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:.7rem 20px;
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
}
/* Wortmarke des Betriebs, freigestellt auf transparentem Grund */
.brand{ display:block; margin-right:auto; line-height:0; }
.brand__logo{ width:212px; height:auto; display:block; }
@media (max-width:520px){ .brand__logo{ width:168px; } }
.foot__logo{ width:230px; height:auto; display:block; margin-bottom:.9rem; }
.navtoggle{ position:absolute; opacity:0; pointer-events:none; }
.navbtn{ display:none; }

.nav{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.nav a{
  text-decoration:none; color:var(--paper-2);
  font-size:.9rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.55rem .7rem; border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--gold); }
.nav a.is-here{ color:var(--gold); border-bottom-color:var(--gold); }
.nav__tel{
  margin-left:.4rem; border:1px solid var(--gold) !important;
  color:var(--gold) !important; font-weight:600; white-space:nowrap;
}
.nav__tel:hover{ background:var(--gold); color:var(--ink) !important; }

@media (max-width:960px){
  .navbtn{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:40px; padding:9px 8px; cursor:pointer;
    border:1px solid var(--line-dark);
  }
  .navbtn span{ display:block; height:1.5px; background:var(--gold); }
  .nav{
    display:none; width:100%; flex-direction:column; align-items:stretch; gap:0;
    padding-top:.5rem;
  }
  .navtoggle:checked ~ .nav{ display:flex; }
  .nav a{ padding:.8rem .2rem; border-bottom:1px solid var(--line-dark); }
  .nav__tel{ margin:.7rem 0 .3rem; text-align:center; padding:.8rem !important; }
}

/* --------------------------------------------------------------- Bausteine */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

section{ padding-block:var(--s6); }
section > .wrap > * + *{ margin-top:var(--s3); }

.eyebrow{
  font-family:var(--f-display);
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 .9rem;
}
.dark .eyebrow,
.hero .eyebrow,
.band .eyebrow{ color:var(--gold); }   /* helles Gold auf dunklem Grund */

.lede{ font-size:1.2rem; color:var(--muted); max-width:var(--measure); }
.dark .lede{ color:var(--muted-dark); }

.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:1.05rem; }
.prose h2{ margin-top:var(--s4); }
/* Beschriftung innerhalb eines Fließtextes. Semantisch eine Überschrift
   (sonst entsteht ein Sprung in der Gliederung), optisch ein kleines Label. */
.prose h3,
.prose .label{
  margin-top:var(--s3); font-family:var(--f-body); font-size:1.05rem;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  max-width:none; color:var(--text);
}
.dark .prose .label{ color:#fff; }
.prose ul{ margin:0; padding-left:0; list-style:none; }
.prose ul li{ position:relative; padding-left:1.4rem; margin-top:.6rem; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:.5rem; height:.5rem; border-top:1.5px solid var(--gold-deep);
  border-right:1.5px solid var(--gold-deep); transform:rotate(45deg);
}
.prose strong{ color:var(--text); }

.dark{
  background:var(--ink); color:var(--paper-2);
  background-image:linear-gradient(rgba(14,13,12,.72), rgba(14,13,12,.82)),
                   var(--holz), var(--holz-lqip);
  background-size:cover; background-position:center;
}
.dark h1,.dark h2,.dark h3{ color:#fff; }
.dark .prose strong{ color:#fff; }
.dark .prose ul li::before{ border-color:var(--gold); }

.alt{ background:var(--paper-2); }

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

/* --------------------------------------------------------------- Buttons */
.actions{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.btn{
  display:inline-block; text-decoration:none; font-weight:600;
  font-size:.93rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.95rem 1.5rem; border:1px solid transparent; transition:background .15s, color .15s;
}
.btn--gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-soft); }
.btn--ghost{ border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:rgba(223,193,94,.12); }
.btn--dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--dark:hover{ background:var(--ink-3); }

.txtlink{
  font-weight:600; color:var(--gold-deep);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.26em;
}
.dark .txtlink{ color:var(--gold); }
.txtlink:hover{ color:var(--text); }
.dark .txtlink:hover{ color:#fff; }

/* ------------------------------------------------------------------ Hero */
.hero{
  background:var(--ink);
  /* Nur das Foto, darunter die eingebettete Mini-Vorschau als Rückfall.
     Kein Muster darüber — über einem Boden braucht es kein zweites Muster. */
  /* Nur die eingebettete Mini-Vorschau als Grund — das Foto selbst liegt als
     <img class="hero__bg"> darüber. */
  background-image:var(--lqip, none);
  background-size:cover;
  background-position:var(--pos, center 58%);
  background-repeat:no-repeat;
  color:var(--paper);
  border-bottom:1px solid var(--line-dark);
  padding-block:var(--s7) var(--s6);
  position:relative;
  /* Einheitliche Bandhöhe über alle Unterseiten hinweg */
  min-height:26rem; display:flex; align-items:center;
}
/* Das Hero-Foto. Als Bild statt als Hintergrund: so findet der Vorlade-Scanner
   es sofort, <picture> wählt WebP, und srcset die passende Breite. */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:var(--pos, center 58%);
}
.hero picture{ display:contents; }

/* Abdunklung: links dicht genug für weißen Text, rechts gibt sie das Foto frei */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(100deg, rgba(14,13,12,.97) 0%, rgba(14,13,12,.92) 38%,
                            rgba(14,13,12,.74) 68%, rgba(14,13,12,.55) 100%);
}
@media (max-width:780px){
  .hero::after{ background:linear-gradient(180deg, rgba(14,13,12,.93), rgba(14,13,12,.97)); }
}
.hero > .wrap{ position:relative; z-index:1; }
.hero h1{ color:#fff; max-width:22ch; }
.hero .lede{ color:var(--paper-2); font-size:1.22rem; margin-top:var(--s3); max-width:56ch; }
.hero .actions{ margin-top:var(--s4); }
.hero__phone{ font-family:var(--f-head); font-size:1.35rem; color:var(--gold); text-decoration:none; }
.hero__phone:hover{ color:#fff; }

.trustbar{
  /* Flach, ohne Textur: der Streifen grenzt oben an das Hero-Foto. */
  background:var(--ink-2);
  border-bottom:1px solid var(--line-dark); padding-block:.9rem;
}
.trustbar ul{
  /* margin zuerst, damit kein späteres Kurzschreiben die Zentrierung aufhebt */
  margin:0 auto; max-width:var(--wrap); padding:0 20px;
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem var(--s3);
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold);
}
.trustbar li{ display:flex; align-items:center; gap:.55rem; }
.trustbar li::before{
  content:""; width:.42rem; height:.42rem; background:var(--gold);
  transform:rotate(45deg); flex:none;
}

/* ------------------------------------------------------- Leistungs-Raster */
/* --------------------------------------------------------------------------
   RASTER-REGEL
   Keine auto-fit-Raster: die erzeugen bei ungerader Anzahl angebrochene
   Zeilen mit Leerfläche. Stattdessen feste Spaltenzahlen, die zur Anzahl der
   Elemente passen — 3er springen von 1 direkt auf 3, 4er und 8er von 1 auf 2
   auf 4. Damit ist jede Zeile auf jeder Bildschirmbreite voll.
   -------------------------------------------------------------------------- */
.svc-grid,
.cols,
.steps,
.gallery,
.split,
.foot__in,
.field--row{ display:grid; grid-template-columns:1fr; }

@media (min-width:620px){
  .svc-grid,
  .steps,
  .cols--2,
  .cols--4,
  .foot__in{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:700px){
  .gallery--2{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:780px){
  .split{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:940px){
  .cols--3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1040px){
  .svc-grid,
  .steps,
  .cols--4,
  .foot__in{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:520px){
  .field--row{ grid-template-columns:repeat(2,1fr); }
}

.svc-grid{ gap:1.1rem; }
.svc{
  background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:1.15rem var(--s3); text-decoration:none;
  transition:background .15s, border-color .15s;
}
.svc:hover{ background:#fff; border-color:var(--gold-deep); border-top-color:var(--gold-deep); }
.svc h3{ font-family:var(--f-head); }
.svc p{ color:var(--muted); font-size:.96rem; }
.svc__go{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600;
}
.svc--ask{ background:var(--paper-2); border-top-color:var(--line); }
.svc--ask:hover{ border-top-color:var(--gold-deep); }
.alt .svc{ background:var(--paper); }
.alt .svc--ask{ background:var(--paper-3); }

/* -------------------------------------------------------------- Merkmale */
.cols{ gap:var(--s4); }
.feat h3{ font-family:var(--f-head); margin-bottom:.5rem; }
.feat p{ color:var(--muted); }
.dark .feat p{ color:var(--muted-dark); }
.feat{ border-top:2px solid var(--gold); padding-top:1.1rem; }

/* ---------------------------------------------------------------- Ablauf */
.steps{ gap:var(--s4); counter-reset:step; }
.step{ counter-increment:step; }
.step::before{
  content:counter(step,decimal-leading-zero);
  display:block; font-family:var(--f-display); font-size:1.5rem;
  color:var(--gold-deep); margin-bottom:.5rem;
}
.dark .step::before{ color:var(--gold); }
.step h3{ font-family:var(--f-head); margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:.98rem; }
.dark .step p{ color:var(--muted-dark); }

/* ----------------------------------------------------------------- Zitat */
.quote{
  max-width:44rem; margin-block:var(--s5);
  border-left:3px solid var(--gold); padding:.2rem 0 .2rem var(--s3);
}
.quote p{
  font-family:var(--f-head); font-style:italic;
  font-size:clamp(1.25rem,1rem + 1vw,1.6rem); line-height:1.4; color:var(--text);
}
.dark .quote p{ color:#fff; }
.quote cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
}
.dark .quote cite{ color:var(--gold); }

/* ------------------------------------------------------------ Bildflächen */
.photo{
  margin:0; aspect-ratio:var(--ratio,4/3);
  background:var(--ink-2);
  background-image:linear-gradient(rgba(14,13,12,.45), rgba(14,13,12,.45)), var(--holz);
  background-size:cover;
  border:1px solid var(--line-dark);
  display:flex; align-items:flex-end; justify-content:flex-start;
  position:relative; overflow:hidden;
}
.photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,13,12,.5), rgba(14,13,12,.9));
}
.photo__note{
  position:relative; z-index:1; margin:.9rem 1rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); max-width:90%;
}
.photo--light{ background-color:var(--paper-3); }

/* Echtes Foto statt Platzhalter */
.photo--img{
  border-color:rgba(223,193,94,.35);
  background-image:var(--lqip, var(--holz));
  background-size:cover; background-position:center;
}
.photo--img::after{ display:none; }
.photo--img picture{ display:contents; }
.photo--img img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, center); }

/* Einspaltiger Block, wo (noch) kein passendes Foto existiert */
.onecol{ display:block; }

.split{ gap:var(--s5); align-items:center; }
.split--top{ align-items:start; }
.split--text-first > *:first-child{ order:0; }

.gallery{ gap:var(--s4); }

/* --------------------------------------------------------------- Projekte */
.proj{ border:1px solid var(--line); background:var(--paper); }
.proj > h3{ font-family:var(--f-head); padding:var(--s3) var(--s3) .7rem; }
.proj > dl{ padding:0 var(--s3) var(--s3); }
.proj dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; font-size:.95rem; }
.proj dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); padding-top:.28em; }
.proj dd{ margin:0; color:var(--muted); }

/* ------------------------------------------------------------------ Band */
.band{
  background:var(--ink);
  background-image:var(--holz), var(--holz-lqip);
  background-size:cover; background-position:center 40%;
  color:var(--paper); position:relative; padding-block:var(--s6);
}
.band::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,13,12,.78), rgba(14,13,12,.90)); }
.band__inner{ position:relative; z-index:1; max-width:var(--wrap); margin-inline:auto;
  padding-inline:20px; display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
.band h2{ color:#fff; }
.band p{ color:var(--paper-2); max-width:52ch; }

/* ------------------------------------------------------------- Formular */
.form{ display:grid; gap:var(--s3); max-width:38rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; padding:.8rem .9rem;
  border:1px solid var(--line); background:#fff; color:var(--text); border-radius:0;
}
.field textarea{ min-height:8rem; resize:vertical; }
.field--row{ gap:var(--s3); }
.check{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--muted); }
.check input{ margin-top:.28rem; }
.formnote{ font-size:.9rem; color:var(--muted); }

.callout{
  border:1px solid var(--line); border-left:3px solid var(--gold);
  background:var(--paper-2); padding:var(--s3); max-width:var(--measure);
}
.callout p + p{ margin-top:.8rem; }

.contactlist{ list-style:none; padding:0; margin:0; display:grid; gap:1.35rem; }
.contactlist dt{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.25rem;
}
.contactlist dd{ margin:0; }
.contactlist a{ font-family:var(--f-head); font-size:1.3rem; text-decoration:none; color:var(--text); }
.contactlist a:hover{ color:var(--gold-deep); }
/* Anschrift und Einsatzgebiet: gleiche Kante, gleiche Größe wie der Rest */
.contactlist address,
.contactlist__plain{ font-family:var(--f-body); font-size:1.05rem; color:var(--text); }
.contactlist__hinweis{
  display:block; margin-top:.2rem;
  font-family:var(--f-body); font-size:.9rem; color:var(--muted);
}

/* ------------------------------------------------------------------- Fuß */
.site-foot{
  background:var(--ink); color:var(--paper-2);
  background-image:linear-gradient(rgba(14,13,12,.80), rgba(14,13,12,.90)),
                   var(--holz), var(--holz-lqip);
  background-size:cover; background-position:center bottom;
  padding-block:var(--s5) 0; border-top:3px solid var(--gold);
}
.foot__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:20px;
  gap:var(--s4);
}
.foot__col h3{
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.9rem;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot__col a{ color:var(--paper-2); text-decoration:none; font-size:.95rem; }
.foot__col a:hover{ color:var(--gold); }
.foot__tag{ color:var(--muted-dark); font-size:.9rem; max-width:26ch; }
address{ font-style:normal; line-height:1.7; color:var(--text); }
.site-foot address{ font-size:.95rem; line-height:1.75; color:var(--paper-2); }
address a{ text-decoration:none; }
address a:hover{ color:var(--gold); }
.foot__legal{
  margin-top:var(--s5); border-top:1px solid var(--line-dark); padding:1.2rem 20px 6.5rem;
  max-width:var(--wrap); margin-inline:auto;
  display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  font-size:.85rem; color:var(--muted-dark);
}
.foot__legal a{ color:var(--muted-dark); }
.foot__legal a:hover{ color:var(--gold); }

/* ------------------------------------------------------- Mobile Rufleiste */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed;
    bottom:0; left:0; right:0; z-index:50;
    background:var(--ink); border-top:1px solid var(--gold);
  }
  .callbar a{
    padding:.95rem .5rem; text-align:center; text-decoration:none;
    font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
    color:var(--gold);
  }
  .callbar a + a{ background:var(--gold); color:var(--ink); }
  .foot__legal{ padding-bottom:5.5rem; }

  /* Die Rufleiste fährt erst hoch, wenn der Hero durchgescrollt ist. Sonst
     stehen zwei Handlungsaufforderungen gleichzeitig auf dem Schirm — die
     im Hero und die in der Leiste — und keine gewinnt.
     Die Klasse .js setzt ein Einzeiler im Seitenkopf: ohne Javascript steht
     die Leiste wie bisher von Anfang an da. */
  .js .callbar{ transform:translateY(100%); transition:transform .28s ease; }
  .js .callbar.sichtbar{ transform:none; }
}
/* „Aufmaß anfragen" brach auf schmalen Displays in zwei Zeilen um und machte
   die Leiste ungleich hoch. Sperrung und Grad etwas zurück, dann steht es. */
@media (max-width:430px){
  .callbar a{ font-size:.78rem; letter-spacing:.06em; padding-inline:.35rem; }
}
@media (max-width:359px){
  .callbar a{ font-size:.72rem; letter-spacing:.02em; padding-inline:.25rem; }
}
@media (prefers-reduced-motion:reduce){
  .js .callbar{ transition:none; }
}

@media (max-width:560px){
  section{ padding-block:var(--s5); }
  .hero{ padding-block:var(--s5) var(--s5); }
  /* Mehrzeilige Überschriften stehen auf schmalen Displays dichter
     übereinander als am Desktop — etwas mehr Durchschuss. */
  h1,h2{ line-height:1.2; }
  /* 22ch sind am Desktop ein guter Umbruch, auf dem Handy nimmt die Angabe
     der Zeile unnötig Breite weg. */
  .hero h1{ max-width:none; }
}



/* ==========================================================================
   BOXEN AUF GEMEINSAMER GRUNDLINIE
   Zusammengehörende Boxen teilen sich dieselben Zeilenhöhen: die längste
   Überschrift bestimmt die Höhe aller Überschriften, der längste Text die
   Höhe aller Texte. Dadurch startet in jeder Box derselbe Bestandteil auf
   derselben Höhe und die CTAs stehen in einer Linie — keine Treppenbildung.

   Umgesetzt mit subgrid: die Box übernimmt die Zeilen des Elterngitters,
   statt ihre Höhen selbst zu bestimmen. Kein Javascript, keine festen Höhen.
   ========================================================================== */

/* Überschrift · Text · Abschluss */
.svc{ grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:.6rem; }
/* Ziffer · Überschrift · Text */
.step{ grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:.45rem; }
/* Überschrift · Text */
.feat{ grid-row:span 2; display:grid; grid-template-rows:subgrid; row-gap:.5rem; }
/* Bild · Überschrift · Angaben */
.proj{ grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:0; }

/* Rückfall für Browser ohne subgrid: Überschriften auf zwei Zeilen Platz
   festlegen, damit der Text darunter trotzdem auf gleicher Höhe beginnt. */
@supports not (grid-template-rows: subgrid){
  .svc, .step, .feat, .proj{ display:flex; flex-direction:column; }
  .svc h3, .step h3, .feat h3, .proj h3{ min-height:2.5em; }
  .svc p, .feat p{ flex:1; }
}

/* ------------------------------------------- Abschnitt mit seitlichem Titel
   Überschrift links, Text rechts. Verhindert, dass ein längerer Textblock
   als schmale Spalte links steht und die rechte Hälfte leer bleibt. */
.sec2{ display:grid; gap:var(--s3) var(--s5); }
.sec2__head .eyebrow{ margin-bottom:.7rem; }
.sec2__head h2{ max-width:15ch; }
.sec2__body > * + *{ margin-top:1.05rem; }
@media (min-width:900px){
  .sec2{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); align-items:start; }
  .sec2__head{ position:sticky; top:6rem; }
}

/* --------------------------------------------------- Zeilen mit Seitentitel
   Für längere Textabschnitte, die sonst als schmale Spalte links stehen und
   die rechte Hälfte leer lassen. Schlagwort links, Text rechts. */
.zeilen{ display:grid; gap:0; margin-top:var(--s4); }
.zeile{
  display:grid; gap:.6rem var(--s5);
  padding-block:var(--s4);
  border-top:1px solid var(--line);
}
.zeile:last-child{ border-bottom:1px solid var(--line); }
.zeile h3{
  font-family:var(--f-head); font-size:1.3rem; text-transform:none;
  letter-spacing:-.006em; max-width:18ch; margin:0;
}
.zeile > div > * + *{ margin-top:.9rem; }
.zeile__anlass{ color:var(--muted); font-size:.95rem; font-style:italic; }
@media (min-width:900px){
  .zeile{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); }
  .zeile h3{ padding-top:.15rem; }
}
.dark .zeile{ border-color:var(--line-dark); }
.dark .zeile__anlass{ color:var(--muted-dark); }

/* -------------------------------------------- Trustbar auf kleinen Geräten
   Fünf Aussagen brechen auf dem Telefon in vier Zeilen um. Die drei
   wichtigsten reichen dort; der Rest steht ohnehin auf den Seiten. */
@media (max-width:560px){
  .trustbar li:nth-child(n+4){ display:none; }
}

/* Fußzeilen-Links auf dem Telefon auf Daumengröße bringen */
@media (max-width:760px){
  .foot__col ul{ gap:0; }
  .foot__col ul a{ display:block; padding-block:.7rem; border-bottom:1px solid var(--line-dark); }
  .foot__col ul li:last-child a{ border-bottom:0; }
  address a{ display:inline-block; padding-block:.35rem; }
}

/* ------------------------------------------------ Überlaufschutz im Raster
   Raster- und Flex-Kinder schrumpfen von Haus aus nicht unter ihren Inhalt.
   Ein langes Wort wie eine E-Mail-Adresse sprengt dadurch die Seite. */
.split > *, .cols > *, .svc-grid > *, .steps > *, .gallery > *,
.sec2 > *, .zeile > *, .contactlist, .contactlist > *, .contactlist dd,
.foot__in > *, .field--row > *, .field > *{ min-width:0; }

/* Formularfelder bringen eine Standardbreite von rund 20 Zeichen mit und
   sprengen damit schmale Spalten. */
input, select, textarea{ min-width:0; max-width:100%; }

.contactlist a, address, .foot__col a{ overflow-wrap:anywhere; }
@media (max-width:600px){
  .contactlist a{ font-size:1.15rem; }
}

/* ------------------------------------------ Querverweis auf den Unterseiten
   Sechs übrige Leistungen gehen als 1 / 2 / 3 Spalten glatt auf. Die Anfrage
   steht darunter über die gesamte Breite und schließt den Block ab. */
.mini-grid{
  display:grid; gap:.8rem; margin-top:var(--s3);
  grid-template-columns:1fr;
}
@media (min-width:560px){ .mini-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .mini-grid{ grid-template-columns:repeat(3,1fr); } }
.mini{
  display:flex; align-items:center; min-height:3.6rem;
  padding:.85rem 1.1rem; text-decoration:none;
  border:1px solid var(--line); border-top:2px solid var(--gold);
  background:var(--paper); color:var(--text); font-size:1.02rem;
  transition:background .15s, border-color .15s;
}
.mini:hover{ background:#fff; border-color:var(--gold-deep); border-top-color:var(--gold-deep); }
.mini--ask{
  grid-column:1 / -1; justify-content:center;
  background:var(--paper-2); border-top-color:var(--line);
  border-style:dashed;
  /* Eigener, dunklerer Grauton: --muted erreicht auf dem helleren Grund
     der .alt-Abschnitte die Kontrastschwelle von 4,5:1 nicht. */
  color:#615A4F;
}
.mini--ask:hover{ color:var(--text); border-color:var(--gold-deep); }
.alt .mini{ background:var(--paper); }
.alt .mini--ask{ background:var(--paper-3); }


/* ==========================================================================
   WORDPRESS-SPEZIFISCH
   ========================================================================== */

/* Admin-Leiste darf die feste Kopfleiste nicht überdecken */
.admin-bar .site-head{ top:32px; }
@media (max-width:782px){ .admin-bar .site-head{ top:46px; } }

/* Rückmeldung nach dem Absenden des Formulars */
.hinweis{
  margin:0 0 var(--s3);
  padding:1rem 1.15rem;
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  background:var(--paper-2);
  font-size:1rem;
}
.hinweis--fehler{ border-left-color:#9C3B24; }

/* Honigtopf gegen einfache Spam-Bots: für Menschen nicht vorhanden */
.honigtopf{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Standard-Klassen, die WordPress in Inhalten vergibt */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.alignleft{ float:left; margin:0 var(--s3) var(--s3) 0; }
.alignright{ float:right; margin:0 0 var(--s3) var(--s3); }
.aligncenter{ margin-inline:auto; }
.wp-caption-text{ font-size:.9rem; color:var(--muted); margin-top:.5rem; }