/* Veröffentlichte Seite, aus dem Prototyp v3 */
.wrap{position:relative;z-index:2;max-width:var(--breit);margin:0 auto;padding:26px;
 display:grid;grid-template-columns:378px 1fr;gap:0 clamp(40px,5vw,88px);align-items:start}

/* ── Karte: volle Höhe, viel Luft ──────────────────────────────── */
.card{position:sticky;top:26px;height:calc(100dvh - 52px);padding:26px;background:rgba(255,255,255,.042);
 display:flex;flex-direction:column;gap:0;overflow-y:auto;scrollbar-width:none}
.card::-webkit-scrollbar{display:none}
.card .brand{margin-bottom:22px}
.photo{position:relative;border-radius:var(--r-karte);overflow:hidden;aspect-ratio:1/1.04;flex-shrink:0;
 background:linear-gradient(150deg,#2a2350,#1b3a63 55%,#17515c)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.photo-initialen{display:grid;place-items:center}
.photo-initialen .initialen{font-family:var(--fam-anzeige);font-weight:600;font-size:clamp(44px,7vw,84px);
 letter-spacing:-.02em;color:var(--hell-4)}
.who{margin-top:24px}
.who .nm{font-family:var(--fam-anzeige);font-weight:600;font-size:25px;letter-spacing:-.028em;
 display:flex;align-items:center;gap:8px;line-height:1.12}
.who .rl{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.meta{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:16px}
.meta .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:500;margin-bottom:5px}
.meta .val{font-size:13.5px;color:var(--hell-2);line-height:1.55}
.socials{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.soc{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.025);
 display:grid;place-items:center;transition:all .3s var(--ease)}
.soc svg{width:15px;height:15px;fill:none;stroke:var(--hell-4);stroke-width:1.6;transition:stroke .3s}
.soc:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.soc:hover svg{stroke:var(--weiss)}
.card-cta{display:block;text-align:center;padding:14px;border-radius:var(--r-klein);margin-top:18px;font-family:var(--fam-anzeige);
 font-weight:500;font-size:14.5px;color:var(--tief);background:var(--cta-grad);
 transition:all .3s var(--ease)}
.card-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(190,210,255,.5)}

/* ── Navigation: vier Oberkategorien ───────────────────────────── */
main{padding:0 2px;min-width:0}
.nav{position:sticky;top:26px;z-index:20;display:inline-flex;gap:3px;padding:5px;margin-bottom:8px;
 background:rgba(12,13,18,.74);border:1px solid var(--line);border-radius:var(--r-rund);
 backdrop-filter:blur(24px) saturate(150%);max-width:100%;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:13.5px;font-weight:450;color:var(--muted);padding:9px 18px;border-radius:var(--r-rund);
 white-space:nowrap;transition:all .28s var(--ease)}
.nav a:hover{color:var(--weiss);background:rgba(255,255,255,.06)}
.nav a.on{color:var(--tief);background:linear-gradient(135deg,var(--pille-a),var(--pille-b));font-weight:500}

section{scroll-margin-top:92px;padding:0}
/* Ein Block, ein Bildschirm (DESIGN-BAUSTEINE): jeder Block beginnt
   auf einem frischen Bildschirm, zwei Blocküberschriften teilen sich
   nie einen. Ein Block, der hineinpasst, steht senkrecht mittig; die
   beiden auto-Ränder tun das ohne Rechnen und ohne Überlauf nach
   oben. Ein längerer Block beginnt oben und läuft weiter, der
   nächste beginnt trotzdem erst unterhalb der Kante, weil jeder
   Block mindestens einen Bildschirm hoch ist.
   --schirm ist die wirklich sichtbare Höhe: im Baukasten die um die
   Führungsleiste verminderte. */
.block{display:flex;flex-direction:column;min-height:var(--schirm,100svh);padding:56px 0 30px}
.block>:first-child{margin-top:auto}
.block>:last-child{margin-bottom:auto}
#ich{padding:0}
/* Der erste Bildschirm beginnt nicht oben, sondern um den Abstand
   des Inhalts versetzt; damit er trotzdem genau mittig steht, wird
   dieser Abstand zweimal abgezogen und einmal darunter wieder
   angehängt. So beginnt der zweite Block genau an der Kante. */
.ich-mitte{min-height:calc(var(--schirm,100svh) - 2*var(--ich-top,82px));
 margin-bottom:var(--ich-top,82px);padding:0}
.kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:500;margin-bottom:20px;
 display:flex;align-items:center;gap:11px}
