/*
Theme Name: Kfz-Sachverständigenbüro Breuer
Theme URI: https://www.kfz-breuer.com/
Author: Bergrath Marketing
Author URI: https://bergrath-marketing.de/
Description: Onepager für das Kfz-Sachverständigenbüro Thomas Breuer, Köln und Rheinland. Gestaltungsmotiv ist das Maßblatt: ein dunkles Messfeld im Hero, eine Zeitachse, die sich mit dem Scrollen füllt, und ein Maßblatt, das den Schaden Position für Position beziffert. Keine externen Dienste, Schriften und Icons liegen im Theme. Das Anfrageformular läuft über Contact Form 7.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breuer
Tags: one-column, block-patterns, full-site-editing, accessibility-ready, custom-colors
*/

/* ============================================================
   WordPress-Anpassungen
   Der Blockeditor bringt eigene Abstände und Hüllen mit. Hier
   werden genau die neutralisiert, die dem Entwurf im Weg stehen.

   Dieser Block steht bewusst VOR dem übernommenen Entwurfs-CSS.
   .wp-block-group und .wrap haben dieselbe Spezifität, bei
   Gleichstand entscheidet die Reihenfolge, und gewinnen soll
   immer der Entwurf. Erfahrung aus dem Theme Gustav Erb.
   ============================================================ */

.wp-site-blocks > * + *{margin-block-start:0}
.wp-site-blocks{padding:0}
.wp-block-group{margin:0}
:where(.wp-block-group) > * + *{margin-block-start:0}
.wp-block-image{margin:0}
.wp-block-image img{display:block;max-width:100%}
.wp-block-heading{margin:0}
.wp-block-list{margin:0;padding:0}
.wp-block-template-part{margin:0}

/* Ein svg ohne width und height ist 300 mal 150 Pixel groß. */
svg.ico{width:19px;height:19px}

