:root{
--ink:#000000;
--brand:#0f172a;
--paper:#f7f2eb;
--paper-2:#f2e9de;
--card:#ffffff;
--line:#e6ddd0;
--line-2:#d8cdbb;
/* Amber in zwei Staerken:
--clay der Marken-Ton. Flaechen, Rahmen, Icons, Akzentwoerter in
Ueberschriften. Bleibt unveraendert, so soll die Seite aussehen.
--link dunkleres Amber, ausschliesslich fuer Links im Fliesstext.
Warum nur die Links dunkler (06.08.2026): der Marken-Ton kommt auf dem
Papierton auf 1,93:1. Bei einem Link, den man anklicken koennen soll, ist
das zu wenig, WCAG AA verlangt 4,5:1. Der Link-Ton erreicht mindestens
5,0:1 auf allen drei Hintergruenden. Beim Aendern nachrechnen, nicht nach
Augenmass entscheiden. Ueberschriften und Marken bleiben bewusst im
hellen Ton, das ist eine Design-Entscheidung des Inhabers. */
--clay:#f59e0b;
--clay-link:#f59e0b;
--link:#8a5a06;
--clay-soft:#fde7c0;
--clay-softer:#fdf4e4;
--maxw:1080px;
--col:720px;
--r:16px;
--r-sm:10px;
--topbar-h:53px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font);font-size:18px;line-height:1.72;color:var(--ink);
background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:1000;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--clay);z-index:300;transition:width .12s linear}
/* Kopfzeile */
header.topbar{position:sticky;top:0;z-index:200;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
/* 25px statt 22px: die Logo-Datei hat seit 12.08.2026 einen Rand im viewBox,
damit die Buchstaben (vor allem das letzte "s") beim Skalieren nicht mehr
angeschnitten werden. Die 25px gleichen diesen Rand aus, die Schrift ist
dadurch optisch gleich gross wie vorher. */
.brand .logo{height:25px;width:auto;display:block;flex:none}
nav.toc{display:flex;gap:.4rem;align-items:center}
nav.toc a{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);line-height:1;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
nav.toc a:hover,nav.toc a.active{background:var(--clay-soft);border-color:var(--clay)}
nav.toc a.cta{background:var(--ink);color:#fff;border-color:var(--ink)}
nav.toc a.cta:hover,nav.toc a.cta.active{background:#2a2521;border-color:#2a2521}
@media(max-width:920px){nav.toc a:not(.cta){display:none}}
main{display:block}
section{padding:5.5rem 1.5rem;border-bottom:1px solid var(--line);position:relative;scroll-margin-top:calc(var(--topbar-h) + 12px)}
section.alt{background:var(--paper-2)}
.wrap{max-width:var(--maxw);margin:0 auto}
.col{max-width:var(--col)}
.chapter-tag{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.8rem;color:var(--clay-link);margin-bottom:1.1rem;font-weight:600}
.chapter-tag .no{background:var(--clay);color:#fff;padding:.12rem .55rem;border-radius:6px;font-size:.72rem;letter-spacing:.02em}
.chapter-tag .cmd{opacity:.75}
/* Lange Woerter duerfen umbrechen, statt aus dem Bild zu laufen. Betrifft auf
schmalen Geraeten Ueberschriften wie "Marktueberwachungsbehoerde" und lange
Links in den Rechtstexten. "hyphens:auto" trennt dabei sauber mit
Bindestrich, das setzt das lang="de" am html-Element voraus, das gesetzt
ist. Auf breiten Bildschirmen aendert sich dadurch nichts: beide Regeln
greifen nur, wenn ein Wort sonst nicht passen wuerde. */
h1,h2,h3,h4{overflow-wrap:break-word}
p,li,dd,dt,figcaption,.prose a{overflow-wrap:break-word}
/* Silbentrennung bewusst NUR fuer Zwischenueberschriften. Dort stehen lange
Sachbegriffe ("Marktueberwachungsbehoerde"), die auch verkleinert in keine
Handy-Zeile passen. Die Hauptueberschrift bleibt ungetrennt: dort saehe
"KI-An-wendungen" schlecht aus, sie wird stattdessen kleiner (siehe unten). */
h2,h3,h4{hyphens:auto}
h1{font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.04;letter-spacing:-.035em;font-weight:800}
/* Auf schmalen Handys war die Untergrenze von 2.4rem zu gross: lange Woerter
wie "Automatisierungen." oder "Suchmaschinenoptimierung" passten nicht in
eine Zeile und wurden rechts abgeschnitten. Unterhalb von 460px waechst die
Ueberschrift deshalb mit der Bildschirmbreite mit. Ab 461px bleibt alles
wie bisher, dort passt das laengste Wort wieder. */
@media(max-width:460px){
h1{font-size:clamp(1.7rem,7.4vw,2.4rem)}
}
h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin-bottom:1.1rem}
h3{font-size:1.18rem;line-height:1.15;letter-spacing:-.01em;font-weight:750;margin-bottom:.45rem}
p{margin-bottom:1.15rem;max-width:66ch}
.sum{font-size:1.28rem;line-height:1.55;font-weight:600;letter-spacing:-.01em;margin-bottom:1.4rem;max-width:60ch}
strong{font-weight:750}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2a2521}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Hero */
.hero{padding:4.5rem 1.5rem 4.5rem;border-bottom:1px solid var(--line);background:
radial-gradient(900px 420px at 88% -10%, var(--clay-soft) 0%, rgba(246,230,220,0) 60%),
var(--paper)}
.hero .grid-hero{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
/* minmax(0,1fr) statt 1fr: eine Grid-Spalte ist von sich aus mindestens so
breit wie ihr laengstes unteilbares Wort. Dadurch wurde die Spalte auf dem
Handy breiter als der Bildschirm ("Automatisierungen." in der Ueberschrift).
Die 0 als Minimum hebt das auf. */
@media(max-width:900px){.hero .grid-hero{grid-template-columns:minmax(0,1fr);gap:2.4rem}}
.hero .kick{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.82rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem;margin-bottom:1.6rem;font-weight:600}
.hero .kick .dot{width:8px;height:8px;border-radius:50%;background:#2faa6a;box-shadow:0 0 0 3px rgba(47,170,106,.18)}
.hero h1{margin-bottom:1.4rem}
/* Farbakzent in Ueberschriften. Lag frueher als style="color:..." direkt im
HTML (33 Stellen). Als Klasse, damit die CSP ohne 'unsafe-inline' fuer
Styles auskommt. */
.accent{color:var(--clay-link)}
.hero .sub{font-size:1.2rem;line-height:1.6;max-width:44ch;margin-bottom:2rem;font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-figure{position:relative}
.hero-figure .frame{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.7rem;box-shadow:0 24px 60px -28px rgba(28,24,20,.4)}
.hero-figure .frame img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) - 6px)}
.hero-figure figcaption{font-family:var(--mono);font-size:.74rem;color:var(--clay-link);margin-top:.7rem;text-align:center;opacity:.85}
.hero-meta{max-width:var(--maxw);margin:2.8rem auto 0;display:flex;flex-wrap:wrap;gap:2.2rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.hero-meta div{min-width:120px}
.hero-meta .big{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.hero-meta .lbl{font-size:.85rem;opacity:.7}
/* Leistungs-Karten */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:2.4rem}
.scard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.scard:hover{border-color:var(--line-2);box-shadow:0 16px 38px -24px rgba(28,24,20,.4)}
.scard .shot{aspect-ratio:1/1;background:var(--paper-2);overflow:hidden;border-bottom:1px solid var(--line)}
/* Karten mit Bildern im Querformat 4:3. Die Bilder tragen das KI-Kennzeichen
unten rechts eingebrannt, im quadratischen Feld wuerde der Browser es seitlich
wegschneiden. Nur die Seiten mit diesen Bildern bekommen die Klasse. */
.scard .shot--43{aspect-ratio:4/3}
.scard .shot img{width:100%;height:100%;object-fit:cover;display:block}
.scard .body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.scard .num{font-family:var(--mono);font-size:.76rem;color:var(--clay-link);font-weight:600;margin-bottom:.5rem;letter-spacing:.02em}
.scard h3{margin-bottom:.4rem}
.scard p{font-size:1rem;line-height:1.6;margin-bottom:1rem}
.scard .more{margin-top:auto;font-size:.95rem;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem}
.scard:hover .more{color:var(--clay-link)}
/* Abstandshelfer. Ersetzen die frueheren style="margin-top:..."-Angaben
im HTML, damit die CSP ohne 'unsafe-inline' fuer Styles auskommt. */
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:2.4rem}
/* Kontaktformular */
/* Hinweiskasten fuer fehlgeschlagenes Absenden. Wird von main.js
eingeblendet, wenn die URL ein Fehlerkuerzel enthaelt. */
.form-hinweis{max-width:var(--col);margin-top:2rem;padding:1rem 1.2rem;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font-size:.98rem;line-height:1.6}
.form-hinweis[hidden]{display:none}
.form{max-width:var(--col);margin-top:2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-group{margin-bottom:1.1rem;display:flex;flex-direction:column}
/* Honeypot: unsichtbares Feld, das nur Bots ausfuellen. Muss NACH und
spezifischer als .form-group stehen, sonst gewinnt dessen display:flex
und das Feld wird sichtbar. */
.form-group.honeypot{display:none}
.form-group label{font-size:.85rem;font-weight:650;margin-bottom:.4rem}
.form-group input,.form-group textarea{font-family:inherit;font-size:1rem;padding:.8rem 1rem;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);outline:none;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--clay)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink);opacity:.4}
.form-checkbox label{flex-direction:row;align-items:flex-start;gap:.6rem;font-size:.92rem;font-weight:500;line-height:1.5}
.form-checkbox input{width:18px;height:18px;margin-top:.2rem;flex:none;accent-color:var(--clay)}
.form-checkbox a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.form button[type=submit]{margin-top:.4rem;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:.9rem 1.6rem;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s}
.form button[type=submit]:hover{background:#2a2521}
/* Reveal (nur mit aktivem JS verstecken, sonst ist Text immer sichtbar).
Die Bedingung lief frueher ueber die Klasse "js", die ein eigenes Skript im
Seitenkopf setzte. (scripting: enabled) sagt dasselbe und spart diese Datei
samt ihrer Netzwerkanfrage im kritischen Ladepfad.
WICHTIG, das ist der Sicherheitsmechanismus: Kennt ein Browser die Abfrage
nicht, ist die ganze Regel ungueltig und der Text bleibt sichtbar. Ein
Ausfall fuehrt also nie zu leeren Seiten, das war hier schon einmal ein
echter Fehler auf der Datenschutzseite. */
@media (scripting: enabled){
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
}
footer{padding:3rem 1.5rem;text-align:center;color:var(--ink);font-size:.9rem;background:var(--paper)}
/* inline-flex (statt flex aus .brand): der Block schrumpft auf Logobreite und
wird durch text-align:center des footer mittig gesetzt. Lag frueher als
style="display:inline-flex" im HTML. */
footer .brand{display:inline-flex;justify-content:center;margin-bottom:.8rem}
/* wrap ist noetig: ohne es stehen die vier Links auf einem Handy zwangsweise
in einer Zeile und "Barrierefreiheit" ragt rechts aus dem Bild. */
footer .flinks{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;justify-content:center;margin-bottom:.8rem}
footer .flinks a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.88rem}
/* Bestaetigungsseite: Qex-R4 im Kreis ueber der Ueberschrift, darunter der
Hinweis auf Instagram mit Icon */
.hero.hero-text .grid-hero.danke-grid{grid-template-columns:auto 1fr;gap:2.6rem;align-items:center}
.danke-figur{display:flex;justify-content:center}
.danke-qex{width:auto;height:260px;display:block}
@media(max-width:760px){
.hero.hero-text .grid-hero.danke-grid{grid-template-columns:1fr;gap:1.4rem;justify-items:start}
.danke-qex{height:180px}
}
/* Fehlerseite 404: nutzt das Raster der Bestaetigungsseite. Qex-R4 liegt dort
zerlegt am Boden, das Bild ist also quer und wird ueber die Breite gesteuert
statt ueber die Hoehe. */
.fehler-qex{width:360px;max-width:100%;height:auto;display:block}
.fehler-weiter{margin:2rem 0 .8rem}
/* Der Punkt vor dem Etikett ist ueberall gruen, also "alles in Ordnung". Vor
"Fehler 404" waere das ein Widerspruch, deshalb hier rot. Gleiche Kraft und
gleicher Lichthof wie das Gruen. Der volle Selektor ist noetig: die gruene
Regel heisst ".hero .kick .dot" und waere sonst spezifischer. */
.hero .kick .dot.dot--fehler{background:#d9483b;box-shadow:0 0 0 3px rgba(217,72,59,.18)}
@media(max-width:760px){
.fehler-qex{width:260px}
}
/* Kontaktseite: Figur rechts neben dem Textblock. Bewusst nur so hoch, dass
der Kopfbereich dadurch kaum waechst, die Figur darf den Textblock leicht
ueberragen. Ohne Flaeche und ohne Rahmen, sie steht direkt auf dem
Seitenhintergrund. */
.hero.hero-text .grid-hero.kontakt-grid{grid-template-columns:1fr auto;gap:2.6rem;align-items:center}
.kontakt-figur{display:flex;justify-content:flex-end}
.kontakt-loewe{width:auto;height:300px;display:block}
@media(max-width:760px){
.hero.hero-text .grid-hero.kontakt-grid{grid-template-columns:1fr;gap:1.4rem;justify-items:start}
.kontakt-figur{justify-content:flex-start}
.kontakt-loewe{height:200px}
}
/* Bewegung der Figur: Einflug beim Laden. Sie kommt von rechts aussen herein, leicht gedreht
und minimal kleiner, und schwingt am Ende ein Stueck ueber die Endlage
hinaus, damit es nach Flug aussieht und nicht nach Schieben. Startet mit
kurzer Verzoegerung, damit das Bild in der Regel schon geladen ist: bis
dahin ist es durchsichtig, es blitzt also nichts Halbfertiges auf. */
@keyframes loewe-einflug{
from{opacity:0;transform:translate(90px,26px) rotate(7deg) scale(.94)}
to{opacity:1;transform:none}
}
@media (scripting: enabled){
.kontakt-loewe{
opacity:0;
animation:loewe-einflug 1.1s cubic-bezier(.22,1.15,.36,1) .15s forwards;
}
}
@media (prefers-reduced-motion:reduce) and (scripting: enabled){
.kontakt-loewe{opacity:1;animation:none}
}
.danke-insta{display:flex;align-items:flex-start;gap:.55rem;margin-top:2rem;max-width:40ch}
.danke-insta svg{width:18px;height:18px;flex:none;margin-top:.22rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer .social{display:flex;justify-content:center}
footer .social a{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:.88rem}
footer .social a:hover{color:var(--link)}
footer .social svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer .flinks a:hover{color:var(--link)}
footer p{color:var(--ink);max-width:60ch;margin:0 auto;font-size:.88rem}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition-duration:.001ms !important}
}
@media (prefers-reduced-motion:reduce) and (scripting: enabled){
.reveal{opacity:1;transform:none;transition:none}
}
/* ===== Unterseiten-Bausteine ===== */
.section-sub{font-family:var(--mono);font-size:.9rem;color:var(--clay-link);font-weight:600;margin:-.4rem 0 1.6rem}
/* Icon-Karte (Leistung ohne Foto) */
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;transition:border-color .2s,box-shadow .2s}
.icard:hover{border-color:var(--line-2);box-shadow:0 14px 34px -22px rgba(28,24,20,.4)}
.icard .ic{width:46px;height:46px;border-radius:12px;background:var(--clay-softer);border:1px solid var(--clay-soft);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.icard .ic svg{width:24px;height:24px;stroke:var(--clay-link);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icard h3{margin-bottom:.4rem}
.icard h3 a{color:inherit;text-decoration:none}
.icard h3 a:hover{color:var(--clay-link)}
.icard p{font-size:1rem;line-height:1.6;margin-bottom:0}
.icard p a,.text-large a,.text-small a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
/* Gegenueberstellung zweier Systeme (Payload / WordPress). Der Systemname
steht als Marke in der Karte, die Ueberschrift darueber nennt das Thema.
Bewusst kein , damit die Gliederung h2 > h3 sauber bleibt. */
.vs-topic{margin-top:2.8rem}
.vs-topic .cards{margin-top:.9rem}
.vs-label{display:block;font-family:var(--mono);font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-link);margin-bottom:.35rem}
/* Prozess-Schritte */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2.4rem}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem}
.step .snum{font-family:var(--mono);font-weight:800;font-size:1.1rem;color:#fff;background:var(--clay);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.step h3{font-size:1.05rem;margin-bottom:.25rem}
.step p{font-size:.95rem;line-height:1.55;margin-bottom:0;opacity:.85}
/* Verwandte Links */
.related{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem}
.related a{font-size:.92rem;font-weight:650;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:.6rem 1.1rem;transition:background .2s,border-color .2s,color .2s}
.related a:hover{background:var(--clay-soft);border-color:var(--clay);color:var(--ink)}
/* Zwei-Spalten-Intro auf Unterseiten */
.lead{font-size:1.15rem;line-height:1.7;max-width:64ch;margin-bottom:0}
/* ===== Live-Ergaenzungen (Mehrseiten-Site) ===== */
/* Hero ohne Bild (Kontakt, Recht, Textseiten) */
.hero.hero-text{background:radial-gradient(900px 420px at 88% -10%, var(--clay-soft) 0%, rgba(246,230,220,0) 60%), var(--paper)}
.hero.hero-text .grid-hero{grid-template-columns:1fr}
/* Mobile-Navigation */
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{content:"";display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s}
.nav-toggle-icon::before{position:absolute;top:-6px}
.nav-toggle-icon::after{position:absolute;top:6px}
.mobile-nav{position:fixed;inset:0;background:var(--paper);z-index:500;padding:5rem 1.5rem 2rem;display:flex;flex-direction:column}
.mobile-nav[hidden]{display:none}
.mobile-nav__close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;cursor:pointer;font-size:2rem;line-height:1;color:var(--ink)}
.mobile-nav__links{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}
.mobile-nav__links a{display:block;font-size:1.3rem;font-weight:700;color:var(--ink);text-decoration:none;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mobile-nav__links a.active{color:var(--link)}
body.menu-is-open{overflow:hidden}
@media(max-width:920px){.nav-toggle{display:inline-flex}}
/* Tool-/Plattform-Liste */
.tools{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0}
.tools span{font-family:var(--mono);font-size:.92rem;font-weight:650;background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1rem}
.text-large{font-size:1.18rem;line-height:1.7;max-width:64ch}
.text-small{font-size:.95rem;opacity:.8;max-width:64ch}
/* Lange Textseiten (Impressum, Datenschutz): Container linksbuendig volle Breite,
Zeilenlaenge ueber die Kind-Elemente begrenzt (nicht zentriert verschmaelert) */
.prose{max-width:var(--maxw)}
.prose > *{max-width:var(--col)}
.prose > :first-child{margin-top:0}
section.legal{padding-top:2.25rem}
.prose h2{font-size:1.5rem;margin:2rem 0 .6rem}
.prose h3{font-size:1.15rem;margin:1.4rem 0 .4rem}
.prose p{margin-bottom:1rem;line-height:1.7}
.prose a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.prose ul{margin:0 0 1rem 1.2rem;line-height:1.7}
.back-link{color:var(--link);text-decoration:none;font-weight:700}
.back-link:hover{text-decoration:underline}
/* Impressum-Siegel */
.siegel-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;margin-top:2rem}
.siegel-row img{display:block;height:auto}
/* ===== Ablauf / Journey (anschaulicher Prozess mit Icons + Bildern) ===== */
.journey{margin-top:2.4rem}
.journey__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.journey__eyebrow{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--clay-link)}
.replay{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:.55rem 1.1rem;font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.replay:hover{background:var(--clay-soft);border-color:var(--clay)}
.replay svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.replay.is-playing{opacity:.55;pointer-events:none}
.jstrip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0}
.jstage{position:relative;display:flex;flex-direction:column;gap:1.05rem;min-width:0;padding:4px 10px 0}
.jstage::after{content:"";position:absolute;top:78px;right:-11px;width:22px;height:3px;background:radial-gradient(circle, var(--dot,var(--line-2)) 1.1px, transparent 1.7px) center/7px 3px repeat-x;z-index:4}
.jstage:last-child::after{display:none}
.jstage.lit::after{--dot:var(--clay)}
.jstage__canvas{position:relative;height:150px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .35s,border-color .35s,box-shadow .35s}
.jstage.on .jstage__canvas{transform:translateY(-5px);border-color:var(--clay);box-shadow:0 0 0 4px var(--clay-softer),0 16px 38px -24px rgba(28,24,20,.4)}
.jstage.done .jstage__canvas{border-color:var(--line-2)}
.jstage__meta{display:flex;flex-direction:column;gap:.15rem}
.jstage__hd{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.jstage__num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line-2);color:var(--ink);font-size:.78rem;font-weight:800;flex:none;font-family:var(--mono);transition:background .3s,border-color .3s,color .3s}
.jstage.on .jstage__num,.jstage.done .jstage__num{background:var(--clay);border-color:var(--clay);color:#fff}
.jstage__t{font-size:1rem;font-weight:750;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.jstage__d{font-size:.9rem;color:var(--ink);opacity:.82;line-height:1.4}
/* Canvas-Inhalte: Icon-Kachel oder Bild */
.cv-icon{width:72px;height:72px;border-radius:18px;background:var(--clay-softer);border:1px solid var(--clay-soft);display:grid;place-items:center}
.cv-icon svg{width:36px;height:36px;stroke:var(--clay-link);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cv-img{position:absolute;inset:0;background-size:cover;background-position:center}
.cv-badge{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--clay);color:#fff;box-shadow:0 8px 16px -6px rgba(0,0,0,.45)}
.cv-badge svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cv-badge.green{background:#2f9e63}
/* Mobil: Ablauf von oben nach unten, gepunktete Linie vertikal zwischen den Kaesten */
@media(max-width:760px){
.jstrip{grid-template-columns:1fr;row-gap:42px}
.jstage{padding:0;align-items:center;text-align:center}
.jstage__canvas{width:100%;max-width:320px}
.jstage__meta{align-items:center;max-width:340px}
.jstage__hd{align-items:center}
.jstage::after{top:auto;bottom:-30px;left:50%;right:auto;transform:translateX(-50%);width:3px;height:22px;background:radial-gradient(circle, var(--dot,var(--line-2)) 1.1px, transparent 1.7px) center/3px 7px repeat-y}
}
@media(prefers-reduced-motion:reduce){.jstage__canvas{transition:none}}
/* ===== Journey: Kopf im Bild-und-Ernte-Stil (Titel + Hinweis) ===== */
.journey__hd{max-width:60ch}
.journey__eyebrow{display:block;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--clay-link);margin-bottom:.4rem}
.journey__hint{font-size:1rem;color:var(--ink);opacity:.8;line-height:1.5;margin:0}
/* ===== Journey-Szenen (zeigen die Entwicklung: Skizze -> Farbe -> fertig) ===== */
/* Mini-Layout (Entwurf grau, dann farbig) */
.cv-mock{width:60px;height:74px;background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:8px;display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 20px -12px rgba(28,24,20,.45)}
.cv-mock .bar{height:10px;border-radius:3px;background:var(--line-2);flex:none}
.cv-mock .img{flex:1;border-radius:4px;background:var(--paper-2);border:1px solid var(--line)}
.cv-mock .ln{height:4px;border-radius:3px;background:var(--line);flex:none}
.cv-mock .ln.s{width:62%}
.cv-mock.color .bar{background:var(--clay)}
.cv-mock.color .img{background:var(--clay-soft);border-color:var(--clay-soft)}
.cv-mock.color .ln{background:#cbb89a}
.cv-mock.color .ln.s{background:var(--clay-link);opacity:.55}
/* Skizzen-Striche (Entwurfsphase) */
.cv-lines{display:flex;flex-direction:column;gap:9px;width:62px}
.cv-lines i{height:7px;border-radius:4px;background:var(--line-2)}
.cv-lines i:nth-child(1){width:100%}
.cv-lines i:nth-child(2){width:70%}
.cv-lines i:nth-child(3){width:90%;background:var(--clay)}
.cv-lines i:nth-child(4){width:50%}
/* Fertiges Datei-Paket (gestapelte Karten) */
.cv-files{position:relative;width:60px;height:72px}
.cv-files span{position:absolute;width:46px;height:60px;border-radius:8px;background:#fff;border:1px solid var(--line-2);box-shadow:0 8px 16px -12px rgba(28,24,20,.4)}
.cv-files span:nth-child(1){left:0;top:8px;transform:rotate(-7deg);background:var(--clay-softer);border-color:var(--clay-soft)}
.cv-files span:nth-child(2){left:10px;top:4px;transform:rotate(5deg)}
.cv-files span:nth-child(3){left:6px;top:0;background:linear-gradient(160deg,#fff,var(--clay-soft))}
/* Browser-/Geraete-Rahmen (Launch) */
.cv-screen{width:74px;height:60px;background:#fff;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;box-shadow:0 10px 20px -12px rgba(28,24,20,.45);display:flex;flex-direction:column}
.cv-screen .top{height:13px;background:var(--paper-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:3px;padding:0 6px}
.cv-screen .top i{width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.cv-screen .body{flex:1;display:flex;flex-direction:column;gap:4px;padding:7px}
.cv-screen .body b{height:8px;width:70%;border-radius:3px;background:var(--clay)}
.cv-screen .body u{height:5px;border-radius:3px;background:var(--line-2);text-decoration:none}
.cv-screen .body u.s{width:55%}
/* ===== Case: Bestell-Workflow (Vorher/Nachher, Mock-Bestellung, Ablauf) ===== */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem}
.ba__panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.ba__panel img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.ba__cap{padding:1.1rem 1.3rem 1.3rem}
.ba__cap h3{margin:.15rem 0 .35rem}
.ba__cap ul{margin:.4rem 0 0;padding-left:1.15rem;font-size:.95rem;line-height:1.6}
.ba__tag{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--clay-link)}
@media(max-width:760px){.ba{grid-template-columns:1fr}}
/* Ablauf-Diagramm: Bestellung -> Schritte -> Lieferanten-Mails */
.cflow{display:grid;grid-template-columns:1fr auto 1fr;gap:1.6rem;align-items:center;margin-top:2.4rem}
.cflow__col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.cflow__label{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--clay-link)}
.mockdoc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 34px -26px rgba(28,24,20,.5);overflow:hidden}
.mockdoc__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .95rem;background:var(--paper-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.78rem;font-weight:700}
.mockdoc__lang{background:var(--card);border:1px solid var(--line-2);border-radius:6px;padding:.06rem .45rem;font-size:.7rem;letter-spacing:.04em}
.mockdoc.es .mockdoc__lang{background:var(--clay-soft);border-color:var(--clay)}
.mockdoc__body{padding:.95rem 1rem;display:flex;flex-direction:column;gap:.75rem}
.mockline{display:flex;flex-direction:column;gap:.15rem;padding-bottom:.75rem;border-bottom:1px dashed var(--line)}
.mockline:last-child{padding-bottom:0;border-bottom:0}
.mockline b{font-size:.92rem;line-height:1.3}
.mockline span{font-size:.8rem;opacity:.78;line-height:1.45}
.mockline .mfr{display:inline-block;align-self:flex-start;margin-top:.25rem;font-family:var(--mono);font-size:.68rem;font-weight:700;background:var(--clay-softer);border:1px solid var(--clay-soft);border-radius:999px;padding:.1rem .55rem;opacity:1}
.mockdoc__meta{font-family:var(--mono);font-size:.72rem;opacity:.65}
.cflow__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.cflow__steps li{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem .5rem .55rem;font-size:.86rem;font-weight:650;white-space:nowrap}
.cflow__steps li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--clay);color:#fff;font-style:normal;font-size:.72rem;font-weight:800;font-family:var(--mono);flex:none}
.cflow__hint{font-size:.85rem;opacity:.75;margin-top:.6rem;text-align:center}
@media(max-width:860px){
.cflow{grid-template-columns:1fr;gap:1.2rem}
.cflow__steps li{white-space:normal}
.cflow__steps{max-width:420px}
}
/* Logo-Zeile "Umgesetzt mit" */
.logo-strip{display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap;margin:1.6rem 0 .8rem}
.logo-strip img{height:28px;width:auto;display:block}
.logo-note{font-size:.8rem;opacity:.65;max-width:64ch}
/* Case-Teaser (Automatisierungs-Seite + Startseite) */
.cteaser{display:grid;grid-template-columns:1.05fr 1fr;gap:2.2rem;align-items:center;margin-top:2.4rem}
.cteaser__visual{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center}
.cteaser__arrow{display:grid;place-items:center;color:var(--clay-link)}
.cteaser__arrow svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cteaser__link{font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem}
.cteaser__link:hover{color:var(--clay-link)}
@media(max-width:860px){
.cteaser{grid-template-columns:1fr;gap:1.4rem}
.cteaser__visual{grid-template-columns:1fr}
.cteaser__arrow svg{transform:rotate(90deg)}
}
/* Haeufige Fragen: Aufklapp-Liste ohne JavaScript.
Der Antworttext steht immer im HTML, auch zugeklappt, damit Suchmaschinen
und KI-Systeme ihn lesen koennen. */
.faq-liste{display:grid;gap:.7rem;max-width:var(--col);margin-top:1.8rem}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.faq-item:hover{border-color:var(--line-2)}
.faq-item[open]{border-color:var(--line-2);box-shadow:0 14px 34px -22px rgba(28,24,20,.4)}
.faq-item summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary h3{font-size:1.02rem;line-height:1.5;margin:0;transition:color .2s}
.faq-item summary:hover h3{color:var(--clay-link)}
.faq-item summary:focus-visible{outline:2px solid var(--clay);outline-offset:-2px;border-radius:var(--r)}
.faq-item__icon{flex:none;width:28px;height:28px;border-radius:999px;background:var(--clay-softer);border:1px solid var(--clay-soft);display:grid;place-items:center;margin-top:.15rem;transition:transform .25s var(--ease)}
.faq-item__icon svg{width:16px;height:16px;stroke:var(--clay-link);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.faq-item[open] .faq-item__icon{transform:rotate(180deg)}
.faq-item__body{padding:0 1.4rem 1.35rem}
.faq-item__body p{font-size:1rem;line-height:1.7;margin-bottom:.85rem}
.faq-item__body p:last-child{margin-bottom:0}
@media(max-width:560px){
.faq-item summary{padding:1rem 1.1rem;gap:.7rem}
.faq-item__body{padding:0 1.1rem 1.1rem}
}
@media(prefers-reduced-motion:reduce){
.faq-item,.faq-item__icon{transition:none}
}
/* ===== Faktenseite (/ueber-masdemas) =====
Basisdaten als Definitionsliste: links die Bezeichnung, rechts der Wert.
Bewusst kein
, weil es keine Datenmatrix ist, sondern Begriffspaare.
Ab 560px Breite kippt die Liste untereinander, damit lange Werte wie die
Anschrift auf dem Handy nicht in eine schmale Spalte gequetscht werden. */
.faktenblock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.8rem;margin-top:2.4rem;max-width:var(--col)}
.faktenblock dl{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.55rem 1.4rem;margin:0}
.faktenblock dt{font-family:var(--mono);font-size:.9rem;font-weight:650;line-height:1.55}
.faktenblock dd{margin:0;line-height:1.55}
.faktenblock a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){
.faktenblock{padding:1.3rem 1.2rem}
.faktenblock dl{grid-template-columns:1fr;gap:0}
.faktenblock dt{margin-top:.9rem;opacity:.75}
.faktenblock dt:first-child{margin-top:0}
}
/* Aufzaehlung von Fakten im Fliesstext-Bereich */
.fakten-liste{margin:1.8rem 0 0 1.2rem;line-height:1.7;max-width:64ch}
.fakten-liste li{margin-bottom:.6rem}
.fakten-liste a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.fakten-liste + h3,.fakten-liste + .text-large{margin-top:2.2rem}
/* Stand der letzten fachlichen Pruefung */
.stand{font-family:var(--mono);font-size:.9rem;margin-top:2.4rem;opacity:.85}
/* ===== KI-Hinweis =====
Schmaler Streifen ganz oben auf Seiten, deren Texte mit KI-Unterstuetzung
entstanden sind. Bewusst kein Aufklapp-Element und keine Fussnote: der
Hinweis soll gelesen werden, bevor der Text gelesen wird.
Kein Amber, kein Warnrot. Es ist eine Angabe, keine Warnung. */
/* Zurueckhaltend gehalten (22.08.2026): der Hinweis gehoert sichtbar auf die
Seite, soll aber nicht wie die wichtigste Aussage darauf wirken. Deshalb
keine eigene Flaeche mehr, nur zwei feine Linien, kleineres Zeichen und
kleinere Schrift. Die Schriftfarbe bleibt schwarz, es geht um Ruhe, nicht
um schlechtere Lesbarkeit. */
.ki-hinweis{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.75rem 1.5rem}
.ki-hinweis__inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:.6rem}
.ki-hinweis__icon{flex:none;width:24px;height:24px;display:block}
/* Bewusste Ausnahme von der Regel, dass Text schwarz ist: der Hinweis ist
eine Kennzeichnung, keine Aussage der Seite. In 70 Prozent Grau tritt er
zurueck, ohne unlesbar zu werden. Kontrast gegen den Seitenhintergrund
7,59 zu 1, noetig sind 4,5. Nicht weiter aufhellen. */
.ki-hinweis p{font-size:.8rem;line-height:1.5;margin:0;max-width:none;color:#4d4d4d}
.ki-hinweis a{color:var(--link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){
.ki-hinweis{padding:.8rem 1.1rem}
.ki-hinweis__inner{align-items:flex-start;gap:.7rem}
.ki-hinweis p{font-size:.78rem}
}