.kick::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px}
.sub{font-family:var(--fam-anzeige);font-weight:500;font-size:clamp(19px,1.8vw,23px);letter-spacing:-.02em;margin-bottom:20px}

/* ── Wer ich bin ───────────────────────────────────────────────── */
/* Der Satz steht in zwei gleichmäßig verteilten Zeilen; die Größe
   staffelt sich nach der Länge (Klassen mittel und lang kommen aus
   der Vorlage, ohne Skript) */
.credo{font-family:var(--fam-serif);font-weight:300;font-size:clamp(34px,4.4vw,60px);line-height:1.1;
 letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
.credo.mittel{font-size:clamp(30px,3.6vw,48px);max-width:22ch}
.credo.lang{font-size:clamp(24px,2.8vw,38px);max-width:30ch}
/* Die Höchstbreite steht in Zeichen und nicht in Bildpunkten, damit
   sie in jeder Schriftgröße greift. Ein Haken bleibt: ch misst die
   Null der ersten Schrift der Kette, also Fraunces, während arabische
   Zeichen aus der Ersatzschrift kommen und schmaler bauen. Auf
   dieselbe Zeichenzahl passt deshalb mehr arabischer Text, und der
   Satz lief als eine einzige sehr lange Zeile. Für fremde Schriften
   gilt darum ein engeres Maß, gemessen und nicht geschätzt
   (Arbeit 17). */
.credo[lang="und-Arab"],.credo[lang="und-Hebr"]{max-width:11ch}
.credo.mittel[lang="und-Arab"],.credo.mittel[lang="und-Hebr"]{max-width:15ch}
.credo.lang[lang="und-Arab"],.credo.lang[lang="und-Hebr"]{max-width:20ch}
.credo em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent}
.about{margin-top:30px;max-width:640px}
.about p{font-size:clamp(15px,1.25vw,17px);color:var(--hell-3);line-height:1.75}
.about p+p{margin-top:15px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ── Kanalkopf über dem Inhalt ─────────────────────────────────── */
/* Blocktitel: frei benennbar, optional verlinkt, mit Unterzeile */
.blocktitle{display:inline-flex;align-items:center;gap:9px;font-family:var(--fam-anzeige);font-weight:500;
 font-size:clamp(19px,1.8vw,23px);letter-spacing:-.02em;transition:opacity .3s var(--ease)}
a.blocktitle:hover{opacity:.8}
.blocktitle .go{display:inline-flex;opacity:0;transform:translateX(-5px);transition:all .32s var(--ease)}
a.blocktitle:hover .go{opacity:.7;transform:none}
.blocktitle .go svg{width:15px;height:15px;stroke:var(--weiss);stroke-width:1.8;fill:none}
.blockline{font-size:13.5px;color:var(--muted-2);margin-top:6px;line-height:1.55;max-width:560px}
.blockhead{margin-bottom:20px}
.blockhead+.blockhead{margin-top:52px}

.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.reel{position:relative;aspect-ratio:9/16;border-radius:var(--r-gross);overflow:hidden;border:1px solid var(--line);
 transition:all .35s var(--ease)}
.reel:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.reel .bgi{position:absolute;inset:0}
.reel::after{content:"";position:absolute;inset:0;
 background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.25) 42%,transparent 68%)}
.reel .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
 background:rgba(10,11,16,.45);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:2;
 border:1px solid rgba(255,255,255,.2);transition:all .35s var(--ease)}
.reel:hover .play{background:rgba(255,255,255,.16);transform:translate(-50%,-50%) scale(1.08)}
.reel .play svg{width:16px;height:16px;fill:var(--weiss);margin-inline-start:3px}
.reel .cap{position:absolute;inset-inline-start:14px;inset-inline-end:14px;bottom:13px;z-index:2}
.reel .cap b{display:block;font-size:13.5px;font-weight:500;line-height:1.35;color:var(--weiss)}
.reel .cap span{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:4px;display:block}