/* Honigtopf im Formular: für Menschen unsichtbar, für Roboter ein Feld. */
.hp-feld{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* Formular ohne Contact Form 7: die direkten Wege statt eines toten Formulars */
.formular-ersatz{margin-top:18px;padding:16px 18px;border:1px solid var(--haar);border-radius:var(--r);background:var(--papier);font-size:15px;line-height:1.55}
.formular-ersatz a{color:var(--gruen);font-weight:600}

/* Im Entwurf waren die Feldnamen der Tabs <span>, im Editor sind es Absätze.
   .reiter-panel p würde ihnen sonst Größe und Abstand des Fließtexts geben. */
.reiter-panel p.feldname{font-size:10.5px;margin-top:0}

/* Knöpfe als Button-Blöcke. Die Klassen knopf, voll und leer sitzen am
   äußeren div des Blocks, gestaltet wird der Link darin (Regeln unten im
   Entwurfs-CSS, jeweils mit „> .wp-block-button__link“). Das div selbst
   bleibt eine unsichtbare Hülle. body erhöht die Spezifität, damit auch
   .dunkel .voll:hover die Hülle nicht einfärbt. */
body .wp-block-buttons > .wp-block-button.knopf{display:flex;min-height:0;padding:0;border:0;border-radius:0;background:none;gap:0;transform:none;transition:none;white-space:normal;cursor:auto}
.knopf > .wp-block-button__link{height:auto;word-break:normal;box-shadow:none}

/* Icons in Knöpfen und Schriftfeldern ohne SVG im Inhalt: die Klasse
   ico-telefon, ico-whatsapp oder ico-mail an Knopf oder Feld setzt das
   Symbol als Maske, gefärbt in der Schriftfarbe. Phosphor Icons, MIT. */
.ico-telefon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z'/%3E%3C/svg%3E")}
.ico-whatsapp{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M187.58,144.84l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88,40,40,0,0,0,40-40A8,8,0,0,0,187.58,144.84ZM152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155l14.61-9.74,23,11.48A24,24,0,0,1,152,176ZM128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E")}
.ico-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z'/%3E%3C/svg%3E")}
.knopf[class*="ico-"] > .wp-block-button__link::before,
.sf[class*="ico-"] > .wert::before{content:"";flex:none;width:19px;height:19px;background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.sf[class*="ico-"] > .wert::before{width:16px;height:16px;color:var(--gruen)}
.dunkel .sf[class*="ico-"] > .wert::before,.tafel .sf[class*="ico-"] > .wert::before{color:var(--mess)}

/* Im Schriftfeld sind Feldname und Wert Absätze. */
.sf p{max-width:none}

/* Blockstil „Offene Angabe“ (is-style-offen), in der Seitenleiste des
   Editors an- und abschaltbar. Im Schriftfeld wie im Entwurf: Gold
   unterstrichen. Auf den Pflichtseiten ein Vermerk mit goldenem Strich. */
.sf .wert.is-style-offen{width:fit-content;white-space:nowrap;color:var(--gruen);background-image:linear-gradient(var(--gold),var(--gold));background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%}
.dunkel .sf .wert.is-style-offen,.tafel .sf .wert.is-style-offen{color:var(--mess)}
.seite p.is-style-offen{border-left:3px solid var(--gold);padding-left:12px}

/* Eingeloggt liegt oben die Admin-Leiste von WordPress. Die feste Kopfzeile
   und das Maßblatt rücken um ihre Höhe nach unten, die Sprungziele verschiebt
   WordPress selbst (scroll-padding-top am html). Bis 600 px Breite scrollt
   die Leiste mit weg, dort bleibt die Kopfzeile oben. */
.admin-bar .kopf{top:var(--wp-admin--admin-bar--height,32px)}
.admin-bar .massblatt{top:calc(var(--kopf-unten) + 32px + var(--wp-admin--admin-bar--height,32px))}
@media(max-width:600px){.admin-bar .kopf{top:0}}

/* Pflichtseiten wie Impressum und Datenschutzerklärung */
.seite{padding-top:48px}
.seite .wrap{max-width:820px}
.seite h1{font-size:clamp(30px,7vw,44px);margin-bottom:24px}
.seite h2{font-size:clamp(21px,5vw,26px);margin:36px 0 12px;max-width:none}
.seite p,.seite li{max-width:66ch}
.seite p + p{margin-top:14px}
.seite a{color:var(--gruen)}

/* ============================================================
   Übernommen aus onepager/index.html (Revision 9), unverändert bis
   auf die Stellen, die im Blockeditor anders aufgebaut sind:
     - Einblendungen hängen an der Klasse js, der Editor zeigt alles
     - die zweite Zeile der Hero-Überschrift ist <strong>
     - Porträt und Arbeitsfoto sind Bildblöcke
     - die Kapitel sind Gruppen, ihre Stufe steht als Klasse stufe-N
     - die Tabs baut das Skript aus den Anlass-Gruppen auf
   Die Schrift steht in der theme.json, damit auch der Editor sie lädt.
   ============================================================ */

:root{
  --gruen:#004225;
  --gruen-tief:#00331c;
  --mess:#BFD441;
  --blass:#DCE8C8;
  --creme:#F8F7EF;
  --gold:#C9A646;
  --papier:#F6F5EC;
  --tinte:#0A1E14;
  --leise:#57685C;
  --haar:#D6DDCC;
  --rand:#7D8F82;
  --raster:rgba(0,66,37,.10);
  --r:16px;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-bahn:cubic-bezier(.77,0,.175,1);
  --ease-schub:cubic-bezier(.32,.72,0,1);
  --kopf-oben:68px;   /* Logozeile */
  --kopf-unten:56px;  /* Menü- und Knopfzeile */
}
@media(min-width:900px){:root{--kopf-oben:104px;--kopf-unten:64px}}

/* ================= Grundlage, mobil zuerst ================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Montserrat",system-ui,-apple-system,sans-serif;
  font-weight:400;font-size:16.5px;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
figure{margin:0}
button{font:inherit;color:inherit}
::selection{background:var(--mess);color:var(--gruen)}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:4px}
.dunkel :focus-visible,.tafel :focus-visible,.reiter :focus-visible{outline-color:var(--mess)}
html{scrollbar-color:var(--haar) var(--papier);scrollbar-width:thin}

.sprung{position:absolute;left:16px;top:-60px;z-index:100;background:var(--gruen);color:var(--creme);padding:10px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.sprung:focus{top:12px}

.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}
@media(min-width:1024px){.wrap{padding:0 32px}}
section{padding:28px 0;scroll-margin-top:calc(var(--kopf-unten) + 16px)}
@media(min-width:768px){section{padding:48px 0}}

h1,h2,h3{margin:0;text-wrap:balance;hyphens:none;color:var(--tinte)}
h1{font-size:clamp(38px,10vw,64px);font-weight:700;line-height:1.02;letter-spacing:-.045em}
h2{font-size:clamp(26px,6.4vw,38px);font-weight:700;line-height:1.1;letter-spacing:-.035em;max-width:22ch}
h3{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
p{margin:0;max-width:58ch}
.leise{color:var(--leise)}
.fussnote{font-size:13px;line-height:1.5;color:var(--leise);max-width:58ch}
.feldname{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}

/* offene Angaben: Gold markiert, Text bleibt lesbar */
.offen{color:var(--gruen);font-weight:600;white-space:nowrap;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%}
.tafel .offen,.dunkel .offen{color:var(--mess)}

.karte{background:var(--creme);border:1px solid var(--haar);border-radius:var(--r);padding:24px}
@media(min-width:640px){.karte{padding:32px}}
@media(min-width:1024px){.karte{padding:40px}}

/* ================= Knöpfe ================= */
.reihe{display:flex;flex-wrap:wrap;gap:12px}
.knopf,.knopf > .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;border-radius:var(--r);border:1px solid var(--gruen);
  font:600 16px/1.2 "Montserrat",system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 140ms var(--ease)}
.knopf:active,.knopf > .wp-block-button__link:active{transform:scale(.97)}
.knopf.klein{min-height:42px;padding:9px 16px;font-size:14.5px;gap:8px}
.voll,.voll > .wp-block-button__link{background:var(--gruen);color:var(--creme)}
.leer,.leer > .wp-block-button__link{background:transparent;color:var(--gruen)}
.dunkel .voll,.tafel .voll,.reiter .voll,.dunkel .voll > .wp-block-button__link,.tafel .voll > .wp-block-button__link{background:var(--mess);color:var(--gruen);border-color:var(--mess)}
.dunkel .leer,.tafel .leer,.reiter .leer,.dunkel .leer > .wp-block-button__link,.tafel .leer > .wp-block-button__link{color:var(--creme);border-color:rgba(248,247,239,.5)}
@media(hover:hover) and (pointer:fine){
  .voll:hover,.voll > .wp-block-button__link:hover{background:var(--gruen-tief);border-color:var(--gruen-tief)}
  .leer:hover,.leer > .wp-block-button__link:hover{background:rgba(0,66,37,.07)}
  .dunkel .voll:hover,.tafel .voll:hover,.reiter .voll:hover,.dunkel .voll > .wp-block-button__link:hover,.tafel .voll > .wp-block-button__link:hover{background:#cde055;border-color:#cde055}
  .dunkel .leer:hover,.tafel .leer:hover,.reiter .leer:hover,.dunkel .leer > .wp-block-button__link:hover,.tafel .leer > .wp-block-button__link:hover{background:rgba(248,247,239,.08);border-color:var(--creme)}
}
.ico{width:19px;height:19px;flex:none;fill:currentColor}
.knopf.klein .ico{width:17px;height:17px}
@media(max-width:439px){.reihe .knopf,.reihe .knopf > .wp-block-button__link{flex:1 1 100%}}

/* ================= Kopfzeile: Logo oben mittig, darunter Menü und Knöpfe ================= */
.kopf{position:fixed;top:0;left:0;right:0;z-index:40;
  background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--haar);
  transition:transform 380ms var(--ease-schub)}
.kopf-platz{height:calc(var(--kopf-oben) + var(--kopf-unten))}
.kopf-oben{height:var(--kopf-oben);display:flex;align-items:center;justify-content:center;transition:opacity 240ms ease}
.kopf-oben img{height:46px;width:auto}
.kopf-unten{height:var(--kopf-unten);display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.kopf-klein{opacity:0;visibility:hidden;transition:opacity 240ms ease,visibility 0s linear 240ms}
.kopf-klein img{height:24px;width:auto}
.kopf nav{display:none}
.kopf-knoepfe{display:flex;gap:8px;justify-content:flex-end}
.kopf-knoepfe .wa-text{display:none}
@media(min-width:400px){.kopf-knoepfe .wa-text{display:inline}}
@media(min-width:900px){
  .kopf-oben img{height:72px}
  .kopf-unten{grid-template-columns:1fr auto 1fr}
  .kopf nav{display:flex;gap:32px;justify-content:center}
  .kopf nav a{font-size:14.5px;font-weight:500;color:var(--leise);text-decoration:none;transition:color 160ms ease}
  .kopf nav a:hover{color:var(--gruen)}
  .kopf-klein img{height:28px}
}
/* beim Scrollen: die Logozeile gleitet hinaus, das kleine Logo erscheint */
.kopf.schmal{transform:translateY(calc(-1 * var(--kopf-oben)))}
.kopf.schmal .kopf-oben{opacity:0}
.kopf.schmal .kopf-klein{opacity:1;visibility:visible;transition:opacity 240ms ease 120ms}
/* mobil während der Geschichte: die Leiste unten trägt den Anruf, die Kopfzeile tritt ganz zurück */
@media(max-width:959px){
  body.leiste-an .kopf{transform:translateY(-100%)}
}

/* ================= Übergangsband ================= */
.band{height:56px;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(58% 70% at 50% 50%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%);
  mask-image:radial-gradient(58% 70% at 50% 50%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%)}
@media(min-width:768px){.band{height:104px}}

/* ================= Schriftfeld und Bildfeld ================= */
.schriftfeld{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--haar);border:1px solid var(--haar);border-radius:var(--r);overflow:hidden}
.sf{position:relative;background:var(--creme);padding:12px 16px 14px;min-width:0}
.sf.breit{grid-column:1/-1}
.sf .feldname{color:var(--leise);margin-bottom:3px}
.sf .wert{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--tinte);display:flex;align-items:center;gap:8px}
.sf .wert a{text-decoration:none}
.sf .wert a[href^="tel:"]{white-space:nowrap}
.sf .wert a[href^="mailto:"]{overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){.sf .wert a:hover{text-decoration:underline;text-underline-offset:3px}}
.sf .ico{width:16px;height:16px;color:var(--gruen)}
.sf.kontakt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}
.sf.kontakt .offen{background-image:none}
.dunkel .schriftfeld,.tafel .schriftfeld{background:rgba(248,247,239,.18);border-color:rgba(248,247,239,.18)}
.dunkel .sf,.tafel .sf{background:var(--gruen)}
.dunkel .sf .feldname,.tafel .sf .feldname{color:rgba(191,212,65,.85)}
.dunkel .sf .wert,.tafel .sf .wert{color:var(--creme)}
.dunkel .sf .ico,.tafel .sf .ico{color:var(--mess)}

