/* bueroblanko.de · erzeugt von build/build.py aus build/design/ und build/css/ · nicht von Hand ändern */
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/MonaSans-300.woff2') format('woff2')}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/MonaSans-400.woff2') format('woff2')}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/MonaSans-500.woff2') format('woff2')}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/MonaSans-600.woff2') format('woff2')}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/MonaSans-700.woff2') format('woff2')}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/MonaSans-800.woff2') format('woff2')}
@font-face{font-family:'Mona Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/MonaSansCondensed-700.woff2') format('woff2')}
@font-face{font-family:'Mona Sans Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/MonaSansCondensed-800.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/DMMono_400.woff2') format('woff2')}
/* colors.css */
:root {
  /* Grauskala */
  --color-black: #0a0a0a;
  --color-grey-900: #1a1a1a;
  --color-grey-850: #141414;
  --color-grey-800: #2e2e2e;
  --color-grey-700: #444444;
  --color-grey-600: #5e5e5e;
  --color-grey-500: #7a7a7a;
  --color-grey-400: #9a9a9a;
  --color-grey-300: #bbbbbb;
  --color-grey-200: #d6d6d6;
  --color-grey-100: #ebebeb;
  --color-grey-50: #f5f5f5;
  --color-white: #ffffff;

  /* Akzente */
  --color-rose: #f9d6e8;
  --color-rose-soft: #fdeef5;
  --color-lime: #c9ff5a;
  --color-accent: var(--color-rose);
  --color-accent-2: var(--color-lime);
  --color-on-accent: var(--color-black);

  /* Flächen */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-grey-50);
  --color-bg-muted: var(--color-grey-100);
  --color-bg-inverted: var(--color-black);
  --color-bg-inverted-subtle: var(--color-grey-850);
  --color-bg-overlay-panel: #000000;

  /* Text */
  --color-fg: var(--color-black);
  --color-fg-secondary: var(--color-grey-600);
  --color-fg-tertiary: var(--color-grey-500);
  --color-fg-muted: var(--color-grey-400);
  --color-fg-nav: var(--color-grey-800);
  --color-fg-inverted: var(--color-white);
  --color-fg-inverted-secondary: var(--color-grey-300);
  --color-fg-inverted-muted: var(--color-grey-400);

  /* Linien */
  --color-border: var(--color-grey-100);
  --color-border-mid: var(--color-grey-200);
  --color-border-strong: var(--color-black);
  --color-border-inverted: var(--color-grey-800);
  --color-border-inverted-mid: var(--color-grey-700);
  --color-stroke-outline: #b6b6b6;

  /* Interaktion */
  --color-interactive: var(--color-black);
  --color-interactive-hover: var(--color-grey-800);
  --color-overlay: rgba(0, 0, 0, 0.82);
  --color-scrim: rgba(0, 0, 0, 0.8);
  --color-selection: var(--color-rose);

  /* Verläufe */
  --gradient-glow: radial-gradient(closest-side, var(--color-rose), rgba(249, 214, 232, 0));
  --gradient-glow-dark: radial-gradient(closest-side, rgba(249, 214, 232, 0.35), rgba(249, 214, 232, 0));
  --gradient-glare: linear-gradient(115deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.05));
}
/* typography.css */
/* Mona Sans – lokale TTFs unter /fonts (3 Breiten, 200–900, roman + italic) */

















































:root {
  /* Familien */
  --font-sans: 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-condensed: 'Mona Sans Condensed', 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-expanded: 'Mona Sans Expanded', 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* Gewichte */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Größen */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: clamp(28px, 3.4vw, 46px);
  --text-4xl: clamp(36px, 4.6vw, 64px);
  --text-5xl: clamp(44px, 5.6vw, 76px);
  --text-menu: clamp(45px, 8vw, 85px);
  --text-marquee: clamp(100px, 15.6vw, 200px);

  /* Zeilenhöhen */
  --lh-display: 1.04; /* @kind font */
  --lh-headline: 1.06; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-body: 1.75; /* @kind font */
  --lh-footer: 1.9; /* @kind font */

  /* Laufweiten */
  --ls-display: -0.025em;
  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.08em;
  --ls-wider: 0.12em;
  --ls-widest: 0.2em;
  --ls-spaced: 0.5em;

  /* Semantische Stile */
  --display-font: var(--font-sans);
  --display-weight: var(--fw-light); /* @kind font */
  --display-size: var(--text-5xl);
  --display-lh: var(--lh-display); /* @kind font */
  --display-ls: var(--ls-display);

  --h1-font: var(--font-sans);
  --h1-weight: var(--fw-light); /* @kind font */
  --h1-size: var(--text-4xl);
  --h1-lh: var(--lh-headline); /* @kind font */
  --h1-ls: var(--ls-display);

  --h2-font: var(--font-sans);
  --h2-weight: var(--fw-light); /* @kind font */
  --h2-size: var(--text-3xl);
  --h2-lh: var(--lh-snug); /* @kind font */
  --h2-ls: var(--ls-tight);

  --body-font: var(--font-sans);
  --body-weight: var(--fw-regular); /* @kind font */
  --body-size: var(--text-base);
  --body-lh: var(--lh-body); /* @kind font */

  --overline-font: var(--font-sans);
  --overline-weight: var(--fw-semibold); /* @kind font */
  --overline-size: var(--text-xs);
  --overline-ls: var(--ls-widest);

  --button-font: var(--font-sans);
  --button-weight: var(--fw-semibold); /* @kind font */
  --button-size: var(--text-xs);
  --button-ls: var(--ls-wider);

  --nav-font: var(--font-sans);
  --nav-size: var(--text-sm);
  --nav-weight-active: var(--fw-medium); /* @kind font */

  --marquee-font: var(--font-condensed);
  --marquee-weight: var(--fw-bold); /* @kind font */
  --marquee-size: var(--text-marquee);

  --menu-font: var(--font-condensed);
  --menu-weight: var(--fw-extrabold); /* @kind font */
  --menu-size: var(--text-menu);

  --mono-font: var(--font-mono);
  --mono-size: var(--text-xs);
  --mono-ls: 0.06em;
}
/* spacing.css */
:root {
  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1320px;
  --container-wide: 1620px;
  --container-wide-width: 80%;
  --container-pad: clamp(20px, 5vw, 48px);
  --section-pad: clamp(72px, 9vw, 120px);
  --section-pad-sm: clamp(40px, 5vw, 64px);
  --grid-gap: clamp(32px, 4vw, 56px);
  --grid-gap-wide: clamp(48px, 6vw, 96px);
  --header-height: 68px;
  --menu-panel-width: 600px;

  /* Radien */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 18px;
  --radius-screen: 32px;
  --radius-phone: 40px;
  --radius-pill: 999px;

  /* Linien & Schatten */
  --border-hairline: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --border-accent: 2px solid var(--color-accent);
  --shadow-phone: 0 60px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px #333333;
  --shadow-none: none;
}
/* motion.css */
:root {
  --transition-fast: 150ms linear; /* @kind other */
  --transition-normal: 300ms ease; /* @kind other */
  --transition-tip: 180ms ease-out 180ms; /* @kind other */
  --ease-menu: cubic-bezier(0.77, 0, 0.175, 1); /* @kind other */
  --duration-menu-fade: 300ms; /* @kind other */
  --duration-menu-slide: 400ms; /* @kind other */
  --duration-marquee: 30s; /* @kind other */
  --duration-float: 5s; /* @kind other */
  --float-distance: 20px;
}
@keyframes bb-marquee { from { transform: translate(0, 0); } to { transform: translate(-100%, 0); } }
@keyframes bb-float { 0% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--float-distance))); } 100% { transform: translateY(0); } }
@keyframes bb-float-x { 0% { transform: translateX(0); } 50% { transform: translateX(calc(-1 * var(--float-distance))); } 100% { transform: translateX(0); } }
@keyframes bb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-slide-in { from { transform: translateX(40px); } to { transform: translateX(0); } }
/* base.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--color-fg); background: var(--color-bg); }
a { color: var(--color-fg); text-decoration: none; transition: opacity var(--transition-fast); }
a:hover { opacity: 0.7; }
::selection { background: var(--color-selection); color: var(--color-on-accent); }
/* ==========================================================================
   Eigene Ergänzungen zu den Designsystem-Tokens (build.py hängt das an bbkd.css).
   ========================================================================== */