/* Galerie wie in der abgenommenen Vorlage: drei Spalten, alles
   quadratisch, das erste Bild spannt zwei Spalten und zwei Zeilen,
   der Titel liegt auf dem Bild und erscheint beim Überfahren.
   Die Anordnung richtet sich nach der Anzahl: ein Bild füllt die
   Breite, zwei oder drei stehen gleich groß nebeneinander, ab vier
   gilt die Vorlagen-Regel mit dem gespannten ersten Bild. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal.gal-1{grid-template-columns:1fr}
.gal.gal-2{grid-template-columns:repeat(2,1fr)}
.gal figure{position:relative;border-radius:var(--r-kachel);overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line);
 transition:all .35s var(--ease)}
.gal:not(.gal-1):not(.gal-2):not(.gal-3) figure:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal.gal-1 figure{aspect-ratio:16/9}
.gal figure:hover{transform:scale(1.012);border-color:rgba(255,255,255,.2)}
.gal .bgi{position:absolute;inset:0}
.gal figcaption{position:absolute;inset-inline:0;bottom:0;padding:26px 14px 12px;font-size:12.5px;
 color:rgba(255,255,255,.86);background:linear-gradient(to top,rgba(0,0,0,.7),transparent);opacity:0;transition:opacity .3s}
.gal figure:hover figcaption{opacity:1}
/* Auf Geräten ohne Zeiger steht der Titel dauerhaft auf dem Bild,
   mit dem Verlauf der Videokacheln */
@media(hover:none){
 .gal figcaption{opacity:1;
  background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.25) 42%,transparent 68%)}
}

/* Projekt wie in der abgenommenen Vorlage: querliegende Karte,
   Bild links, rechts Titel mit dem Schild daneben, darunter der Text */
.projs{display:flex;flex-direction:column;gap:14px}
.proj{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:14px;border:1px solid var(--line);
 border-radius:var(--r-block);background:var(--card);transition:all .3s var(--ease);align-items:center}
.proj:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.proj .im{border-radius:var(--r-klein);aspect-ratio:16/10}
.proj h3{font-family:var(--fam-anzeige);font-weight:500;font-size:19px;letter-spacing:-.02em;margin-bottom:7px;
 display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.proj p{font-size:14px;color:var(--muted);line-height:1.6;max-width:560px}
.proj .tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
 border:1px solid var(--line);border-radius:var(--r-rund);padding:3px 9px;font-weight:500}

.tl .row{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:22px 0;border-top:1px solid var(--line)}
.tl .row:last-child{border-bottom:1px solid var(--line)}
.tl .when{font-size:13px;color:var(--muted-2);padding-top:3px;font-variant-numeric:tabular-nums}
.tl .what b{font-family:var(--fam-anzeige);font-weight:500;font-size:18px;letter-spacing:-.015em;display:block}
.tl .what .org{font-size:13.5px;color:var(--hell-4);margin-top:3px}
.tl .what p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:9px;max-width:620px}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.post{padding:24px;border:1px solid var(--line);border-radius:var(--r-block);background:var(--card);
 transition:all .3s var(--ease);display:flex;flex-direction:column;gap:10px}
.post:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.post .dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:500}
.post h3{font-family:var(--fam-anzeige);font-weight:500;font-size:18px;letter-spacing:-.02em;line-height:1.3}
.post p{font-size:13.5px;color:var(--muted);line-height:1.62}
.post .more{font-size:13px;color:var(--link);margin-top:auto;padding-top:4px}

.contact{border:1px solid var(--line);border-radius:var(--r-glas);padding:clamp(26px,3.2vw,40px);background:var(--card);
 display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:center}
.contact p{font-size:15px;color:var(--muted);line-height:1.65;margin-top:10px}
.contact .hint{font-size:12.5px;color:var(--muted-2);margin-top:14px;line-height:1.55}
/* Zugeschaltete direkte Wege (BEFUNDE F2) */
.contact .direkt{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.contact .dweg{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--hell-2);transition:color .3s}
.contact .dweg:hover{color:var(--weiss)}
.contact .dweg svg{width:15px;height:15px;stroke:var(--hell-4);stroke-width:1.6;fill:none;
 stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.form{display:flex;flex-direction:column;gap:10px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}



@media(max-width:1080px){
 .wrap{grid-template-columns:1fr;gap:22px;padding:18px}
 .card{position:static;height:auto;padding:18px}
 .photo{aspect-ratio:1/.72}
 .meta{margin-top:24px;padding-top:0}
 .nav{position:sticky;top:14px;display:flex}
 section{scroll-margin-top:76px}
 #ich{padding:24px 0 0}
 .block{padding:36px 0 20px}
 .ich-mitte{min-height:calc(var(--schirm,100svh) - 24px);margin-bottom:0}
 .gal{grid-template-columns:repeat(2,1fr)}
 .gal.gal-1{grid-template-columns:1fr}
 .gal:not(.gal-1):not(.gal-2):not(.gal-3) figure:nth-child(1){grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
 .proj{grid-template-columns:1fr;gap:14px}
 .tl .row{grid-template-columns:1fr;gap:6px}
 .contact{grid-template-columns:1fr}
}

/* ── Ergänzungen für die echte Seite ──────────────────────────── */
/* Kanal: quadratisches Bild, darunter die Leiste mit Name und
   Zeile. Ein Stück, gemeinsame Rundung außen, keine sichtbare Naht
   (BEFUNDE E1). */
.channels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:30px}
.ch{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-kachel);overflow:hidden;
 background:var(--card);transition:all .3s var(--ease)}