.bildflaeche{position:relative;display:grid;place-items:center;background-color:var(--papier);
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:26px 26px}
.bildflaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bildnotiz{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gruen);text-align:center;
  background-image:linear-gradient(var(--gold),var(--gold));background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%}

/* ================= Hero: dunkles Messfeld ================= */
.hero{position:relative;overflow:hidden;background:var(--gruen);color:var(--creme);padding:44px 0 52px;isolation:isolate}
@media(min-width:960px){.hero{padding:80px 0 88px;min-height:min(760px,calc(100dvh - var(--kopf-oben) - var(--kopf-unten)));display:flex;align-items:center}}
.hero .wrap{width:100%}
.messfeld{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 90% at 72% 40%,#000 25%,rgba(0,0,0,.35) 70%,transparent 100%);
  mask-image:radial-gradient(120% 90% at 72% 40%,#000 25%,rgba(0,0,0,.35) 70%,transparent 100%)}
.messfeld .raster{position:absolute;inset:0;
  background-image:linear-gradient(rgba(248,247,239,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(248,247,239,.075) 1px,transparent 1px);
  background-size:48px 48px}
.zelle{position:absolute;width:47px;height:47px;background:var(--mess);opacity:0;animation:glimmen var(--dauer,5s) ease-in-out var(--verz,0s) infinite}
@keyframes glimmen{0%,100%{opacity:0}50%{opacity:var(--hell,.2)}}
.strahl{position:absolute;display:block;opacity:.9}
.strahl.quer{height:1px;width:220px;left:0;background:linear-gradient(90deg,transparent,rgba(191,212,65,.95),transparent);
  animation:quer var(--dauer,10s) linear var(--verz,0s) infinite;will-change:transform}
.strahl.hoch{width:1px;height:200px;top:0;background:linear-gradient(180deg,transparent,rgba(191,212,65,.9),transparent);
  animation:hoch var(--dauer,9s) linear var(--verz,0s) infinite;will-change:transform}
@media(max-width:959px){.strahl{display:none}}
@keyframes quer{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 260px))}}
@keyframes hoch{from{transform:translateY(-240px)}to{transform:translateY(900px)}}
/* links ruhiger Grund für die Schrift */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,66,37,.92) 0%,rgba(0,66,37,.55) 38%,rgba(0,66,37,0) 62%)}
@media(max-width:959px){.hero::before{background:linear-gradient(180deg,rgba(0,66,37,.2) 0%,rgba(0,66,37,.85) 100%)}}