/* Grundstile aller Seiten (früher je Seite im Export) */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:#fff;color:#0a0a0a;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#0a0a0a;text-decoration:none;transition:opacity 150ms linear}
/* Hover-Regel (Philipp 24.10.2026): nie grau. Knöpfe werden weiß mit Kontur oder schwarz, Textlinks unterstrichen statt blasser */
a:hover{opacity:1}
/* Unterstreichen beim Überfahren nur in Kopfzeile, Topbar und Fußzeile; Links mit eigener Linie bekommen Rosé statt einer zweiten Linie */
:where(header nav > a,header .bb-nav-gruppe > a,[data-screen-label="Topbar"] a,footer a):not([class]):not([aria-label]):hover{text-decoration:underline;text-underline-offset:.2em}
.bb-leistungen__orte a:hover,.bb-pfad a:hover,.bb-teilen a:hover,.bb-verzeichnis a:hover,.bb-projekt__block a:hover{border-bottom-color:#f9d6e8}
::selection{background:#f9d6e8;color:#0a0a0a}
input::placeholder{color:#9a9a9a}
@keyframes bb-marquee{from{transform:translate(0,0)}to{transform:translate(-100%,0)}}
@keyframes bb-laufband{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}  /* Startseiten-Laufband als Endlosschleife (Philipp 25.10.2026) */
@media (prefers-reduced-motion:reduce){.laufband-spur{animation:none!important}}
@keyframes bb-einfaden{from{opacity:0}to{opacity:1}}
@keyframes bb-einschieben{from{transform:translateX(40px)}to{transform:translateX(0)}}
@keyframes bb-schweben-h{0%{transform:translateX(0)}50%{transform:translateX(-20px)}100%{transform:translateX(0)}}
@keyframes bb-schweben{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes bb-fuellen{0%{max-height:0}100%{max-height:100%}}
@keyframes bb-slide-ein{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Kopfzeile (build/teile/kopfzeile.html): „hell“ immer weiß, „transparent“ erst nach 8 px Scrollen weiß (site.js) */
[data-kopf]{--kopf-hg:#fff;--kopf-linie:#ebebeb}
[data-kopf="transparent"]:not(.ist-gescrollt){--kopf-hg:transparent;--kopf-linie:transparent}
/* Schmale Bildschirme: Textnavigation aus, das Raster-Symbol öffnet das Übersichtsmenü (im Export stapelten sich die Punkte über dem Logo) */
@media (max-width:900px){[data-kopf] nav[aria-label="Hauptmenü"]{display:none!important}}

/* Übersichtsmenü (build/teile/menue.html, site.js) */
.bb-menue[hidden]{display:none}

/* Laufzeit für Seiten mit Logik aus Claude Design (dc.js) */
dc-if{display:contents}
dc-if[hidden]{display:none}

/* Honigtopf der Formulare: für Menschen unsichtbar, für Bots ein normales Feld */
.bb-topf{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ==========================================================================
   Übersichtsseiten (Leistungen, Portfolio, Journal) im Look von Startseite und Agentur.
   Werte aus dem Designsystem BBKD Final; Raster 80 % / max. 1620 px wie überall.
   ========================================================================== */
.bb-zeile{width:80%;max-width:1620px;margin:0 auto}
.bb-titel{position:relative;z-index:3}
.bb-titel .bb-zeile{padding:min(2vw,40px) 0}
.bb-h1{font-family:var(--font-sans);font-weight:300;font-size:clamp(44px,5.6vw,76px);line-height:1.05;letter-spacing:-.025em;margin:0;color:#0a0a0a;max-width:880px}
.bb-h2{font-family:var(--font-sans);font-weight:300;font-size:clamp(36px,4.6vw,64px);line-height:1.06;letter-spacing:-.025em;margin:0;color:#0a0a0a}
.bb-lead{font-size:15px;line-height:1.75;color:#5e5e5e;max-width:650px;margin:24px 0 0;text-wrap:pretty}
.bb-overline{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#5e5e5e;line-height:1.3}
.bb-knopf{display:inline-flex;align-items:center;padding:14px 26px;border-radius:999px;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background 150ms linear,color 150ms linear}
.bb-knopf:hover{opacity:1;background:#fff;color:#0a0a0a}
.bb-mehr{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0a0a0a;border-bottom:1px solid #0a0a0a;padding-bottom:3px;white-space:nowrap}
.bb-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--color-bg-subtle,#f5f5f5);color:#0a0a0a;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.bb-pill--rand{background:transparent;box-shadow:inset 0 0 0 1px #d6d6d6}
.bb-mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:#7a7a7a}

/* Leistungen: Liste mit Bildwechsel wie auf der Startseite */
.bb-leistungen{padding:clamp(40px,5vw,72px) 0 clamp(72px,9vw,120px)}
.bb-leistungen .bb-zeile{display:flex;flex-wrap:wrap;gap:48px clamp(40px,6vw,96px);align-items:flex-start}
.bb-leistungen__spalte{flex:1 1 560px;min-width:0}
.bb-leistungen__liste{list-style:none;margin:0;padding:0}
.bb-leistungen__eintrag{border-top:1px solid #ebebeb}
.bb-leistungen__eintrag:last-child{border-bottom:1px solid #ebebeb}
.bb-leistungen__eintrag a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;padding:24px 0 22px}
.bb-leistungen__eintrag a:hover{opacity:1}
/* Branding: Überschrift ohne Link, verteilt nur auf die Unterseiten (Philipp 25.10.2026) */
.bb-leistungen__kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;padding:24px 0 22px}
.bb-leistungen__label{grid-column:1/-1;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7a7a7a}
.bb-leistungen__name{justify-self:start;font-family:var(--font-sans);font-weight:300;font-size:clamp(32px,3.8vw,56px);line-height:1.1;letter-spacing:-.02em;color:#0a0a0a;border-bottom:2px solid transparent;transition:border-color 150ms linear}
.bb-leistungen__eintrag a:hover .bb-leistungen__name,.bb-leistungen__eintrag a:focus-visible .bb-leistungen__name{border-color:#f9d6e8}
.bb-leistungen__pfeil{font-size:22px;color:#0a0a0a;transition:transform 150ms linear}
.bb-leistungen__eintrag a:hover .bb-leistungen__pfeil{transform:translateX(6px)}
.bb-leistungen__orte{margin:28px 0 0;font-size:15px;line-height:1.75;color:#5e5e5e}
.bb-leistungen__orte a{color:#0a0a0a;border-bottom:1px solid #0a0a0a}
.bb-leistungen__bild{flex:0 1 360px;min-width:220px;margin-left:auto;position:sticky;top:96px}
.bb-leistungen__flaeche{position:relative;aspect-ratio:518/500;background:center/cover no-repeat;transition:background-image 300ms ease}
.bb-leistungen__flaeche img{width:100%;height:auto;display:block;transition:opacity 300ms ease}

/* Portfolio: lückenloses Kachelraster (Designsystem: Kachel, eckig, Overlay 82 %) */
.bb-portfolio{padding:clamp(40px,5vw,72px) 0 clamp(72px,9vw,120px)}
.bb-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0}
/* Portfolio dreispaltig (Philipp 24.10.2026) */
.bb-portfolio .bb-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.bb-portfolio .bb-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bb-portfolio .bb-raster{grid-template-columns:minmax(0,1fr)}}
footer a[aria-label]:hover{background:#fff;color:#0a0a0a !important;border-color:#fff !important}
.bb-kachel{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--color-bg-subtle,#f5f5f5)}
.bb-kachel:hover{opacity:1}
.bb-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms ease}
.bb-kachel:hover img{transform:scale(1.03)}
.bb-kachel__overlay{position:absolute;inset:0;background:rgba(0,0,0,.82);opacity:0;transition:opacity 300ms ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}
.bb-kachel:hover .bb-kachel__overlay,.bb-kachel:focus-visible .bb-kachel__overlay{opacity:1}
.bb-kachel__titel{font-family:var(--font-sans);font-size:28px;font-weight:500;color:#fff;line-height:1.2;margin:0}
.bb-kachel__kat{font-size:14px;color:#d3d3d3}
@media (hover:none){.bb-kachel__overlay{opacity:1;justify-content:flex-end;align-items:flex-start;text-align:left;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78))}.bb-kachel__titel{font-size:20px}}


/* Terminband (Baustein {{teil:cta}}): aus der Webdesign-Vorlage, auf .cta begrenzt, damit es auch ohne leistung.css läuft */
.cta{--black:#0a0a0a;--g100:#ebebeb;--g500:#7a7a7a;--g600:#5e5e5e;--g700:#444;--g800:#2e2e2e;--line:#d6d6d6;--text-2:#5e5e5e;--text-3:#444;--lime:#f9d6e8;
  --sans:var(--font-sans);--mono:var(--font-mono);--radius:16px;--radius-lg:24px;--shadow:0 30px 60px -30px rgba(10,10,10,.30);
  position:relative;z-index:9;background:linear-gradient(180deg,#fff 170px,var(--black) 170px);font:400 17px/1.6 var(--sans);color:var(--black)}
.cta *{box-sizing:border-box}
.cta .wrap{width:80%;max-width:1620px;margin:0 auto;padding:0}
.cta .eyebrow{display:block;font:500 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--g500)}
.cta .h2{font:300 clamp(30px,3.4vw,48px)/1.08 var(--sans);letter-spacing:-.025em;text-wrap:balance;margin:0}
.cta .btn-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:15px 26px;border-radius:999px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--black);background:var(--black);color:#fff;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.cta .btn:hover{opacity:1;background:#fff;color:var(--black);border-color:var(--black)}
.cta .phone-line{display:inline-block;text-decoration:none;color:var(--black);font:400 17px/1.3 var(--mono)}
.cta .vig__report-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font:600 12px/1 var(--sans)}
.cta .vig__report-head::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);border:1px solid var(--black)}
.cta__card{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:340px;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff,var(--g100))}
.cta__visual{position:relative;overflow:hidden}
.cta__report{position:absolute;left:56px;top:48px;width:420px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);transform:rotate(-3deg)}
.cta .anfrage{margin:0;padding:6px 18px 0}
.cta .anfrage div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font:500 13px/1.3 var(--sans)}
.cta .anfrage dt{color:var(--text-2)}
.cta .anfrage dd{margin:0;font-weight:600;color:var(--black);text-align:right}
.cta .anfrage__fuss{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 14px;font:400 12px/1 var(--mono);color:var(--text-2)}
.cta .anfrage__fuss b{padding:7px 12px;border-radius:999px;background:var(--black);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.cta__report-note{padding:0 18px 18px;font:500 12px/1.5 var(--sans);color:var(--text-2)}
.cta__body{padding:60px 64px 60px 0;display:flex;flex-direction:column;justify-content:center}
.cta__body .h2{margin:14px 0 18px;font-size:38px;line-height:1.12}
.cta__body p{margin:0 0 28px;font-size:17px;color:var(--text-3)}
@media (max-width:1180px){.cta__card{grid-template-columns:1fr}.cta__visual{height:auto;padding:40px 48px 8px}.cta__report{position:relative;left:auto;top:auto;width:100%;max-width:420px;margin:0 auto}.cta__body{padding:32px 48px 56px}}
@media (max-width:680px){.cta__visual{height:auto;padding:28px 18px 24px}.cta__report{position:relative;left:auto;top:auto;width:100%;max-width:360px;transform:rotate(-2deg)}.cta__body{padding:16px 24px 40px}.cta__body .h2{font-size:28px}}

/* Journal: Aufmacher, Raster, Seitenleiste */
.bb-journal{padding:clamp(40px,5vw,72px) 0 clamp(72px,9vw,120px)}
.bb-journal .bb-zeile{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px clamp(40px,5vw,80px);align-items:start}
.bb-journal__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.bb-karte{display:flex;flex-direction:column;gap:18px;min-width:0}
.bb-karte--aufmacher{grid-column:1/-1}
.bb-karte__bild{display:block;overflow:hidden;border-radius:16px;aspect-ratio:16/10;background:var(--color-bg-subtle,#f5f5f5)}
.bb-karte__bild:hover{opacity:1}
/* Blog-Bilder farbig, nicht mehr schwarz-weiß (Philipp 26.10.2026) */
.bb-karte__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms ease}
.bb-karte:hover .bb-karte__bild img{transform:scale(1.02)}
.bb-karte--aufmacher .bb-karte__bild{aspect-ratio:16/8}
.bb-karte__kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bb-karte__titel{font-family:var(--font-sans);font-weight:300;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0}
.bb-karte--aufmacher .bb-karte__titel{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.bb-karte__titel a{color:#0a0a0a}
.bb-karte__text{font-size:15px;line-height:1.75;color:#5e5e5e;margin:0;text-wrap:pretty}
.bb-seitenleiste{position:sticky;top:96px;display:flex;flex-direction:column;gap:36px}
.bb-seitenleiste__stempel{width:150px;height:auto;display:block}
.bb-seitenleiste__block{border-top:1px solid #0a0a0a;padding-top:18px}
.bb-seitenleiste__block .bb-overline{color:#0a0a0a;margin-bottom:14px}
.bb-seitenleiste__block p{font-size:14px;line-height:1.75;color:#5e5e5e;margin:0}
.bb-seitenleiste__liste{list-style:none;margin:0;padding:0;font-size:14px;line-height:2;color:#2e2e2e}
.bb-seitenleiste__pills{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:980px){.bb-journal .bb-zeile{grid-template-columns:minmax(0,1fr)}.bb-seitenleiste{position:static}}
@media (max-width:680px){.bb-journal__liste{grid-template-columns:minmax(0,1fr);gap:48px}.bb-karte--aufmacher .bb-karte__bild{aspect-ratio:16/10}}

/* ==========================================================================
   Journal-Artikel und Projektseiten (build/inhalte_seiten.py)
   --bb-radius steuert die Rundung aller Bilder und Karten dieser Seiten (Entscheidung eckig/rund offen, 24.10.2026)
   ========================================================================== */
:root{--bb-radius:16px}
.bb-pfad{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#5e5e5e;margin-bottom:22px}
.bb-pfad a{color:#0a0a0a;border-bottom:1px solid #0a0a0a}
.bb-artikel__kopf,.bb-projekt__kopf{padding:clamp(48px,6vw,96px) 0 clamp(28px,3vw,44px)}
.bb-artikel__titel{max-width:1000px}
.bb-artikel__bild{margin:0}
.bb-artikel__bild img{display:block;width:100%;height:auto;aspect-ratio:1200/380;object-fit:cover;border-radius:var(--bb-radius)}
.bb-artikel__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid #ebebeb}
.bb-artikel__meta img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#f5f5f5}
.bb-artikel__meta strong{display:block;font-size:14px;font-weight:600}
.bb-teilen{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.bb-teilen a{color:#0a0a0a;border-bottom:1px solid #d6d6d6}
.bb-artikel__spalten{display:grid;grid-template-columns:minmax(0,760px) 280px;justify-content:space-between;gap:48px clamp(40px,6vw,96px);padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px)}
.bb-artikel__seitenleiste{position:sticky;top:96px;align-self:start}
.bb-autor{border-top:1px solid #0a0a0a;padding-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bb-autor img{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#f5f5f5}
.bb-autor__name{margin:6px 0 0;font-size:17px;font-weight:600}
.bb-autor dl{margin:8px 0 14px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;font-size:14px}
.bb-autor dl div{display:contents}
.bb-autor dt{color:#7a7a7a}
.bb-autor dd{margin:0}
.bb-autor dd a{color:#0a0a0a}
.bb-artikel__weiter{padding:clamp(48px,6vw,88px) 0;border-top:1px solid #ebebeb}
.bb-artikel__weiter .bb-h2{margin-bottom:40px}
.bb-karte__titel{font-family:var(--font-sans);font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em;margin:0}
.bb-karte__titel a{color:#0a0a0a}
.bb-karte__bild img{border-radius:var(--bb-radius)}
/* Fließtext der Artikel */
.bb-prosa{font-size:17px;line-height:1.75;color:#2e2e2e;overflow-wrap:break-word;hyphens:auto}
.bb-prosa>*+*{margin-top:20px}
.bb-prosa h2,.bb-prosa h3,.bb-verzeichnis,.bb-karte__titel{hyphens:manual}
.bb-prosa h2{margin-top:64px;font-family:var(--font-sans);font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.12;letter-spacing:-.02em;color:#0a0a0a;scroll-margin-top:96px}
.bb-prosa h3{margin-top:40px;font-size:21px;font-weight:600;line-height:1.3;color:#0a0a0a;scroll-margin-top:96px}
.bb-prosa h2+*,.bb-prosa h3+*{margin-top:14px}
.bb-prosa p,.bb-prosa ul,.bb-prosa ol{margin-bottom:0}
.bb-prosa ul,.bb-prosa ol{padding-left:22px}
.bb-prosa li+li{margin-top:8px}
.bb-prosa li::marker{color:#7a7a7a}
.bb-prosa a{color:#0a0a0a;text-decoration:underline;text-decoration-color:#f9d6e8;text-decoration-thickness:2px;text-underline-offset:3px}
.bb-prosa a:hover{opacity:1;text-decoration-color:#0a0a0a}
.bb-prosa strong{color:#0a0a0a;font-weight:600}
.bb-prosa blockquote{margin:28px 0;padding:4px 0 4px 24px;border-left:2px solid #0a0a0a;font-size:19px;color:#0a0a0a}
.bb-prosa figure{margin:36px 0}
.bb-prosa figure img{display:block;width:100%;height:auto;border-radius:var(--bb-radius)}
.bb-prosa figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:#7a7a7a}
.bb-prosa hr{border:0;border-top:1px solid #ebebeb;margin:44px 0}
.bb-tabelle{overflow-x:auto;margin:28px 0;border-top:1px solid #0a0a0a}
.bb-tabelle table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.bb-tabelle th,.bb-tabelle td{padding:12px 14px 12px 0;border-bottom:1px solid #ebebeb;text-align:left;vertical-align:top}
.bb-tabelle thead th{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5e5e5e}
.bb-verzeichnis{border-top:1px solid #0a0a0a;border-bottom:1px solid #ebebeb;padding:18px 0 20px}
.bb-verzeichnis .bb-overline{color:#0a0a0a;margin:0 0 10px}
.bb-verzeichnis ol{margin:0;padding-left:22px;font-size:15px;line-height:1.6}
.bb-verzeichnis a{color:#2e2e2e;text-decoration:none;border-bottom:1px solid #ebebeb}
.bb-artikel__faq{margin-top:64px}
.bb-artikel__faq details{border-top:1px solid #ebebeb;padding:4px 0}
.bb-artikel__faq details:last-child{border-bottom:1px solid #ebebeb}
.bb-artikel__faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:16px 0;cursor:pointer;font-size:16px;font-weight:600;color:#0a0a0a}
.bb-artikel__faq summary::-webkit-details-marker{display:none}
.bb-artikel__faq summary::after{content:"+";flex:none;font-weight:300;font-size:22px;line-height:1}
.bb-artikel__faq details[open] summary::after{content:"–"}
.bb-artikel__faq details p{margin:0 0 18px;font-size:16px}
/* Projektseiten */
.bb-projekt__spalten{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px clamp(40px,5vw,80px);padding-bottom:clamp(56px,7vw,96px);align-items:stretch}
.bb-projekt__voll{padding-bottom:clamp(56px,7vw,96px)}
/* Sammelseite /project/webdesign-referenzen/ zentriert (Philipp 26.10.2026: „alles zentrieren“): Kopf, Brotkrume und Filter */
.bb-projekt__kopf--mittig{text-align:center}
.bb-projekt__kopf--mittig .bb-h1{margin-left:auto;margin-right:auto}
.bb-projekt__kopf--mittig .bb-pfad{justify-content:center}
.bb-projekt__voll .ref-filter{justify-content:center}
/* Bühne links: eckig, so hoch wie die Datenspalte (Raster streckt), Inhalt zentriert (Philipp 24.10.2026) */
.bb-projekt__galerie{display:flex;flex-direction:column;gap:24px;min-height:540px}
.bb-buehne{position:relative;flex:1 1 0;min-height:540px;overflow:hidden;border-radius:0;background:#ececec;outline:none}
.bb-buehne>img,.bb-buehne>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.bb-buehne--praesentation>img{left:8%;top:8%;width:84%;height:84%;object-fit:contain}
/* Ausnahme BILD_GANZ in inhalte_seiten.py (Philipp 25.10.2026: FUEL10K, BORZ, Haasmedia, Logofolio): Bühne im Seitenverhältnis der Bilder (aspect-ratio inline, sonst quadratisch), Bild ganz, Datenspalte vertikal mittig */
.bb-projekt__spalten--mittig{align-items:center}
.bb-projekt__spalten--mittig .bb-projekt__galerie{min-height:0}
.bb-buehne.bb-buehne--ganz{flex:none;min-height:0;aspect-ratio:1}
.bb-buehne--ganz>img{object-fit:contain}
/* Logofolio: Logos grau, beim Überfahren in ihren Farben (Philipp 26.10.2026: „logo mit farbe on hover“), ohne Maus immer farbig */
.bb-buehne--logofolio>img{filter:grayscale(1);transition:filter .25s ease}
.bb-buehne--logofolio:hover>img,.bb-buehne--logofolio:focus-visible>img{filter:none}
@media (hover:none){.bb-buehne--logofolio>img{filter:none}}
.bb-projekt__daten{display:flex;flex-direction:column;gap:26px}
.bb-projekt__block{border-top:1px solid #0a0a0a;padding-top:16px}
.bb-projekt__block .bb-overline{color:#0a0a0a;margin:0 0 10px}
.bb-projekt__block p{margin:0;font-size:15px;line-height:1.75;color:#5e5e5e}
.bb-projekt__block a{color:#0a0a0a;border-bottom:1px solid #0a0a0a}
.bb-katalog__knopf{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid #0a0a0a;border-radius:50%;background:#fff;color:#0a0a0a;font-size:18px;cursor:pointer;transition:background 150ms linear,color 150ms linear}
.bb-katalog__knopf:hover{background:#0a0a0a;color:#fff}
.bb-katalog__knopf:disabled{opacity:.25;cursor:default;background:#fff;color:#0a0a0a}
.bb-katalog__knopf--zurueck{left:16px}
.bb-katalog__knopf--vor{right:16px}
.bb-katalog__zaehler{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:999px;background:#fff;color:#0a0a0a;white-space:nowrap}
@media (max-width:980px){.bb-projekt__galerie{min-height:0}.bb-buehne{flex:none;min-height:0;aspect-ratio:4/3}}
@media (max-width:700px){.bb-artikel__bild img{aspect-ratio:16/10}.bb-katalog__knopf{width:36px;height:36px;font-size:15px}.bb-katalog__knopf--zurueck{left:8px}.bb-katalog__knopf--vor{right:8px}}
@media (max-width:980px){.bb-artikel__spalten,.bb-projekt__spalten{grid-template-columns:minmax(0,1fr)}.bb-artikel__seitenleiste{position:static}.bb-teilen{margin-left:0;width:100%}}

/* Angebotsblock in Artikeln (ANGEBOTE in build/inhalte_seiten.py) */
.bb-angebot{margin-top:64px;padding:clamp(28px,4vw,48px);border-radius:var(--bb-radius);background:#f5f5f5}
.bb-angebot>*+*{margin-top:18px}
.bb-angebot h2{margin-top:6px}
.bb-angebot .bb-overline{margin:0;color:#0a0a0a}
.bb-angebot__liste{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;font-size:15px;line-height:1.5}
.bb-angebot{hyphens:manual}
.bb-angebot__liste li,.bb-angebot__liste li+li{position:relative;padding-left:22px;margin:0}
.bb-angebot__liste li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:#f9d6e8;border:1px solid #0a0a0a}
.bb-angebot .bb-tabelle{margin:28px 0 0;background:#fff;padding:0 18px;border-radius:calc(var(--bb-radius) / 2)}
.bb-angebot__wege{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.bb-angebot__weg{padding:24px;background:#fff;border-radius:calc(var(--bb-radius) / 2);display:flex;flex-direction:column;gap:10px}
.bb-angebot__weg p{margin:0;font-size:15px;line-height:1.6}
.bb-angebot__weg .bb-overline{margin:0}
.bb-angebot__weg a{margin-top:auto;font-size:14px;font-weight:600}
.bb-angebot .bb-angebot__preis{font-family:var(--font-sans);font-weight:300;font-size:44px;line-height:1;letter-spacing:-.03em;color:#0a0a0a}
.bb-angebot__preis small{font-size:15px;font-weight:500;letter-spacing:0;color:#5e5e5e}
.bb-angebot .bb-angebot__fuss{font-size:13px;color:#7a7a7a}
.bb-angebot__knoepfe{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bb-prosa .bb-angebot__knoepfe a.bb-knopf{text-decoration:none;color:#fff}
.bb-prosa .bb-angebot__knoepfe a.bb-knopf:hover{color:#0a0a0a}
.bb-prosa a.bb-angebot__tel{text-decoration:none;font-size:15px;color:#0a0a0a}
@media (max-width:700px){.bb-angebot__liste,.bb-angebot__wege{grid-template-columns:1fr}}
/* Rechtstexte (Wortlaut unverändert aus inhalte/rechtstexte/) */
.bb-rechtstext__zeile{padding-bottom:clamp(64px,8vw,120px)}
.bb-rechtstext .bb-prosa{max-width:820px}
.bb-rechtstext .bb-prosa h2{font-size:clamp(24px,2.2vw,32px);margin-top:48px}
.bb-rechtstext .bb-prosa h3{font-size:18px;margin-top:32px}
.bb-rechtstext .bb-prosa h4{font-size:16px;margin-top:24px;color:#0a0a0a}
.bb-rechtstext .bb-prosa p,.bb-rechtstext .bb-prosa li{font-size:15px;line-height:1.7}
.bb-rechtstext .bb-prosa a{word-break:break-word}

/* Leistungsmenü (Philipp 25.10.2026): einfache Liste unter „Leistungen“, Webdesign klappt eine Ebene weiter auf.
   Öffnet beim Überfahren, bei Tastaturfokus und per Klick auf den Pfeil (Touch). */
.bb-nav-gruppe{position:relative;display:flex;align-items:center;gap:2px;align-self:stretch}
.bb-nav-gruppe>a{display:flex;align-items:center;align-self:stretch}
.bb-nav-pfeil{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;color:#2e2e2e;cursor:pointer}
/* kein Hover-Kreis am Pfeil (Philipp 26.10.2026: „kein hover hier“), nur die Drehung zeigt den offenen Zustand */
.bb-nav-pfeil[aria-expanded="true"] svg{transform:rotate(180deg)}
.bb-nav-panel{position:absolute;z-index:60;top:100%;left:-18px}
.bb-nav-gruppe:hover .bb-nav-panel,.bb-nav-gruppe:focus-within .bb-nav-panel{display:block}
.bb-dd{list-style:none;margin:0;padding:0}
.bb-dd li{margin:0}
.bb-dd--kopf,.bb-dd--kopf .bb-dd--unter{min-width:230px;padding:8px 0;background:#fff;border:1px solid #ebebeb;border-radius:var(--bb-radius);box-shadow:0 24px 48px -28px rgba(10,10,10,.3);text-align:left}
.bb-dd--kopf li{position:relative}
.bb-dd--kopf a{display:block;padding:9px 20px;font-size:14px;line-height:1.3;color:#0a0a0a;white-space:nowrap}
.bb-dd--kopf a:hover,.bb-dd--kopf a:focus-visible{background:#0a0a0a;color:#fff;text-decoration:none}
.bb-dd--kopf .bb-dd__hat-unter>a{padding-right:44px}
/* Gruppe ohne eigene Seite (Branding): der ganze Eintrag ist der Knopf */
.bb-dd--kopf .bb-dd__gruppe{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:9px 16px 9px 20px;border:0;background:none;font:inherit;font-size:14px;line-height:1.3;color:#0a0a0a;text-align:left;white-space:nowrap;cursor:pointer}
.bb-dd--kopf .bb-dd__gruppe span{font-size:16px;line-height:1}
.bb-dd--kopf .bb-dd__hat-unter:hover>.bb-dd__gruppe,.bb-dd--kopf .bb-dd__gruppe:focus-visible,.bb-dd--kopf .bb-dd__gruppe[aria-expanded="true"]{background:#0a0a0a;color:#fff}
.bb-dd--kopf .bb-dd__pfeil{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:inherit;font-size:16px;cursor:pointer}
.bb-dd--kopf .bb-dd__hat-unter:hover>.bb-dd__pfeil,.bb-dd--kopf .bb-dd__hat-unter>a:hover+.bb-dd__pfeil{color:#fff}
.bb-dd--kopf .bb-dd--unter{position:absolute;left:100%;top:-9px;margin-left:-1px}
.bb-dd--kopf .bb-dd__hat-unter:hover>.bb-dd--unter,.bb-dd--kopf .bb-dd__hat-unter:focus-within>.bb-dd--unter{display:block}
.bb-dd--kopf .bb-dd__hat-unter:hover>a{background:#0a0a0a;color:#fff}
.bb-dd--kopf .bb-dd__alle{margin-top:6px;padding-top:6px;border-top:1px solid #ebebeb}
.bb-dd--kopf .bb-dd__alle a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* Website-Unterseiten auf /leistungen/ */
.bb-leistungen__eintrag .bb-leistungen__unter{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 24px;padding:0;list-style:none}
.bb-leistungen__eintrag .bb-leistungen__unter a{display:inline-block;padding:8px 14px;border:1px solid #d6d6d6;border-radius:999px;font-size:13px;line-height:1.2;color:#0a0a0a;transition:background 150ms linear,color 150ms linear,border-color 150ms linear}
.bb-leistungen__eintrag .bb-leistungen__unter a:hover{background:#0a0a0a;border-color:#0a0a0a;color:#fff;text-decoration:none}

/* Lightbox (site.js, Links mit data-lightbox) */
.bb-lightbox{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:72px 88px;background:rgba(10,10,10,.92)}
.bb-lightbox[hidden]{display:none}
.bb-lightbox__bild{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%;max-height:100%}
.bb-lightbox__bild img{display:block;max-width:min(1400px,100%);max-height:calc(100vh - 200px);width:auto;height:auto;object-fit:contain;border-radius:var(--bb-radius);background:#fff}
.bb-lightbox__bild figcaption{color:#fff;font-size:15px;text-align:center}
.bb-lightbox__zu,.bb-lightbox__knopf{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background 150ms linear,color 150ms linear}
.bb-lightbox__zu:hover,.bb-lightbox__knopf:hover,.bb-lightbox__zu:focus-visible,.bb-lightbox__knopf:focus-visible{background:#fff;color:#0a0a0a;outline:none}
.bb-lightbox__zu{top:20px;right:20px;font-size:26px}
.bb-lightbox__knopf{top:50%;transform:translateY(-50%)}
.bb-lightbox__knopf--zurueck{left:20px}
.bb-lightbox__knopf--vor{right:20px}
.bb-lightbox__knopf[hidden]{display:none}
.bb-lightbox__zaehler{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);margin:0;color:#d6d6d6}
@media (max-width:700px){.bb-lightbox{padding:72px 16px 96px}.bb-lightbox__knopf{top:auto;bottom:16px;transform:none}.bb-lightbox__zaehler{bottom:30px}}
/* Folien aus dem Blätterkatalog (16:9, bbLightbox in site.js): deckend schwarz (sonst scheinen Katalogknöpfe durch), eckig, hochkant über die ganze Breite, quer fast die ganze Höhe, Zähler dann oben links (Philipp 25.10.2026) */
.bb-lightbox--folien{background:#0a0a0a}
.bb-lightbox--folien .bb-lightbox__bild img{border-radius:0}
@media (max-width:700px){.bb-lightbox--folien{padding-inline:0}}
@media (orientation:landscape) and (max-height:520px){.bb-lightbox--folien{padding:12px 76px}.bb-lightbox--folien .bb-lightbox__bild{gap:8px}.bb-lightbox--folien .bb-lightbox__bild img{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}.bb-lightbox--folien .bb-lightbox__zu{top:12px;right:14px}.bb-lightbox--folien .bb-lightbox__zaehler{top:24px;bottom:auto;left:20px;transform:none}}

/* Terminband-Visual aus Kundensicht (Philipp 25.10.2026): Terminbuchung mit Ansprechpartner */
.cta__tage{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:12px 18px 0}
.cta__tage span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border:1px solid #ebebeb;border-radius:8px;font:500 11px/1 var(--font-sans);color:#5e5e5e}
.cta__tage b{font:600 15px/1 var(--font-sans);color:#0a0a0a}
.cta__tage .ist-aktiv{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.cta__tage .ist-aktiv b{color:#fff}
.cta__zeiten{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 18px 14px}
.cta__zeiten span{padding:8px 0;border:1px solid #d6d6d6;border-radius:999px;text-align:center;font:400 12px/1 var(--font-mono);color:#0a0a0a}
.cta__zeiten .ist-aktiv{border-color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}
.cta__person-kopf{display:flex;align-items:center;gap:12px;padding:12px 18px 0}
.cta__person-kopf img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#f0f0f0}
.cta__person-kopf strong{display:block;font:600 14px/1.3 var(--font-sans)}
.cta__person-kopf span{font-size:12px;color:#5e5e5e}

/* ==========================================================================
   Barrierefreiheits-Widget (site.js, wie auf bueroblanko.de seit 08.10.2026).
   Look nach Designsystem BBKD Final: schwarz/weiß, Rosé als Akzent, Pill-Knöpfe.
   Teil 1: Widget. Teil 2: Wirkungen auf die Seite über data-bf-*-Attribute auf <html>.
   ========================================================================== */
@font-face{font-family:"OpenDyslexic";font-weight:400;font-display:swap;src:url("/assets/fonts/OpenDyslexic-Regular.woff") format("woff")}
@font-face{font-family:"OpenDyslexic";font-weight:700;font-display:swap;src:url("/assets/fonts/OpenDyslexic-Bold.woff") format("woff")}
.bf-widget{font-family:var(--font-sans)}
.bf-knopf{position:fixed;right:20px;bottom:20px;z-index:9990;display:grid;place-items:center;width:56px;height:56px;padding:0;border:2px solid #fff;border-radius:50%;background:#0a0a0a;color:#fff;cursor:pointer;transition:background .15s linear}
.bf-knopf:hover{background:#fff;color:#0a0a0a;border-color:#0a0a0a}
.bf-knopf svg{width:30px;height:30px}
.bf-zaehler{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 5px;border:2px solid #fff;border-radius:11px;background:#f9d6e8;color:#0a0a0a;font:600 12px/18px var(--font-sans)}
.bf-zaehler[hidden]{display:none}
.bf-widget :focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
@media (max-width:980px){.bf-knopf{right:16px;bottom:16px;width:50px;height:50px}.bf-knopf svg{width:27px;height:27px}}
.bf-leiste{position:fixed;top:0;right:0;bottom:0;z-index:9991;display:flex;flex-direction:column;width:min(520px,100vw);background:#f5f5f5;color:#0a0a0a;font:400 15px/1.5 var(--font-sans);letter-spacing:normal;border-left:1px solid #ebebeb;overflow-y:auto;overscroll-behavior:contain}
.bf-leiste[hidden]{display:none}
.bf-kopf{position:relative;padding:34px 30px 28px;background:#0a0a0a;color:#fff;text-align:center}
.bf-kopf-icon{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#f9d6e8;color:#0a0a0a}
.bf-kopf-icon svg{width:30px;height:30px}
.bf-kopf h2{margin:14px 0 6px;color:#fff;font:300 26px/1.15 var(--font-sans);letter-spacing:-.02em}
.bf-kopf h2:focus{outline:none}
.bf-kopf p{margin:0;color:#bbbbbb;font-size:14px}
.bf-zu{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.bf-zu:hover{background:#fff;color:#0a0a0a}
.bf-zu svg{width:20px;height:20px}
.bf-inhalt{padding:18px 16px 32px}
.bf-gruppe{margin-bottom:14px;padding:20px;border:1px solid #ebebeb;border-radius:16px;background:#fff}
.bf-gruppe h3{margin:0 0 14px;color:#5e5e5e;font:600 11px/1.2 var(--font-sans);letter-spacing:.2em;text-transform:uppercase}
.bf-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bf-kachel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:108px;padding:14px 8px;border:1px solid #ebebeb;border-radius:12px;background:#f5f5f5;color:#0a0a0a;font:500 14px/1.3 var(--font-sans);text-align:center;cursor:pointer;transition:background .15s linear,border-color .15s linear}
.bf-kachel:hover{border-color:#0a0a0a}
.bf-kachel[aria-pressed="true"]{border-color:#0a0a0a;background:#0a0a0a;color:#fff}
.bf-kachel-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:#0a0a0a}
.bf-kachel[aria-pressed="true"] .bf-kachel-icon{background:#f9d6e8}
.bf-kachel-icon svg{width:24px;height:24px}
.bf-stufen{grid-column:span 3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border:1px solid #ebebeb;border-radius:12px;background:#f5f5f5}
.bf-stufen-name{font-weight:600}
.bf-stufen-regler{display:flex;align-items:center;gap:8px}
.bf-stufen-regler output{min-width:74px;font-size:13px;text-align:center}
.bf-stufen-regler button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#0a0a0a;color:#fff;cursor:pointer}
.bf-stufen-regler button:disabled{background:#d6d6d6;cursor:default}
.bf-stufen-regler svg{width:18px;height:18px}
.bf-zuruecksetzen{display:block;width:100%;padding:15px 20px;border:0;border-radius:999px;background:#0a0a0a;color:#fff;font:600 11px/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.bf-zuruecksetzen:hover{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}
.bf-zuruecksetzen:disabled{background:#d6d6d6;color:#7a7a7a;cursor:default}
@media (max-width:480px){.bf-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.bf-stufen{grid-column:span 2;flex-wrap:wrap;gap:8px}.bf-stufen-regler{margin-left:auto}.bf-kopf{padding:30px 22px 24px}}
.bf-lesezeile{position:fixed;left:0;right:0;z-index:9989;height:10px;margin-top:-5px;border-top:2px solid #0a0a0a;border-bottom:2px solid #0a0a0a;background:rgba(249,214,232,.55);pointer-events:none}
.bf-lesezeile[hidden]{display:none}
/* Wirkungen auf die Seite, das Widget nimmt sich jeweils aus */
html[data-bf-text="1"] body{zoom:1.1}
html[data-bf-text="2"] body{zoom:1.2}
html[data-bf-text="3"] body{zoom:1.35}
html[data-bf-text="1"] .bf-widget{zoom:calc(1/1.1)}
html[data-bf-text="2"] .bf-widget{zoom:calc(1/1.2)}
html[data-bf-text="3"] .bf-widget{zoom:calc(1/1.35)}
html[data-bf-zeile="1"] :where(p,li,dd,dt,td,th,blockquote,figcaption,label):not(.bf-widget *){line-height:2!important}
html[data-bf-zeile="2"] :where(p,li,dd,dt,td,th,blockquote,figcaption,label):not(.bf-widget *){line-height:2.5!important}
html[data-bf-abstand="1"] :where(p,li,a,span,td,th,label,figcaption,blockquote,h1,h2,h3,h4,h5,h6):not(.bf-widget *){letter-spacing:.06em!important;word-spacing:.12em!important}
html[data-bf-abstand="2"] :where(p,li,a,span,td,th,label,figcaption,blockquote,h1,h2,h3,h4,h5,h6):not(.bf-widget *){letter-spacing:.12em!important;word-spacing:.24em!important}
html[data-bf-schrift="lesbar"] body *{font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif!important}
html[data-bf-schrift="legasthenie"] body *{font-family:"OpenDyslexic",Verdana,Arial,sans-serif!important}
html[data-bf-kontrast="dunkel"] :is(img,video,picture,iframe){filter:invert(1) hue-rotate(180deg)}
html[data-bf-links] a:not(.bf-widget *){text-decoration:underline!important;text-underline-offset:3px;outline:2px dashed currentColor;outline-offset:2px}
html[data-bf-titel] :is(h1,h2,h3,h4,h5,h6):not(.bf-widget *){outline:2px solid currentColor;outline-offset:4px}
html[data-bf-animationen] *:not(.bf-widget *),html[data-bf-animationen] *::before,html[data-bf-animationen] *::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
html[data-bf-bilder] :is(img,video,picture,iframe,svg image):not(.bf-widget *){visibility:hidden!important}
html[data-bf-bilder] *:not(.bf-widget *){background-image:none!important}
html[data-bf-cursor],html[data-bf-cursor] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 16-13 3.6L19 38z' fill='%230a0a0a' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4,auto!important}
html[data-bf-cursor] :is(a,button,[role="button"],label,select,summary){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 6a3 3 0 0 1 6 0v14l9 2a4 4 0 0 1 3 4.5L34 40H17l-8-12a3 3 0 0 1 4.6-3.8L18 28z' fill='%230a0a0a' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 21 4,pointer!important}
@media print{.bf-widget{display:none}}
/* Ratgeber-Links: Buch-Icon vor Links auf Journal-Artikel, gesetzt von build.py ratgeber_links (Philipp 25.10.2026) */
a.bb-ratgeber{padding-left:1.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E") no-repeat 0 50%/1em 1em}
/* Footer „Mehr erfahren“ hat eine eigene Linie: beim Hover keine zweite Unterstreichung, Linie wird rosé (Philipp 25.10.2026) */
footer a.fuss-mehr:hover{text-decoration:none;border-bottom-color:#f9d6e8 !important}

/* Fußzeile, Spalte Leistungen (Philipp 25.10.2026: „verlinken, ohne Linkfarbe oder unterstreichung“): Links in der Textfarbe, Hover unterstreicht über die Regel für footer a oben */
footer .fuss-leistungen a{color:inherit;text-decoration:none}
/* Hover- und Fokuszustände aus dem Claude-Design-Export (style-hover → Klasse mit !important, wie support.js).
   Klassennamen = Hash aus Zustand und Regel; neue Zustände hier ergänzen. */
.p18367cd:hover{opacity:1 !important}
.p1c4f905:hover{opacity:1 !important;border-color:#f9d6e8 !important}
.p2c98381:hover{opacity:1 !important;background:#fff !important;color:#0a0a0a !important;box-shadow:inset 0 0 0 1px #0a0a0a !important}
.p3537549:hover{opacity:1 !important}
.p511c4b9:hover{background:#fff !important;color:#0a0a0a !important}
.pa27649f:hover{opacity:1 !important;background:#0a0a0a !important;color:#fff !important}
.pc5aafcd:focus{box-shadow:inset 0 -2px 0 #f9d6e8 !important}
.pc71640c:hover{opacity:1 !important;background:#fff !important;color:#0a0a0a !important}
.pf3ee47a:hover{opacity:1 !important;color:#000 !important;-webkit-text-stroke:2px #b6b6b6 !important}