.ch:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.ch .chbild{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
 font-family:var(--fam-anzeige);font-weight:600;font-size:34px;color:var(--weiss)}
.ch .chbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ch .chleiste{display:flex;align-items:center;gap:8px;padding:11px 13px;min-width:0}
.ch .t1{font-size:13.5px;font-weight:500;color:var(--hell-2);display:block}
.ch .t2{font-size:12px;color:var(--muted-2);margin-top:1px;display:block}
.ch .ar{margin-inline-start:auto;opacity:.35;transition:all .3s var(--ease);flex-shrink:0}
.ch:hover .ar{opacity:.9;transform:translateX(3px)}
.ch .ar svg{width:14px;height:14px;stroke:var(--weiss);stroke-width:1.7;fill:none}

/* Bilder in Kacheln */
.reel .bgi img,.gal .bgi img,.proj .im img{width:100%;height:100%;object-fit:cover;display:block}
.proj .im{overflow:hidden;position:relative}
.gal .bgi,.reel .bgi{overflow:hidden}

/* Overlay für Video und Beitrag: steht still über scrollendem
   Inhalt, also Glas */
.overlay{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:22px;
 background:rgba(4,5,8,.78);backdrop-filter:blur(8px)}
.overlay.on{display:grid}
.overlay .frame{width:min(920px,100%);aspect-ratio:16/9;border-radius:var(--r-block);overflow:hidden;
 background:#000;border:1px solid rgba(255,255,255,.14)}
.overlay .frame iframe{width:100%;height:100%;border:0;display:block}
/* Die Leseansicht: öffnet rechts, oben bündig mit der Oberkante der
   Profilkarte, in derselben Kartensprache wie die Karte. Der Halter
   spiegelt die Geometrie von .wrap und lässt Klicks daneben zum
   Schließen durch. */
.overlay .lese-brett{position:absolute;inset:0;max-width:var(--breit);margin:0 auto;padding:26px;
 display:grid;grid-template-columns:378px 1fr;gap:0 clamp(40px,5vw,88px);align-items:start;pointer-events:none}
/* Die Lesebreite bestimmt die Breite der Fläche, nicht die Stelle,
   an der der Text aufhört: die Fläche ist so breit wie die
   Lesebreite plus ihre Ränder, der Text füllt sie ganz aus. */
.overlay .lese{grid-column:2;justify-self:start;
 --lesebreite:620px;--leserand:clamp(26px,4vw,54px);
 width:min(100%,calc(var(--lesebreite) + 2*var(--leserand)));
 max-height:calc(100dvh - 52px);overflow-y:auto;pointer-events:auto;
 padding:34px var(--leserand) 46px;scrollbar-width:thin}
.overlay .lese .dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:500}
.overlay .lese h2{font-family:var(--fam-anzeige);font-weight:500;font-size:clamp(22px,3vw,30px);letter-spacing:-.025em;margin:10px 0 18px}
.overlay .lese .lead{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:var(--r-gross);
 border:1px solid var(--line);margin:2px 0 24px}
.overlay .lese h3{font-family:var(--fam-anzeige);font-weight:500;font-size:19px;letter-spacing:-.02em;margin:28px 0 10px}
.overlay .lese p{font-size:15px;color:var(--hell-3);line-height:1.75;margin-bottom:14px;white-space:pre-wrap}
.overlay .lese p em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent}
.overlay .zu{position:absolute;top:22px;inset-inline-end:22px;width:42px;height:42px;border-radius:50%;
 display:grid;place-items:center;cursor:pointer;z-index:5}
.overlay .zu svg{width:16px;height:16px;stroke:var(--hell-1);stroke-width:1.6;fill:none}
/* Leseansicht am Telefon: volle Breite, unterhalb des Kreuzes; das
   Kreuz sitzt auf dem feststehenden Overlay und bleibt beim
   Scrollen sichtbar. Steht hinter den Grundregeln, weil gleiche
   Spezifität sonst der späteren Grundregel den Vortritt ließe. */