.hero-raster{display:grid;gap:40px}
@media(min-width:960px){.hero-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:72px;align-items:center}}
.hero h1{color:var(--creme)}
.hero h1 strong{display:block;color:var(--mess);font-weight:inherit;animation:ein 720ms var(--ease) 80ms both}
.hero .vorspann{font-size:18px;line-height:1.55;margin:22px 0 32px;max-width:38ch;color:rgba(248,247,239,.84)}
@media(min-width:960px){.hero .vorspann{font-size:19.5px;max-width:42ch}}
.portraet{border:1px solid rgba(248,247,239,.2);border-radius:var(--r);overflow:hidden;background:rgba(248,247,239,.04);max-width:420px}
.portraet .portraet-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#00331c}
.portraet .schriftfeld{border:0;border-radius:0;border-top:1px solid rgba(248,247,239,.18)}
@media(min-width:960px){.portraet{justify-self:end;width:100%}.portraet .portraet-bild img{aspect-ratio:4/5;max-height:420px}}

/* Einstieg: einmalig beim Laden */
.ein{animation:ein 720ms var(--ease) both}
.ein.v2{animation-delay:180ms}.ein.v3{animation-delay:280ms}.ein.v4{animation-delay:380ms}
@keyframes ein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ================= Geschichte: Kapitel an der Zeitachse, Maßblatt daneben ================= */
.geschichte-kopf{margin-bottom:28px}
@media(min-width:960px){.geschichte-kopf{margin-bottom:8px}}
.geschichte-raster{display:grid;gap:40px}
@media(min-width:960px){.geschichte-raster{grid-template-columns:minmax(0,1fr) 340px;gap:80px;align-items:start}}

