/* =====================================================================
   Profil (profil.html aus tools/profil-template.html) – seit 05.11.2026 in
   der Plakat-Bildsprache der Startseite: Papier, Schwarz, Signalrot; Gelb
   und Ultramarin als harte Flächen. Riesige Archivo-Überschriften mit einem
   kursiven Akzentwort (.akz), Haarlinien, strenges Raster, keine runden
   Ecken, keine Schatten. Bereichsformen wie auf der Startseite:
   A Produktion Kreis/Rot · B Lager & Versand Quadrat/Gelb ·
   C Steuerung & Kennzahlen Balken/Blau · D Eigenbau Halbkreis/Schwarz.
   In Reihenfolge der Seite:
   Raster und Abschnittsköpfe · Einstieg (Überschrift, Übersicht, Einleitung) ·
   Katalog (Bereiche A–C) · Link zur Projektseite · Demos · Eigenbau
   (Bereich D) · Über mich + Kenntnisse · Nachweise · Kontakt · Responsiv ·
   Druck
   Die Landkarte steht in landkarte.css; Kopfzeile, Karten, Bereichsfarben,
   Kontakt und Fußzeile in base.css. Wo dieses Blatt Regeln aus base.css
   überschreibt, gilt das nur für das Profil (steht jeweils dabei).
   ===================================================================== */

/* ---------- Raster und Abschnittsköpfe ---------- */
/* Inhalt bündig mit Kopfzeile, Kontakt und Fußzeile: Randabstand --rand wie auf der Startseite statt der schmaleren,
   mittig gesetzten .wrap aus base.css (nur im Profil) */
.wrap{width:auto;margin-inline:0;padding-inline:var(--rand)}
/* Flächen wie auf der Startseite: Papier mit Haarlinien statt abwechselnd getönter Abschnitte (.sec.alt aus base.css) */
.sec.alt{background:var(--hall)}
/* Abschnittskopf wie die Plakatköpfe der Startseite: Kennzeile über die ganze Breite, riesige Überschrift über zehn von
   zwölf Spalten, Begleittext darunter ab Spalte 7 (überschreibt .sec-head aus base.css nur im Profil) */
.sec-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:clamp(18px,3svh,32px);align-items:start;margin-bottom:clamp(36px,5vw,64px)}
.sec-head>div{grid-column:1/-1}
.sec-head .kicker{margin-bottom:clamp(18px,3svh,32px)}
.sec-head h2{max-width:calc((100% + var(--spalt)) * 10 / 12 - var(--spalt));font-size:clamp(40px,6.6vw,118px);line-height:.92;letter-spacing:-.04em}
.sec-head>p{grid-column:7/span 5;max-width:33em;color:var(--ink);font-size:clamp(17px,.5vw + 13px,21px);line-height:1.5}
.sub-head{margin:clamp(56px,7vw,104px) 0 clamp(26px,3vw,40px);padding-top:clamp(20px,2.4vw,34px);border-top:1px solid var(--ink);font-size:clamp(32px,4.4vw,80px);line-height:.95;letter-spacing:-.04em;max-width:15em}