@media(max-width:1080px){
 .overlay .lese-brett{grid-template-columns:1fr;padding:18px;padding-top:76px}
 .overlay .lese{grid-column:1;max-height:calc(100dvh - 94px)}
}

/* Fuß der Kundenseite */
.pfoot{max-width:var(--breit);margin:0 auto;padding:10px 26px 30px;display:flex;align-items:center;
 justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-2);
 position:relative;z-index:2}
.pfoot a{color:var(--muted-2);transition:color .3s}
.pfoot a:hover{color:var(--muted)}
.pfoot .zeichen{display:inline-flex;align-items:center;gap:7px}
.pfoot .zeichen svg{width:15px;height:15px}

/* Formularmeldungen */
.form .meldung{font-size:13px;line-height:1.5}
.form .meldung.ok{color:var(--gut)}
.form .meldung.weh{color:var(--weh)}

/* Melde-Seite */
.meldebox{max-width:560px;margin:0 auto;padding:80px 22px}
.meldebox .glass{padding:30px}
.meldebox h1{font-size:26px;margin-bottom:8px}
.meldebox .sub{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:22px}

/* ── Maschinenlesbare Schicht: sichtbare Spuren ───────────────── */
/* Sehr feines Häkchen an bestätigten Profillinks, mehr nicht */
.soc .rueckweg{position:absolute;inset-inline-end:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;
 background:var(--tief);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.soc{position:relative}
.rueckweg svg{width:8px;height:8px;stroke:var(--gut);stroke-width:2.6;fill:none}
.ch .t1 .rueckweg{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;
 background:rgba(126,224,168,.12);margin-inline-start:6px;vertical-align:-2px;border:none}
.ch .t1 .rueckweg svg{width:7px;height:7px}

/* Die Kennung im Fuß, dezent */
.pfoot .rechts{display:inline-flex;align-items:center;gap:14px}
/* Die leise Zeile zu den Namensvettern. Sie steht in einer Reihe mit
   Kennung, Impressum und Melden; ohne diese Regel bräche der Satz
   mitten im Namen um. Die Klasse stand bisher ohne Regel da, gefunden
   vom Prüfstand für Klassen ohne Regel. */
.pfoot .namenszeile{white-space:nowrap}
.pfoot .kennung{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--muted-2);
 font-size:11.5px;opacity:.75;cursor:default}

/* Tippziele auf Geräten ohne Zeiger: mindestens 44 Punkte */
@media(hover:none){
 .soc{width:44px;height:44px}
}

/* Das Zeichen neben dem Namen ist anklickbar und erklärt sich selbst.
   Es sieht aus wie vorher, nur der Zeiger und das Tippziel kommen
   dazu; auf Berührgeräten mindestens 44 Punkte. */
.zchn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;
 background:none;cursor:pointer;line-height:0;border-radius:50%;transition:opacity .25s var(--ease)}
.zchn:hover{opacity:.75}
.zchn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(hover:none){.zchn{min-width:44px;min-height:44px;margin:-12px}}

/* Verweis im Fuß, so unauffällig wie der Melde-Link */
.pfoot .fussknopf{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
 transition:color .3s var(--ease)}
.pfoot .fussknopf:hover{color:var(--hell-2)}

/* Die eigene Adresse im Netz: echter Verweis, sonst wie die übrigen
   Werte der Karte */