.kapitel-spalte{position:relative}
.kapitel-liste{margin:0;padding:0}
.zeitachse{position:absolute;left:7px;width:3px;top:0;height:0;background:var(--haar);border-radius:3px;
  view-timeline:--achse block;view-timeline-inset:45% 55%}
.zeit-fuell{position:absolute;inset:0;background:var(--gruen);border-radius:3px;transform-origin:top;transform:scaleY(var(--p,0))}
@supports (animation-timeline: view()){
  .zeit-fuell{transform:none;animation:fuellen linear both;animation-timeline:--achse;animation-range:cover 0% cover 100%}
}
@keyframes fuellen{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.kapitel{position:relative;padding:0 0 52px 44px;scroll-margin-top:96px}
.kapitel:last-child{padding-bottom:0}
.kapitel::before{content:"";position:absolute;left:1px;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--papier);border:3px solid var(--haar);box-sizing:border-box;z-index:1;
  transition:background-color 260ms ease,border-color 260ms ease,transform 260ms var(--ease)}
.kapitel.erreicht::before{background:var(--mess);border-color:var(--gruen);transform:scale(1.15)}
.kapitel h3{font-size:clamp(21px,5.2vw,27px);font-weight:700;line-height:1.2;letter-spacing:-.03em;max-width:26ch}
.kapitel p{margin-top:12px;font-size:17px;color:var(--leise)}
.kapitel p.klar{color:var(--tinte);font-weight:600}
.kapitel p.fussnote{margin-top:18px;font-size:13px;line-height:1.5}
@media(min-width:960px){
  .kapitel{padding:14vh 0 14vh 52px}
  .kapitel:first-child{padding-top:8vh}
  .kapitel:last-child{padding-bottom:6vh}
  .kapitel::before{top:calc(14vh + 7px)}
  .kapitel:first-child::before{top:calc(8vh + 7px)}
}

.neu{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.neu li{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--gruen);
  padding:7px 13px 7px 11px;border:1px solid var(--haar);border-radius:var(--r);background:var(--creme)}
.neu li::before{content:"";width:12px;height:8px;background:var(--mess);flex:none}
.wp-block-image.arbeitsfoto{margin-top:22px;border:1px solid var(--haar);border-radius:var(--r);overflow:hidden}
.arbeitsfoto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

.massblatt{display:none}
@media(min-width:960px){
  .massblatt{display:block;position:sticky;top:calc(var(--kopf-unten) + 32px);background:var(--creme);border:1px solid var(--haar);border-radius:var(--r);padding:28px}
}
.mb-kopf{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.mb-kopf .feldname{color:var(--leise)}
.mb-stand{font-size:14px;color:var(--leise)}
.mb-stand strong{font-size:40px;font-weight:700;line-height:.9;letter-spacing:-.04em;color:var(--gruen);margin-right:2px}
.mb-balken,.l-balken{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.mb-balken{height:20px}
.mb-seg,.l-seg{position:relative;outline:1px solid var(--haar);outline-offset:-1px}
.mb-seg::after,.l-seg::after{content:"";position:absolute;inset:0;background:var(--mess);transform:scaleX(0);transform-origin:left;
  transition:transform 600ms var(--ease) var(--d,0ms)}
.mb-seg.an::after,.l-seg.an::after{transform:none}
.mb-mass{position:relative;height:13px;margin-top:8px;overflow:hidden}
.mb-mass span{position:absolute;inset:0;transform:translateX(calc((var(--s,0) - 1) * 100%));transition:transform 600ms var(--ease)}
.mb-mass span::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--gruen)}
.mb-mass span::after{content:"";position:absolute;right:0;top:2.5px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid var(--gruen)}
.mb-mass i{position:absolute;left:0;top:2.5px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:7px solid var(--gruen);opacity:0;transition:opacity 200ms ease}
.mb-mass.gemessen i{opacity:1}
.mb-kv{position:relative;width:20%;margin-top:6px;padding-top:9px;font-size:11.5px;line-height:1.3;color:var(--leise);white-space:nowrap}
.mb-kv::before{content:"";position:absolute;left:0;right:3px;top:0;height:6px;border:1px solid var(--rand);border-top:0}
.mb-liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.mb-liste li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--leise);transition:color 300ms ease}
.mb-liste li::before{content:"";width:12px;height:8px;flex:none;outline:1px solid var(--haar);outline-offset:-1px;transition:background-color 300ms ease,outline-color 300ms ease}
.mb-liste li.an{color:var(--tinte)}
.mb-liste li.an::before{background:var(--mess);outline-color:var(--mess)}
.mb-fuss{margin-top:20px;padding-top:16px;border-top:1px solid var(--haar);font-size:12.5px;line-height:1.45;color:var(--leise)}