/* ---------- Einstieg: Kennzeile, riesige Überschrift mit rotem Balken, Übersicht, Einleitung ---------- */
/* Bei 1440 × 900 stehen Überschrift und die ganze Übersicht im ersten Bild (Maße darauf abgestimmt) */
.p-hero{position:relative;padding:calc(var(--kopf) + clamp(14px,2.4svh,30px)) 0 clamp(56px,9svh,110px)}
.p-hero .hero-meta{margin-bottom:clamp(14px,2svh,30px)}
.hero-meta span:last-child{font:500 13px/1.35 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.p-title{margin:0;font-weight:800;line-height:.88;letter-spacing:-.045em;font-size:clamp(44px,min(7.8vw,14svh),160px)}
.p-title .l1,.p-title .l2{display:block}
.p-title .akz{letter-spacing:-.015em}
.p-title .l2{position:relative;width:max-content;max-width:100%;isolation:isolate}
/* Markierung: roter Balken knapp unter der Grundlinie von „Für den Arbeitsalltag.“, rastet von links ein (nur mit Bewegung) */
.p-title .marker{position:absolute;left:0;right:0;bottom:-.05em;height:.11em;background:var(--rot);z-index:-1;transform-origin:0 50%}
.motion .p-title .marker{animation:markieren .9s .55s var(--einrasten) both}
/* Übersicht: links die Landkarte, rechts die neun Gruppen (ERP und acht Knoten) als strenges Raster mit Haarlinien, die
   Werkzeuge als Zeilen eines Fahrplans. Überfahren oder Fokus auf einer Gruppe hebt ihren Weg auf der Karte hervor
   (profil.js); oben an der Gruppe rastet dabei ein roter Balken ein */
.uebersicht{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start;margin:clamp(28px,4svh,56px) 0 0}
/* Die Karte hängt oben im Raster und bleibt beim Lesen der Gruppen neben ihnen stehen (so sieht man den hervorgehobenen
   Weg auch zu den unteren Gruppen); untereinander (schmal) und im Druck steht sie normal */
.ue-karte{position:sticky;top:calc(var(--kopf) + 24px)}
.ue-karte .lk{max-width:560px;margin-inline:auto}
.ue-gruppen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.ue-gruppe{position:relative;padding:12px 16px 8px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:background-color .2s}
.ue-gruppe::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:5px;background:var(--rot);transform:scaleX(0);transform-origin:0 50%;transition:transform .24s var(--einrasten);pointer-events:none}
.ue-gruppe:hover,.ue-gruppe:focus-within{background:var(--paper)}
.ue-gruppe:hover::before,.ue-gruppe:focus-within::before{transform:scaleX(1)}
/* Die Mitte (ERP) rot wie die Scheibe der Landkarte; weiße Schrift auf Rot 4,9 : 1, Fokus dort schwarz (3,8 : 1) */
.ue-gruppe[data-knoten=""]{background:var(--rot);color:#fff;--fokus:var(--ink)}
.ue-gruppe[data-knoten=""]::before{background:var(--ink)}
/* Gruppenkopf wie ein Fahrplankopf: Name und Unterzeile auf einer Grundlinie, schmal untereinander */
.ue-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 6px;font-weight:800;font-size:clamp(17px,1.3vw,20px);line-height:1.15;letter-spacing:-.02em}
.ue-name span{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ue-gruppe[data-knoten=""] .ue-name span{color:#fff}
.ue-schilder{list-style:none;margin:0;padding:0}
.ue-schilder li+li{border-top:1px solid var(--haar)}
.ue-gruppe[data-knoten=""] .ue-schilder li+li{border-top-color:rgba(255,255,255,.5)}
.ue-schilder a{display:flex;gap:10px;align-items:center;min-height:44px;padding:4px 8px;margin-inline:-8px;color:inherit;text-decoration:none;font-weight:700;font-size:15px;line-height:1.22;overflow-wrap:break-word;transition:background-color .15s,color .15s}
.ue-schilder a:hover,.ue-schilder a:focus-visible{background:var(--ink);color:var(--hall)}
.ue-gruppe[data-knoten=""] .ue-schilder a:hover,.ue-gruppe[data-knoten=""] .ue-schilder a:focus-visible{background:#fff;color:var(--ink)}
.ue-schilder b{flex:none;min-width:4.4ch;font:500 12.5px/1.25 var(--mono);letter-spacing:.02em}
/* Vor dem Einstieg verborgen, damit nichts aufblitzt (nur mit Bewegung) */
.motion .p-hero [data-in]{visibility:hidden}
/* Einleitung im Raster: Text und Aktionen links, die Kennkarte rechts unter einem dicken Balken */
.hero-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:30px;align-items:start;margin-top:clamp(40px,7svh,84px)}
.hero-copy>div:first-child{grid-column:1/span 7}
.hero-copy .lead{max-width:34em;color:var(--ink);font-size:clamp(18px,.6vw + 12px,22px);line-height:1.5}
.hero-copy .actions{gap:8px 30px;margin-top:26px}
/* „Werkzeuge entdecken“ zeigt nach unten: beim Überfahren rückt der Pfeil in seiner Richtung nach */
.knopf:hover .pfeil.runter,.knopf:focus-visible .pfeil.runter{transform:rotate(90deg) translateX(4px)}
/* Druckknopf als unterstrichener Textlink (statt der Balkenlinie von .mark-link: die Linie folgt dem Text, auch wenn er
   schmal in zwei Zeilen umbricht) */
.drucken{display:inline-flex;align-items:center;min-height:48px;padding:0 2px;border:0;background:none;color:inherit;text-align:left;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.drucken:hover{background-image:none;text-decoration-color:var(--rot);text-decoration-thickness:4px}
.ident{grid-column:9/span 4;padding-top:12px;border-top:3px solid var(--ink)}
.ident strong{display:block;margin-bottom:8px;font-size:clamp(22px,1.7vw,28px);font-weight:800;line-height:1.1;letter-spacing:-.025em}
.ident p{margin:0;color:var(--ink);font-size:16px;line-height:1.5}

/* ---------- Katalog (Bereiche A–C): Hinweis, Bereichsknöpfe, Suche, Werkzeug-Karten ---------- */
.disclaim{display:flex;gap:12px;align-items:flex-start;max-width:64ch;margin:0 0 clamp(28px,4vw,48px);color:var(--ink);font-size:15px;line-height:1.55}
.disclaim::before{content:'';flex:none;width:10px;height:10px;margin-top:7px;background:var(--rot)}
.toolbar{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;align-items:end;margin-bottom:18px;padding-top:20px;border-top:3px solid var(--ink)}
.zones{display:none;gap:8px;flex-wrap:wrap}
.js .zones{display:flex}
/* Bereichsknopf: die Form des Bereichs trägt seinen Buchstaben (Kreis A, Quadrat B, Balken C; „Alle“ ein schwarzes
   Quadrat). Überfahren: ein Balken in der Bereichsfarbe rastet unten ein; gewählt füllt die Farbe den ganzen Knopf und
   die Form kehrt sich um. Schrift auf den Flächen: Weiß auf Rot 4,9 : 1, Weiß auf Ultramarin 7,8 : 1, Schwarz auf Gelb
   11,4 : 1, Papier auf Schwarz 16 : 1 */
.zone-btn{--z:var(--ink);--z-text:var(--hall);display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 18px 0 10px;border:2px solid var(--ink);border-radius:0;background:transparent linear-gradient(var(--z),var(--z)) 0 100%/100% 0 no-repeat;color:var(--ink);font-weight:700;font-size:16px;line-height:1.15;letter-spacing:-.005em;text-align:left;transition:background-size .26s var(--einrasten),color .18s}
.zone-btn[data-filter=produktion]{--z:var(--rot);--z-text:#fff}
.zone-btn[data-filter=lager]{--z:var(--gelb);--z-text:var(--ink)}
.zone-btn[data-filter=steuerung]{--z:var(--blau);--z-text:#fff}
.zone-btn b{flex:none;display:grid;place-items:center;width:30px;height:30px;background:var(--z);color:var(--z-text);font:500 13px/1 var(--mono);transition:transform .24s var(--einrasten),background-color .18s,color .18s}
.zone-btn[data-filter=produktion] b{border-radius:50%}
.zone-btn[data-filter=steuerung] b{width:44px;height:22px}
.zone-btn:hover{background-size:100% 6px}
.zone-btn:hover b{transform:scale(1.12)}
.zone-btn[aria-pressed=true]{background-size:100% 100%;color:var(--z-text)}
.zone-btn[aria-pressed=true] b{background:var(--z-text);color:var(--z)}
.scan-field{flex:0 1 400px;display:none}
.js .scan-field{display:block}
.scan-field label{display:block;margin-bottom:8px;color:var(--ink);font-size:15px;font-weight:700}
.inp{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:var(--paper);overflow:hidden}
/* Fokus im Suchfeld: durchgezogene schwarze Kontur (3 px) um das ganze Feld, die Lupe wird rot */
.inp:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.inp svg{flex:0 0 auto;width:22px;height:22px;color:var(--ink);stroke-linecap:square;transition:color .18s}
.inp:focus-within svg{color:var(--rot-schrift)}
.inp input{flex:1;min-width:0;height:48px;border:0;outline:0;box-shadow:none;background:transparent;color:var(--ink);font:500 17px var(--body)}
.filter-stand{display:none;margin:0 0 26px;color:var(--ink-2)}
.js .filter-stand{display:block}
.filter-stand b{color:var(--ink);font-weight:500}
.catalog{gap:clamp(28px,2.6vw,44px) clamp(18px,1.8vw,30px)}
.bin[hidden]{display:none}
/* Kartenkopf (Katalog, Demos, Eigenbau): Code groß und schmal wie auf den Plakaten, davor die Form des Bereichs in
   Schriftfarbe (überschreibt .card-code aus base.css nur im Profil) */
.card-head{min-height:54px;padding:8px 14px}
.card-code{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:800;font-size:28px;line-height:1;letter-spacing:-.02em;font-variation-settings:"wght" 800,"wdth" 75}
.card-code::before{content:'';flex:none;width:15px;height:15px;background:currentColor}
.zone-produktion .card-code::before{border-radius:50%}
.zone-steuerung .card-code::before{width:24px;height:9px}
.zone-eigenbau .card-code::before{width:20px;height:10px;border-radius:20px 20px 0 0}
.card-head .mono{font-size:12px;letter-spacing:.06em;text-align:right}
.catalog .card-body{gap:12px;padding:20px 18px 14px}
.catalog .card h3{font-size:clamp(26px,2.1vw,34px);line-height:1;letter-spacing:-.035em}
.card .desc{color:var(--ink-2)}
.bin details{margin-top:auto;border-top:1px solid var(--ink)}
.bin summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;cursor:pointer;list-style:none;font-size:15px;font-weight:700}
.bin summary::-webkit-details-marker{display:none}
/* Plus im Quadrat: beim Überfahren gelb, offen schwarz mit Kreuz */
.bin summary i{position:relative;flex:0 0 auto;width:26px;height:26px;border:2px solid var(--ink);transition:background-color .2s}
.bin summary i::before,.bin summary i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;background:var(--ink);transition:transform .3s var(--einrasten),background-color .2s}
.bin summary i::after{transform:rotate(90deg)}
.bin summary:hover i{background:var(--gelb)}
.bin details[open] summary i{background:var(--ink)}
.bin details[open] summary i::before{transform:rotate(45deg);background:var(--hall)}
.bin details[open] summary i::after{transform:rotate(135deg);background:var(--hall)}
.more ul{list-style:none;margin:6px 0 16px;padding:0;color:var(--ink-2);font-size:15px}
.more li{position:relative;margin:6px 0;padding-left:18px}
.more li::before{content:'';position:absolute;left:0;top:.58em;width:7px;height:7px;background:var(--ink)}
.more-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.more-pics figure{margin:0}
.more-media{display:block;aspect-ratio:1/1;overflow:hidden;border:1.5px solid var(--ink);background:#1d1c1a}
.more-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.more-pics figcaption{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.4}
/* Querformate (Ringgravur) ganz zeigen statt links und rechts beschneiden; der dunkle Grund rahmt sie wie ein Bildschirm */
.card-media.quer img,.more-media.quer img{object-fit:contain;object-position:50% 50%}
/* Werkzeuge ohne Demo: Vorschau der Projektseite an der Stelle des Bildes (build-profile.py), ganz gezeigt auf dunklem
   Grund wie die Querformate, Hinweis als schwarzes Etikett oben links (am Handy über dem Rückweg „← Profil“ der
   Vorschau, nie über dem Titel). Nur ohne eingecheckte Projektseite bleibt das leere Fach mit Hinweis */
.card-media.vorschau img{object-fit:contain;object-position:50% 50%}
.vorschau-hinweis{position:absolute;left:10px;top:10px;padding:7px 10px 6px;background:var(--ink);color:var(--hall);font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.card-media.ohne-demo{display:grid;place-items:center;padding:22px;background:repeating-linear-gradient(135deg,var(--hall-2) 0 14px,var(--hall) 14px 28px)}
.ohne-demo p{margin:0;max-width:26ch;padding:10px 14px;background:var(--paper);border:1.5px solid var(--ink);font-size:15px;line-height:1.5;text-align:center}
.empty{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;padding:26px;background:var(--paper);border:2px solid var(--ink)}
.empty[hidden]{display:none}
.empty p{margin:0;font-weight:600}
.empty button{min-height:48px;padding:0 18px;border:0;background:var(--ink);color:var(--hall);font-weight:700;transition:background-color .18s,color .18s}
.empty button:hover{background:var(--rot);color:#fff}
/* Angesprungene Karte: rote Kontur leuchtet kurz auf */
.bin.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{outline:6px solid var(--rot);outline-offset:4px}100%{outline:6px solid rgba(227,0,27,0);outline-offset:4px}}

/* ---------- Link zur eigenen Projektseite (je Projekt eine Seite, docs/projektseiten.md) ---------- */
/* Wie die Knöpfe der Startseite: schwarz, beim Überfahren Signalrot, der Pfeil rückt nach */
.seite-link{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 16px 0 18px;background:var(--ink);color:var(--hall);font-weight:700;font-size:16px;line-height:1.15;text-decoration:none;transition:background-color .18s,color .18s}
.seite-link i,.demo-zeile i{position:relative;flex:none;width:18px;height:2.5px;background:currentColor;transition:transform .22s var(--einrasten)}
.seite-link i::after,.demo-zeile i::after{content:'';position:absolute;right:0;top:-3.5px;width:9.5px;height:9.5px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg)}
.seite-link:hover{background:var(--rot);color:#fff}
.seite-link:hover i,.seite-link:focus-visible i{transform:translateX(5px)}
/* Vorschau der Zielwelt beim Überfahren, nur mit Maus: auf Touch-Geräten bleibt sie unsichtbar und wird nicht geladen */
.seite-vorschau{display:none}
@media(hover:hover) and (pointer:fine){
  .seite-vorschau{display:block;position:absolute;left:0;bottom:calc(100% + 12px);z-index:5;width:250px;padding:5px;background:var(--paper);border:2px solid var(--ink);opacity:0;transform:translateY(12px) scale(.94);transform-origin:15% 100%;pointer-events:none;transition:opacity .2s,transform .4s var(--einrasten)}
  .seite-vorschau img{display:block;width:100%;height:auto}
  .seite-link:hover .seite-vorschau,.seite-link:focus-visible .seite-vorschau{opacity:1;transform:none}
}
/* Demo neben der Projektseite (seit 22.10.2026): gleiche Höhe, als Umrissknopf zweitrangig, beim Überfahren schwarz */
.karten-wege{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.karten-wege .seite-link{align-self:auto}
.demo-link{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border:2px solid var(--ink);color:var(--ink);font-weight:700;font-size:16px;line-height:1.15;text-decoration:none;transition:background-color .18s,color .18s}
.demo-link i{position:relative;flex:none;width:14px;height:14px;border:2px solid currentColor}
.demo-link i::after{content:'';position:absolute;left:3px;top:2px;border-left:6px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent}
.demo-link:hover{background:var(--ink);color:var(--hall)}

/* ---------- Demos: alle Bedien-Demos nach Werkzeug (#demos) ---------- */
.demo-liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,1.8vw,28px)}
.demo-karte .card-body{display:flex;flex-direction:column;gap:12px;padding:18px 16px 12px}
.demo-karte h3{margin:0;font-size:clamp(21px,1.6vw,26px);letter-spacing:-.03em}
.demo-zeilen{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.demo-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 0;border-bottom:1px solid var(--haar);color:var(--ink);font-weight:700;line-height:1.25;text-decoration:none;transition:color .15s}
.demo-zeile:hover{color:var(--rot-schrift)}
.demo-zeile:hover i,.demo-zeile:focus-visible i{transform:translateX(5px)}
/* Unterstrichen wie die Textlinks; die Linie folgt dem Text, auch wenn er schmal umbricht */
.demo-seite{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .18s}
.demo-seite:hover{color:var(--rot-schrift);text-decoration-color:var(--rot);text-decoration-thickness:4px}
@media (max-width:1100px){.demo-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Handy: zwei schmale Spalten statt einer langen Liste (Profil verdichten, seit 31.10.2026); Bereichsfarbe und Code
   genügen als Kopf, lange Namen tragen weiche Trennstellen (build-profile.py). Unter 360 px eine Spalte */
@media (max-width:640px){
  .demo-liste{gap:12px}
  .demo-karte .card-head{min-height:46px;padding:8px 12px}
  .demo-karte .card-code{font-size:24px}
  .demo-karte .card-body{gap:8px;padding:12px 12px 10px}
  .demo-karte h3{font-size:19px}
  .demo-zeile{gap:8px;padding:8px 0}
}
@media (min-width:360px) and (max-width:640px){
  .demo-karte .card-head .mono{display:none}
}
@media (max-width:359px){.demo-liste{grid-template-columns:1fr}}

/* ---------- Eigenbau (Bereich D): schwarze Fläche mit Halbkreis, Karten mit Papierrahmen ---------- */
#private-projekte{overflow:clip;background:var(--ink);color:var(--hall)}
#private-projekte .kicker,#private-projekte .sec-head>p{color:var(--hall)}
/* Der Halbkreis hängt im oberen Rand des Abschnitts, nie über Text (höchstens halb so hoch wie der Innenabstand oben) */
#private-projekte::before{content:'';position:absolute;top:0;right:var(--rand);width:clamp(96px,16vw,260px);aspect-ratio:2/1;border-radius:0 0 999px 999px;background:var(--gelb)}
#private-projekte .wrap{position:relative}
#private-projekte .card{border-color:var(--hall);color:var(--ink)}
.card-icon{width:56px;height:56px;object-fit:contain}
/* einheitlich bei allen fünf Eigenbauten direkt unter dem Titel (inhalt.md V6) */
.card .ki-zeile{margin-top:-4px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.4}
.gallery{display:flex;gap:10px;overflow-x:auto;padding:5px 0 10px;scroll-snap-type:x mandatory;scrollbar-color:var(--ink) transparent}
.gallery a{flex:0 0 96px;scroll-snap-align:start;display:block;border:1.5px solid var(--ink);background:var(--paper);overflow:hidden;transition:transform .3s var(--einrasten)}
.gallery a:hover{transform:translateY(-4px)}
/* In der Bildleiste läge die Fokuskontur außerhalb abgeschnitten: sie steht dort innen auf dem Bild */
.gallery a:focus-visible{outline-offset:-3px}
.gallery img{width:96px;height:142px;object-fit:cover;object-position:top}
.gallery.quer a{flex-basis:190px}
.gallery.quer img{width:190px;height:119px;object-position:left top}
/* Ohne eigene Ansichten (HS Check): Startbild der Projektseite, führt per Maus dorthin (für Tastatur genügt der Knopf) */
.card-shot{display:block;overflow:hidden;border:1.5px solid var(--ink);transition:transform .3s var(--einrasten)}
.card-shot:hover{transform:translateY(-4px)}
.card-shot img{width:100%;height:auto}

/* ---------- Über mich + Kenntnisse ---------- */
/* Leitsatz groß unter einem roten Balken, im Raster ab Spalte 5 eingerückt (versetzt zur Überschrift wie die Begleittexte
   der Startseite), darunter der Text in zwei Spalten */
#ueber-mich .statement{position:relative;margin:0 0 clamp(40px,6vw,88px) calc((100% + var(--spalt)) * 4 / 12);padding-top:clamp(22px,2.2vw,34px);max-width:23em;color:var(--ink);font-size:clamp(26px,2.9vw,48px);font-weight:700;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
#ueber-mich .statement::before{content:'';position:absolute;left:0;top:0;width:clamp(56px,7vw,112px);height:clamp(8px,.8vw,12px);background:var(--rot)}
.about-text{columns:2 340px;column-gap:clamp(30px,5vw,70px);max-width:1120px}
.about-text p{margin:0 0 16px;max-width:68ch;color:var(--ink);break-inside:avoid}
.about-text h3{margin:0 0 14px;font-size:clamp(22px,1.7vw,28px);font-weight:800;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;break-after:avoid;break-inside:avoid}
/* Kenntnisse wie die Schritte der Startseite: offene Spalten unter einem dicken Balken statt Kästen */
.skills{gap:clamp(30px,3vw,48px) clamp(18px,1.8vw,30px)}
.skills .card{background:transparent;border:0;border-top:3px solid var(--ink)}
.skills .card-body{padding:16px 0 0}
.skills .card h3{font-size:clamp(22px,1.8vw,30px);letter-spacing:-.03em}
.skills .card p{color:var(--ink)}

/* ---------- Nachweise ---------- */
.cards.certs{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 22px}
.cert{margin:0}
.cert-media{position:relative;display:block;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.cert-media img{transition:transform .6s var(--ease)}
.cert-media:hover img{transform:scale(1.05)}
.cert figcaption{padding:10px 12px 12px;color:var(--ink);font-size:14px;line-height:1.4}

/* ---------- Kontakt: das schwarze Schlussplakat aus base.css, im Profil mit Kennzeile und Absender ---------- */
/* Kennzeile (roter Punkt, Haarlinie) statt der Plakatnummer der Startseite; Farbe wie die Fläche (im Druck dunkel) */
.kontakt .kicker{grid-column:1/-1;margin:0;color:inherit}
/* Absender zwischen Begleittext und QR-Code, unter einem dicken Balken wie die Kennkarte im Einstieg */
.kt-von{grid-column:7/span 3;grid-row:3;align-self:end;margin:0;padding-top:12px;border-top:3px solid currentColor;font-size:17px;line-height:1.45}
.kt-von-k{display:block;margin-bottom:8px}
.kt-von strong{font-weight:800}

/* ---------- Responsiv ---------- */
@media(min-width:1600px){
  .catalog{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1100px){
  .cards.certs{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Übersicht in zwei Spalten: die Mitte (ERP) über die ganze Breite, darunter die acht Knoten paarweise */
  .ue-gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ue-gruppe[data-knoten=""]{grid-column:1/-1}
}
@media(max-width:1023.98px){
  .sec-head>p{grid-column:5/-1}
  .hero-copy>div:first-child{grid-column:1/-1}
  .ident{grid-column:1/span 7}
  .kt-von{grid-column:1/span 6;grid-row:auto}
}
@media(max-width:899px){
  /* ohne JavaScript fließt die Kopfzeile schmal mit (base.css): kein Platz für eine feste Kopfzeile über dem Einstieg */
  html:not(.js) .p-hero{padding-top:clamp(16px,3svh,32px)}
  /* Übersicht: Karte über den Gruppen */
  .uebersicht{grid-template-columns:minmax(0,1fr)}
  .ue-karte{position:static}
  .ue-karte .lk{max-width:min(440px,100%)}
}
@media(max-width:760px){
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .sec-head>p,.sec-head h2{grid-column:1/-1;max-width:none}
  .hero-copy{grid-template-columns:minmax(0,1fr)}
  .ident{grid-column:1/-1}
  .kt-von{grid-column:1/-1}
  #ueber-mich .statement{margin-left:0}
}
@media(max-width:620px){
  .p-title{font-size:clamp(40px,12vw,64px)}
  /* „Für den Arbeitsalltag.“ bricht schmal um: der rote Balken steht zeilenweise unter dem Text statt als ein Balken */
  .p-title .l2{display:inline;width:auto;background:linear-gradient(var(--rot),var(--rot)) 0 calc(100% - .06em)/100% .1em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .p-title .marker{display:none}
  /* dichter am Handy: etwas weniger Luft zwischen den Abschnitten und den Karten des Katalogs */
  .sec{padding-block:64px}
  .catalog{gap:24px}
  .cards.certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Bereichsknöpfe als Raster zwei mal zwei, lange Namen brechen im Knopf um */
  .js .zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1 1 100%}
  .zone-btn{gap:10px;padding:6px 10px 6px 8px}
  /* eine Karte je Reihe: flachere Kartenbilder (16:9, oberer Teil der Demo-Ansicht), die Vorschau füllt das Feld;
     das leere Fach braucht keine Bildhöhe */
  .catalog .card-media{aspect-ratio:16/9}
  .catalog .card-media.vorschau img{object-fit:cover}
  .card-media.ohne-demo{aspect-ratio:auto;padding:18px}
  /* Kartenknöpfe nebeneinander mit kurzer Beschriftung („Projektseite“, „Demo“; build-profile.py), gleich hoch, mindestens
     48 px; unter 360 px ohne die Pfeil- und Startsymbole, sonst passt „Projektseite“ nicht in die halbe Breite */
  .karten-wege{flex-wrap:nowrap;align-items:stretch;gap:8px}
  .karten-wege>a{flex:1 1 0;min-width:0;justify-content:center;gap:10px;padding-inline:10px}
  .karten-wege>a:only-child{flex:0 1 auto}
  .karten-wege>a i{flex:none}
  .karten-wege .zusatz{display:none}
}
@media(max-width:380px){
  /* sehr schmal: Bereichsknöpfe untereinander, sonst passt „Steuerung & Kennzahlen“ nicht neben die Form */
  .js .zones{grid-template-columns:minmax(0,1fr)}
  /* Übersicht: Code über dem Namen, damit lange Namen wie „Lagerkarten-Editor“ die ganze Breite der Gruppe haben */
  .ue-gruppe{padding-inline:12px}
  .ue-schilder a{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding-block:6px}
}
@media(max-width:359px){
  .karten-wege>a i{display:none}
}

/* ---------- Druck: ohne Filter und Suche, Bildleisten umbrechen statt waagerecht scrollen ---------- */
@media print{
  .p-hero{padding:10px 0 20px}
  .ue-karte{position:static}
  .p-title{font-size:64px}
  .sec-head h2{font-size:48px}
  .toolbar,.js .filter-stand,.seite-vorschau,.drucken{display:none}
  .gallery{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;padding-top:0}
  /* auf Papier genügen die ersten Ansichten, sonst sprengen die Bildleisten der Eigenbauten jede Seite */
  .gallery a:nth-child(n+4),.gallery.quer a:nth-child(n+3){display:none}
  .bin details{display:none}
  /* drei Karten je Reihe mit flacheren Bildern, sonst passt nur eine Reihe auf eine Seite */
  .cards:not(.certs){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .card-media{aspect-ratio:16/10}
  .card h3,.catalog .card h3{font-size:18px}
  .card p,.card .hook{font-size:14px}
  .seite-link,.demo-link{background:none;color:var(--ink);border:1.5px solid var(--ink);min-height:0;padding:6px 12px;font-size:14px}
  .demo-liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .demo-zeile{min-height:0;padding:4px 0;font-size:13px}
  /* Farbflächen mit heller Schrift drucken mit (sonst stünde weiße Schrift auf weißem Papier): Bereichsköpfe der Karten,
     die rote Mitte der Übersicht, das Etikett „Vorschau der Projektseite“; dazu die kleinen roten Zeichen (Balken unter
     der Überschrift, Punkt der Kennzeilen, Quadrat am Hinweis) */
  .card-head,.ue-gruppe[data-knoten=""],.vorschau-hinweis,.p-title .marker,.kicker,.disclaim{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  /* Bereich D hell mit dunkler Schrift statt schwarzer Fläche */
  #private-projekte{background:none;color:var(--ink)}
  #private-projekte::before{display:none}
  #private-projekte .kicker,#private-projekte .sec-head>p{color:var(--ink)}
  #private-projekte .card{border-color:var(--ink)}
  /* QR-Code auf Papier in handlicher Größe, damit er mit dem Kontakt auf einer Seite bleibt */
  .kt-qr{max-width:220px}
}