.meta .val-web a{color:inherit;border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.meta .val-web a:hover{border-color:rgba(255,255,255,.4)}

/* Anfassflächen auf Geräten ohne Zeiger: die Navigationsreihe, die
   direkten Kontaktwege und die Felder des Formulars. Der Text bleibt
   klein, nur die Fläche wächst. */
@media(hover:none){
  .nav a{min-height:44px;display:inline-flex;align-items:center}
  /* Die Zeichen unter der Karte: gleich groß gezeichnet, aber mit
     einer Fläche, die ein Daumen trifft (Arbeit 28). */
  .soc{min-width:44px;min-height:44px}
  .direkt .dweg{min-height:44px;display:inline-flex;align-items:center}
  .form .inp{min-height:44px}
  .pfoot a,.pfoot .fussknopf{display:inline-flex;align-items:center;justify-content:center;
   min-height:44px;min-width:44px}
  .meta .val-web a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── Die Artikelseite ─────────────────────────────────────────────
   Sie ist der erste Weg, der jemanden nach Persowna hereinführt.
   Deshalb steht oben, wessen Text das ist, und der Weg zur Akte ist
   dieselbe Fläche, nicht ein kleiner Verweis am Rand. */
.artikelseite .awrap{max-width:760px;margin:0 auto;padding:30px 22px 90px;position:relative;z-index:2}
/* Kein Glas: die beiden Bänder scrollen mit dem Text, und Glas ist
   für das, was stehen bleibt (Glasregel). */
.akopf{display:flex;align-items:center;gap:15px;padding:14px 18px;border-radius:var(--r-gross);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  text-decoration:none;color:inherit;margin-bottom:44px;transition:background .3s var(--ease)}
.akopf:hover{background:rgba(255,255,255,.06)}
.afoto{width:46px;height:46px;border-radius:var(--r-rund);object-fit:cover;flex:none;background:var(--flaeche-2)}
.afoto.leer{display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--muted-2)}
.akopf .atext{min-width:0;display:flex;flex-direction:column;gap:2px}
.aname{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--weiss)}
.azeichen svg{width:15px;height:15px;display:block}
.arolle{font-size:12.5px;color:var(--muted-2)}
.azurueck{margin-inline-start:auto;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted-2);flex:none}
.azurueck svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.abody{max-width:660px}
.adatum{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-1);margin-bottom:14px}
.abody h1{font-family:var(--fam-serif);font-weight:400;font-size:clamp(30px,4.4vw,46px);
  line-height:1.12;letter-spacing:-.02em;color:var(--weiss);margin:0 0 20px}
.aanriss{font-size:17px;line-height:1.6;color:var(--hell-4);margin:0 0 26px}
.abild{width:100%;border-radius:var(--r-gross);margin:0 0 30px;display:block}
.abody h2{font-family:var(--fam-anzeige);font-weight:500;font-size:20px;letter-spacing:-.01em;
  color:var(--weiss);margin:38px 0 12px}
.abody p{font-size:16.5px;line-height:1.78;color:var(--hell-4);margin:0 0 20px}
.abody p em{font-style:normal;color:var(--weiss)}
.afuss{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:56px;
  padding:18px 22px;border-radius:var(--r-gross);border:1px solid var(--line);background:rgba(255,255,255,.02);
  text-decoration:none;color:var(--hell-4);font-size:15px;transition:background .3s var(--ease)}
.afuss:hover{background:rgba(255,255,255,.06);color:var(--weiss)}
.afuss svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:640px){
  .artikelseite .awrap{padding:20px 18px 70px}
  .akopf{margin-bottom:32px;padding:12px 14px}
  .azurueck span{display:none}
}

/* ── Zeilenhöhe für Schriften, die mehr Platz brauchen ──
   Unsere engen Zeilenhöhen (Credo 1.06, Name 1.12, Überschriften
   1.15) sind für lateinische Versalien entworfen. Arabisch,
   Hebräisch, Devanagari, Thai und die ostasiatischen Schriften
   stapeln Ober- und Unterlängen und stoßen darin an. Gemessen am
   arabischen Credo: 140 Pixel Inhalt in einem 132 Pixel hohen
   Kasten. Die Marke setzt richtung() aus lib/schrift.ts, also
   greift die Regel nur dort, wo wirklich fremde Schrift steht;
   lateinische Zeilen bleiben unberührt. Griechisch und Kyrillisch
   stehen bewusst nicht dabei, sie haben lateinische Maße. */
[lang="und-Arab"],[lang="und-Hebr"],[lang="und-Deva"],[lang="und-Thai"],
[lang="und-Hani"],[lang="und-Jpan"],[lang="und-Hang"]{line-height:1.45}


/* ── Kleine Schirme (Arbeit 28) ────────────────────────────────────
   Kleiner werden heißt umbrechen, nicht weglassen. Die Zeile im Fuß
   mit dem Verweis auf die Namensgleichen brach nicht um und schob
   die ganze Seite nach rechts; die zweite Zeile der Karte war mit
   13,5 Pixeln zu klein zum Lesen aus Armlänge. */
@media (max-width:640px){
  .pfoot{align-items:flex-start}
  .pfoot .rechts{flex-wrap:wrap}
  .pfoot .namenszeile{white-space:normal}
}
@media (max-width:430px){
  .meta .rl,.meta .val,.who .rl{font-size:14px}
  .arolle,.blockline,.ch .t1{font-size:14px}
  .ch .t2,.tl .what .org,.tl .what p,.post p,.contact .dweg{font-size:14px}
  .reel .cap b,.pfoot,.pfoot .namenszeile{font-size:14px}
  .contact .hint{font-size:14px}
}