.anteile{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px;max-width:560px}
.anteil-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.anteil .wer{font-size:15px;font-weight:600;line-height:1.3;color:var(--tinte)}
.anteil .zahlt{font-size:14px;line-height:1.3;color:var(--leise);text-align:right}
.spur{display:flex;gap:2px;height:14px}
.spur i{display:block;flex:0 0 var(--g,100%);background:var(--mess);transform-origin:left;
  transition:transform 720ms var(--ease) calc(var(--i,0)*140ms)}
.js .spur i{transform:scaleX(0)}
.spur b{display:block;flex:1 1 0;background:var(--blass);transition:opacity 420ms ease calc(480ms + var(--i,0)*140ms)}
.js .spur b{opacity:0}
.js .anteile.laeuft .spur i{transform:none}
.js .anteile.laeuft .spur b{opacity:1}

/* ================= Tabs: Wertgutachten nach Anlass ================= */
.kopfzeile{text-align:center;margin-bottom:28px}
.kopfzeile h2{margin:0 auto}
.kopfzeile p{margin:14px auto 0;color:var(--leise);font-size:17px}
@media(min-width:768px){.kopfzeile{margin-bottom:36px}}

.reiter-leiste{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
@media(min-width:768px){.reiter-leiste{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}}
.reiter-knopf{position:relative;isolation:isolate;overflow:hidden;min-height:84px;padding:14px 16px;border:0;border-radius:var(--r);
  display:flex;align-items:flex-end;text-align:left;cursor:pointer;color:#fff;background:var(--gruen);
  font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
@media(min-width:768px){.reiter-knopf{min-height:118px;padding:18px 20px;font-size:16.5px}}
.reiter-knopf::before{content:"";position:absolute;inset:-12px;z-index:-2;background:var(--bild) center/cover no-repeat;
  filter:grayscale(1) blur(3px);transform:scale(1.04);transition:transform 600ms var(--ease),filter 600ms var(--ease)}
.reiter-knopf::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,66,37,.8);transition:background-color 260ms ease}
.reiter-knopf .zahl{position:absolute;top:14px;left:16px;font-size:11px;font-weight:600;letter-spacing:.15em;color:rgba(255,255,255,.7)}
@media(min-width:768px){.reiter-knopf .zahl{top:18px;left:20px}}
.reiter-knopf[aria-selected="true"]::after{background:rgba(0,66,37,.62);box-shadow:inset 0 0 0 1px rgba(191,212,65,.55)}
.reiter-knopf[aria-selected="true"]::before{filter:grayscale(1) blur(1.5px);transform:scale(1.1)}
@media(hover:hover) and (pointer:fine){
  .reiter-knopf:hover::after{background:rgba(0,66,37,.7)}
  .reiter-knopf:hover::before{transform:scale(1.1)}
}
/* gleitende Marke unter dem aktiven Tab (ab 768 px), mobil ein Balken im Knopf */
.reiter-marke{display:none}
@media(min-width:768px){
  .reiter-marke{display:block;position:absolute;left:0;bottom:-9px;height:4px;width:calc((100% - 36px) / 4);border-radius:2px;background:var(--mess);
    transform:translateX(calc(var(--i,0) * (100% + 12px)));transition:transform 380ms var(--ease-bahn)}
}
@media(max-width:767px){
  .reiter-knopf[aria-selected="true"]::after{box-shadow:inset 0 -4px 0 var(--mess),inset 0 0 0 1px rgba(191,212,65,.55)}
}

.reiter-flaeche{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);background:var(--gruen);color:var(--creme)}
.reiter-bilder{position:absolute;inset:0;z-index:-1}
.reiter-bilder span{position:absolute;inset:0;background:var(--bild) center/cover no-repeat;filter:grayscale(1);opacity:0;transition:opacity 500ms ease}
.reiter-bilder span.an{opacity:.22}
.reiter-bilder::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gruen) 0%,rgba(0,66,37,.94) 45%,rgba(0,66,37,.78) 100%)}
@media(max-width:899px){.reiter-bilder::after{background:linear-gradient(180deg,rgba(0,66,37,.8) 0%,var(--gruen) 70%)}}
.reiter-panel{display:grid;gap:28px;padding:28px 24px}
.reiter-panel[hidden]{display:none}
.reiter-panel + .reiter-panel{border-top:1px solid rgba(248,247,239,.14)}
.reiter-panel > .reiter-titel{grid-column:1/-1;padding:28px 24px 0;font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mess)}
.reiter-panel > .reiter-bild{grid-column:1/-1;margin:16px 24px 0;max-width:220px;border-radius:var(--r);overflow:hidden}
.reiter-panel > .reiter-bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1)}
@media(min-width:900px){.reiter-panel > .reiter-titel{padding:36px 44px 0}.reiter-panel > .reiter-bild{margin:16px 44px 0}}
.js .reiter.bereit .reiter-panel > .reiter-titel,.js .reiter.bereit .reiter-panel > .reiter-bild{display:none}
.js .reiter.bereit .reiter-panel + .reiter-panel{border-top:0}
@media(min-width:640px){.reiter-panel{padding:36px 32px}}
@media(min-width:900px){.reiter-panel{grid-template-columns:1fr 1fr;gap:0;padding:0}.reiter-panel > div{padding:44px 44px 48px}.reiter-panel > div + div{border-left:1px solid rgba(248,247,239,.14)}}
.reiter-panel .feldname{color:rgba(191,212,65,.9);margin-bottom:14px;display:block}
.reiter-panel h3{color:var(--creme);font-size:clamp(22px,5vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.03em;max-width:18ch}
.reiter-panel p{color:rgba(248,247,239,.82);margin-top:16px;font-size:16.5px}
.leistet{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.leistet li{position:relative;padding-left:26px;font-size:16px;line-height:1.45;color:var(--creme)}
.leistet li:nth-child(2){--n:1}.leistet li:nth-child(3){--n:2}.leistet li:nth-child(4){--n:3}.leistet li:nth-child(5){--n:4}
.leistet li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:8px;background:var(--mess)}
.reiter-panel .hinweis-h{margin-top:22px;font-size:13px;color:rgba(248,247,239,.66)}
/* Wechsel: Inhalt gleitet weich herein, Punkte nacheinander */
.reiter-panel.neu-da > div{animation:panel-ein 320ms var(--ease) both}
.reiter-panel.neu-da > div + div{animation-delay:60ms}
.reiter-panel.neu-da .leistet li{animation:panel-ein 320ms var(--ease) both;animation-delay:calc(120ms + var(--n,0) * 55ms)}
@keyframes panel-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.leistungen-fuss{text-align:center;margin:18px auto 0}

/* ================= Kontakt ================= */
.kontakt-raster{display:grid;gap:16px}
@media(min-width:960px){.kontakt-raster{grid-template-columns:1.12fr .88fr;gap:24px;align-items:start}}
.tafel{background:var(--gruen);color:var(--creme);border-radius:var(--r);padding:32px 24px}
@media(min-width:640px){.tafel{padding:40px 32px}}
@media(min-width:1024px){.tafel{padding:48px 40px}}
.tafel h2{color:var(--creme)}
.tafel > p{color:rgba(248,247,239,.84);margin:16px 0 26px;font-size:17px}
.tafel .schriftfeld{grid-template-columns:1fr;margin-top:28px}
@media(min-width:440px){.tafel .schriftfeld{grid-template-columns:repeat(2,1fr)}}

.formular form{display:grid;gap:16px;margin-top:20px}
.paar{display:grid;gap:16px}
@media(min-width:600px){.paar{grid-template-columns:1fr 1fr}}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:14px;font-weight:600;color:var(--tinte)}
.feld label small{font-size:13px;font-weight:400;color:var(--leise)}
input,select,textarea{
  font:400 16px/1.5 "Montserrat",system-ui,sans-serif;color:var(--tinte);
  background:var(--papier);border:1px solid var(--rand);border-radius:var(--r);
  padding:12px 15px;width:100%;transition:border-color 160ms ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gruen);outline-offset:2px;border-color:var(--gruen)}
input[aria-invalid="true"]{border-color:var(--gold);border-width:2px;padding:11px 14px}
textarea{min-height:104px;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23004225"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg>');
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px}
input::placeholder,textarea::placeholder{color:var(--rand)}
.fehler{font-size:13px;line-height:1.4;color:var(--tinte);padding-left:10px;border-left:2px solid var(--gold)}
.fehler:empty{display:none}
.formular .knopf{width:100%}
.hinweis{font-size:12.5px;line-height:1.45;color:var(--leise);text-align:center}
.meldung{font-size:14px;font-weight:600;color:var(--gruen);text-align:center}
.meldung:empty{display:none}
/* Contact Form 7: dieselbe Optik, wenn das Formular in WordPress per Shortcode kommt */
.formular .wpcf7-form{display:grid;gap:16px;margin-top:20px}
.formular .wpcf7-form-control-wrap{display:block}
.formular .wpcf7-form-control:not(.wpcf7-submit){width:100%}
.formular .wpcf7-not-valid{border-color:var(--gold);border-width:2px;padding:11px 14px}
.formular .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--tinte);padding-left:10px;border-left:2px solid var(--gold)}
.formular .wpcf7-submit{width:100%;-webkit-appearance:none;appearance:none}
.formular .wpcf7-form-control-wrap > input,.formular .wpcf7-form-control-wrap > select,.formular .wpcf7-form-control-wrap > textarea{display:block}
.formular .wpcf7-spinner{display:none}
.formular .wpcf7 form.submitting .wpcf7-spinner{display:block;margin:10px auto 0}
.formular .wpcf7 form .wpcf7-response-output{margin:4px 0 0;padding:12px 16px;border:1px solid var(--haar);border-radius:var(--r);font-size:14px;line-height:1.45;color:var(--tinte);background:var(--papier)}
.formular .wpcf7 form.sent .wpcf7-response-output{border-color:var(--gruen);color:var(--gruen);font-weight:600}
.formular .wpcf7 form.invalid .wpcf7-response-output,.formular .wpcf7 form.failed .wpcf7-response-output{border-color:var(--gold)}

/* ================= Fuß ================= */
.fuss{border-top:1px solid var(--haar);margin-top:28px;padding:28px 0 36px}
@media(min-width:768px){.fuss{margin-top:48px}}
.fuss-innen{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.fuss img{height:26px;width:auto}
.fuss nav{display:flex;gap:24px}
.fuss nav a,.fuss p{font-size:13.5px;color:var(--leise);text-decoration:none}
@media(min-width:768px){.fuss-innen{flex-direction:row;justify-content:space-between;text-align:left}}

/* ================= Leiste unten (mobil) ================= */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--papier) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--haar);
  transform:translateY(110%);visibility:hidden;transition:transform 320ms var(--ease-schub),visibility 0s linear 320ms}
.leiste.sichtbar{transform:none;visibility:visible;transition:transform 320ms var(--ease-schub)}
.l-mass{flex:1;min-width:0}
.l-balken{height:9px;max-width:120px}
.l-text{display:block;margin-top:5px;font-size:13px;line-height:1.2;color:var(--leise);white-space:nowrap}
.l-text b{color:var(--gruen);font-weight:700}
@media(min-width:960px){.leiste{display:none}}

/* ================= Aufblenden ================= */
.js .auf{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.js .auf.da{opacity:1;transform:none}

/* Weniger Bewegung: keine Wege, nur sanfte Übergänge, Hintergrund steht still */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ein,.hero h1 strong{animation:none}
  .strahl{display:none}
  .zelle{animation:none;opacity:.12}
  .js .auf{opacity:1;transform:none;transition:none}
  .kopf{transition:none}
  .mb-seg::after,.l-seg::after{transform:none;opacity:0;transition:opacity 200ms ease}
  .mb-seg.an::after,.l-seg.an::after{opacity:1}
  .mb-mass span{transition:none}
  .kapitel::before{transition:background-color 200ms ease,border-color 200ms ease}
  .kapitel.erreicht::before{transform:none}
  .js .spur i{transform:none;transition:none}
  .js .spur b{opacity:1;transition:none}
  .reiter-marke{transition:none}
  .reiter-panel.neu-da > div,.reiter-panel.neu-da .leistet li{animation:none}
  .reiter-knopf::before{transition:none}
  .leiste{transform:none;opacity:0;transition:opacity 200ms ease,visibility 0s linear 200ms}
  .leiste.sichtbar{opacity:1;transition:opacity 200ms ease}
  .knopf:active,.knopf > .wp-block-button__link:active{transform:none}
}