:root {
    ---black: #131313;
    ---white: #fff;
    ---accent: #ff006e;

    /* Glitch */
    --bg-color: #00A6A6;
    --blend-1: normal;
    --blend-2: normal;
    --blend-3: normal;
    
    --time-anim: 5s;

    /* Fokusring, zweifarbig. Innen der Akzent (die Marke, liegt am Element),
       außen der Träger — das Band, das den Grund berührt und den Ring hält.
       Der Träger ist Schwarz: 6,52:1 über der dunkelsten Stelle der Textur
       (RGB 153), 13,55:1 über p5 (RGB 220), 15,59:1 über dem Median (RGB 235).
       Der Akzent selbst schafft dort nur 1,35:1 bis 3,22:1 — deshalb berührt
       er den Grund nie, sondern liegt geschützt innen am Element.
       Auf schwarzem Grund kippt der Träger auf Weiß (18,58:1). Die Variable
       vererbt sich, darum drehen verschachtelte helle Kästen sie einfach
       zurück (siehe .board-note) — ohne Selektor-Wettlauf. */
    --focus-ring-traeger: var(---black);

    /* Freiraum für den fixierten Bewegungs-Tab am rechten Rand (Desktop):
       Tab-Breite 2,75rem plus Luft. Container und Hero halten ihn beidseitig. */
    --tab-freiraum: calc(2.75rem + var(--space-2xs));

    --font-display: 'Bebas Neue';
    --font-body: 'Inter';
    --font-details: 'Space Grotesk';

    --header-h: 76px;
    --border-radius: 4px;
    --transition: .25s ease;
    --card-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Laufweite für Register 3 (Maschine): Meta, Label, Index — versal, Space Grotesk. */
    --track-label: 0.08em;

    --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
    --space-2xs: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
    --space-xs: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
    --space-s: clamp(1rem, 1rem + 0vw, 1rem);
    --space-m: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
    --space-l: clamp(2rem, 2rem + 0vw, 2rem);
    --space-xl: clamp(3rem, 3rem + 0vw, 3rem);
    --space-2xl: clamp(4rem, 4rem + 0vw, 4rem);
    --space-3xl: clamp(6rem, 6rem + 0vw, 6rem);

    --text--s: clamp(0.8rem, 0.7879rem + 0.0539vw, 0.8333rem);
    --text-m: clamp(1rem, 1rem + 0vw, 1rem);
    --text-l: clamp(1.2rem, 1.1818rem + 0.0808vw, 1.25rem);
    --text-xl: clamp(1.44rem, 1.3955rem + 0.198vw, 1.5625rem);
    --text-2xl: clamp(1.728rem, 1.6461rem + 0.3638vw, 1.9531rem);
    --text-3xl: clamp(2.0736rem, 1.9399rem + 0.5944vw, 2.4414rem);
    --text-4xl: clamp(2.4883rem, 2.2834rem + 0.9106vw, 3.0518rem);
    --text-5xl: clamp(2.986rem, 2.6846rem + 1.3393vw, 3.8147rem);
    --text-6xl: clamp(3.5832rem, 3.1522rem + 1.9155vw, 4.7684rem);
    --text-7xl: clamp(4.2998rem, 3.6959rem + 2.6839vw, 5.9605rem);
}

/* RESET */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Inter';
    color: var(---black);
    /* Der Header steht fixed. Ohne diesen Abstand landet jedes Sprungziel
       (#main per Skip-Link, #contact, Rückwärts-Tabben) dahinter.
       --header-h misst js/main.js live nach; der Wert in :root ist der
       Startwert, bis das Skript läuft. */
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    position: relative;
}

body::before {
    position: absolute;
    content: "";
    inset: 0;
    z-index: -10;
    opacity: 0.4;
    background-size: cover;
    background-image: url(../img/site-background-image.webp);
}

img {
    width: 100%;
    height: auto;
}

.project-slide img {
    height: 100%;
}

/* Fonts & Text */

h1, h2, h3, h4{
    font-family: var(--font-display);
    /* Bebas Neue liegt nur als Schnitt 400 vor (fontface.css) — ohne diese
       Zeile setzt der Browser-Default (h1-h6 = bold) trotzdem 700 durch,
       und Bebas hat keinen echten Fettschnitt: der Browser synthetisiert
       Fake-Fett auf ALLEN Überschriften (per CDP gemessen, computed
       font-weight war 700 auf h1/h2/h3 trotz keiner einzigen Weight-Regel
       im gesamten File für diese Selektoren). */
    font-weight: 400;
}

/* Vorsorge, kein aktueller Fall: Bebas hat nur den 400er Schnitt. Sobald in
   einer Überschrift (kommt teils aus WYSIWYG-Feldern) fett/kursiv markiert
   wird, würde der Browser sonst wieder synthetisches Fett/Kursiv rendern —
   derselbe Fake-Fett-Bug wie oben, nur durch die Hintertür. */
h1 strong, h2 strong, h3 strong, h4 strong,
h1 em, h2 em, h3 em, h4 em {
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-size: var(--text-6xl);
    line-height: 0.95;
}

h2 {
    font-size: var(--text-4xl);
    line-height: 0.95;
}

h3 {
    font-size: var(--space-m);
}

p {
    line-height: 1.6;
}

/* Register 2 (Rede): Auszeichnung im Fließtext. Beide Schnitte liegen echt
   vor (fontface.css) — kein synthetisiertes Fake-Kursiv/-Fett. */
em {
    font-style: italic;
}

strong {
    font-weight: 800;
}

/* Register 3 (Maschine), 15px fest — war zuvor --text--xs (10,24px auf
   Desktop, kaum lesbar). Trägt u.a. Zarinas Namen im Hero. */
.micro-subline {
    font-family: var(--font-details);
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
}

.section-subline {
    font-family: var(--font-display);
    font-size: var(--space-s);
}
/* Der Stempel. Der Grund ist eine Betontextur, an ihrer dunkelsten gemessenen
   Stelle RGB 153 — kein Rot hält sich dort als Tinte (das Neon schafft dort
   nur 1,35:1). Deshalb eine deckende Fläche drunter: Neon auf Schwarz = 4,85:1,
   unabhängig davon, was die Textur darunter gerade tut.
   Der Stempel ist rationiert, kein Default: höchstens einmal pro Seite, als
   bewusstes Satzzeichen — nicht automatisch für jede künftige Hervorhebung
   im Fließtext. Ausnahmen stehen bei den Sections. */
.text-highlight {
    background-color: var(---black);
    color: var(---accent);
    font-weight: 800;
    padding: 0.1em 0.35em;
    /* Pflicht: sonst reißt die Platte beim Zeilenumbruch auf und das Padding
       sitzt nur am Anfang und Ende statt an jedem Zeilenfragment. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.special-text {
    text-transform: uppercase;
    font-weight: 800;
    font-size: var(--text--s);
    align-self: center;
    text-align: center;
    color: var(---accent);
    padding: var(--space-s) var(--space-3xl);
    background-color: var(---black);
    box-shadow: var(--card-shadow);


}


/* UTILITY */

/* Innen 3px Akzent, außen 3px Träger — zusammen ein 6px breiter Ring.
   outline-offset muss ausdrücklich auf 0: Es gehört nicht zur outline-
   Kurzform und wird von ihr nicht zurückgesetzt, Chrome setzt sonst seine
   eigene 1px-Lücke. Ohne die Null hinge die Geometrie am Browser. */
:focus-visible {
    outline: 3px solid var(---accent);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--focus-ring-traeger);
}

/* Sections mit schwarzem Grund: dort ist ein schwarzer Träger unsichtbar,
   also kippt er auf Weiß. Gesetzt wird am Container, nicht am Element —
   die Variable vererbt sich an alles, was darin fokussierbar ist. */
header,
.service-card,
.runningsystem,
.output,
.archive-cta,
/* Der Skip-Link steht im Markup VOR dem Header, klappt aber fixed über ihm
   auf (z-index 1000 über 30). Sein Grund ist deshalb der schwarze Header,
   nicht die helle Seite — im Code sieht man das nicht, nur am Bild. */
.skip-link {
    --focus-ring-traeger: var(---white);
}

/* Helle Kästen INNERHALB der dunklen Sections drehen den Träger zurück:
   der weiße Notizzettel im schwarzen .output-Bereich trägt Weiß nicht. */
.board-note {
    --focus-ring-traeger: var(---black);
}

/* Versteckt bis Fokus: Clip-Technik (robust, unabhängig von transform).
   Bei :focus klappt der Link als echter sichtbarer Kasten oben links auf. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: var(--space-s);
    z-index: 1000;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    background-color: var(---black);
    color: var(---white);
    padding: var(--space-xs) var(--space-m);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    text-decoration: none;
}

section {
    padding-block: var(--space-2xl);
}


.container {
    max-width: 1350px;
    width: 100%;
    margin-inline: auto;
}

.textbox {
    max-width:66ch;
    width: 100%;
}

.btn-wrap {
    margin-top: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    text-align: center;

}

.btn {
    display: block;
    text-decoration: none;
    font-family: var(--font-display);
    font-size:var(--text-l);
    padding: var(--space-xs) var(--text--s);
    transition: var(--transition);
}
.btn-primary {
    color: var(---black);
    background-color: var(---accent);
    --btn-glitch-bg: var(---accent);
}

.btn-secondary {
    background-color: var(---black);
    color: var(---white);
    --btn-glitch-bg: var(---black);
}

.btn-primary,
.btn-secondary {
    position: relative;
}

.btn-glitch {
    transform: translateZ(0);
}

/* Hintergrund-Ebene — wird geglitchet, nicht der Text */
.btn-primary.btn-glitch::before,
.btn-secondary.btn-glitch::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.btn-primary.btn-glitch::before,
.btn-secondary.btn-glitch::before { background-color: var(--btn-glitch-bg); }

.btn-glitch.is-active {
    background-color: transparent;
    transition: none;
}

.btn-glitch.is-active::before {
    opacity: 1;
    filter: url('#glitch-filter');
    clip-path: inset(0);
}

.btn-glitch .btn-text {
    position: relative;
    z-index: 1;
}

/* Farbige Randlinien */
.btn-glitch.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    animation: glitch-lines 2.6s infinite step-end;
}

@keyframes glitch-lines {
    0%, 7%   { box-shadow: -2px 0 0 0 #ff536b, 2px 0 0 0 #3ffeff; }
    8%, 18%  { box-shadow: none; }
    19%      { box-shadow: -3px 0 0 0 #ff536b, 3px 0 0 0 #3ffeff; }
    23%, 100%{ box-shadow: none; }
}

/* Barrierefreiheit: kein Glitch → Button skaliert stattdessen */

@media (prefers-reduced-motion: reduce) {
    .btn-glitch:hover {
        transform: scale(1.1);
    }
}

.minimal-btn,
.card-btn {
    display: block;
    color: inherit;
    padding-inline: 0;
    transform-origin: left center;
    transition: var(--transition);
}

.minimal-btn::after,
.card-btn::after {
    content: "→";
    font-size: var(--text-xl);
    vertical-align: middle;
    display: inline-block;
    transition: var(--transition);
}

.minimal-btn:hover {
    transform: scale(1.1);
}

.minimal-btn:hover::after {
    transform: translateX(var(--space-m));
}

.card-btn {
    position: relative;
    color: var(---accent);
    font-family: var(--font-display);
    border: 2px solid var(---accent);
    padding: var(--space-2xs);
    justify-self: center;
    transition: var(--transition);
    background-color:transparent;
}

.card-btn::after {
    position: absolute;
    content: "";
    z-index: -1;
    inset: 0;
    width: 0%;
    background-color: var(---accent);
    transition: var(--transition);
}

.card-btn:hover {
    transform: scale(1.1);
    transform-origin: center center;
    color: var(---black);
    border: none;
}

.card-btn:hover::after {
    width: 100%;

}




/* HEADER */

header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:30;
    background-color: var(---black);
    display: flex;
    align-items: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
/* WP-Adminbar: den fixed Header runterschieben, sonst entsteht eingeloggt ein
   32px-Gap zwischen Header und Hero. Auf der Live-Seite (ohne Adminbar) greift das nicht. */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar header { top: 46px; }
}

.sitelogo {
    color: var(---white);
}

.sitelogo svg {
    max-width: 150px;
    width: 100%;
}

.siteheader-container {
    padding: var(--space-s);
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.desktop-nav {
    display: none;
}
.burger{
    width:44px;
    height:44px;
    background:var(---accent);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    z-index:41;
}
.burger span{
    display:block;
    height:3px;
    width:26px;
    margin:0 auto;
    background:var(---black);
    border-radius:2px;
    transition:transform .3s, opacity .3s;
}
body.menu-offen .burger span:nth-child(1){
    transform:translateY(8px) rotate(45deg);}
body.menu-offen .burger span:nth-child(2){
    opacity:0;
}
body.menu-offen .burger span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}
body.menu-offen .nav-panel,
body.menu-offen .motion-toggle-menu {
    transform:translateX(0);
}
.nav-panel,
.motion-toggle-menu {
    transform:translateX(-100%);
    transition:transform .32s ease;
}

.nav-panel {
    padding: var(--space-s);
}
.nav-panel ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    list-style: none;
    margin: 0;
    padding: 0;
}
.backdrop {
    background-color: var(---black);
    /* nie schmaler als 13rem: sonst passt der Bewegungs-Schalter nicht in eine Zeile */
    width:min(max(40vw, 13rem), 320px);
    border-radius: var(--border-radius);
    position:fixed;
    inset:var(--header-h) 0 0 0;
    opacity:0;
    visibility:hidden;
    transition:opacity .32s, visibility .32s;
    z-index:35;
}


body.menu-offen .backdrop {
    opacity: 1;
    visibility: visible;
}

body.menu-offen {
    overflow: hidden;
}

header a{
    color:var(---white);
    text-decoration:none;
    font-family:var(--font-display);
    text-transform:uppercase;
    font-size:var(--text-l);
    transition: var(--transition);
}

.nav-panel a:hover,
.nav-panel a.active,
.nav-panel .current-menu-item > a:not([href*="#"]) {
    background-color:var(---accent);
    color:var(---black);
    padding-inline: var(--space-xs);
}

.nav-panel a:focus-visible{
    color:var(---accent);
}

/* Bewegungs-Schalter im mobilen Menü: abgesetzt von den Links durch Rahmen
   und Abstand, damit er nicht wie ein weiteres Navigationsziel wirkt. */
.motion-toggle-menu {
    margin: var(--space-l) var(--space-s) 0;
    min-height: 2.75rem;    /* Zielgröße bleibt, die Schrift wird leiser */
    padding: var(--space-3xs) var(--space-2xs);
    font-family: var(--font-details);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(---white);
    background-color: var(---black);
    border: 1px solid var(---white);
    cursor: pointer;
}

/* Hover: Fläche kippt UND der Rahmen wird pink — nie nur Farbe. */
.motion-toggle-menu:hover {
    color: var(---black);
    background-color: var(---white);
    border-color: var(---accent);
}

/* Stopp aktiv: Zustand steht im Wort, Pink ist Zusatz (4,85:1). */
.motion-toggle-menu[aria-pressed="true"] {
    color: var(---black);
    background-color: var(---accent);
    border-color: var(---accent);
}


/* HERO */

section.hero {
    height: 100vh;
    padding: 0;
}

.hero-container {
    height: calc(100vh - var(--space-m) - var(--header-h));
    margin-top: var(--header-h);
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0, 1350px) minmax(0,1fr);
    grid-template-rows:1fr 2fr;
}
.hero-bg-img {
    object-fit: cover;
    grid-column: 1/4;
    grid-row: 1/2;
    width: 100%;
    height: 100%;
}

.glitch-img-container {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; 
    right: 0;
    z-index: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.glitch-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; 
    right: 0;
    z-index: 0;
    background: url(../img/create-or-decay-text.webp);
    background-position: center;
    background-size: cover;
}

.glitch-image:nth-child(1) {
    opacity: 1;
}

.glitch-image:nth-child(2) {
    background-color: red;
    background-blend-mode: var(--blend-1);
}

.glitch-image:nth-child(3) {
    background-color: green;
    background-blend-mode: var(--blend-2);
}

.glitch-image:nth-child(4) {
    background-color: blue;
    background-blend-mode: var(--blend-3);
}

.glitch-image:nth-child(n+2) {
    opacity: 0;
}

.glitch-image:nth-child(n+1) {
    opacity: 1;
}

.glitch-image:nth-child(2) {
    transform: translate3d(1.1, 0, 0);
    animation: glitch-horizontal 14s infinite linear alternate;
}

.glitch-image:nth-child(3) {
    transform: translate3d(-1.1, 0, 0);
    animation: glitch-horizontal-2 10s infinite linear alternate;
    animation-delay: -3s;
}

.glitch-image:nth-child(4) {
    transform: translate3d(-1.1, 0, 0);
    animation: glitch-vertical 2s infinite linear alternate;
}

.glitch-image:nth-child(5) {
    transform: translate3d(0, 1.1, 0) scale3d(-1, -1, 1);
    animation: glitch-flash 1s steps(1, end) infinite;
}

.glitch-image:nth-child(6) {
    transform: translate3d(0, 1.3, 0) scale3d(-1, -1, 1);
    animation: glitch-flash-2 1s steps(1, end) infinite;
}

@keyframes glitch-horizontal {
    0% { 
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    10% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    20% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    30% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    40% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    50% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    60% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    70% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    80% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    90% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    100% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
}

@keyframes glitch-horizontal-2 {
    0% { 
        opacity: 1;
        transform: translate3d(-4px, 0, 0);
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }
    3% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    5% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    7% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    9% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }
    11% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }
    13% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    15% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }
    17% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }
    19% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }
    20% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(-4px, 0, 0);
    }
    22%, 100% {
        opacity: 0;
        transform: translate3d(0,0,0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-vertical {
    0% { 
        opacity: 1;
        transform: translate3d(0, -5px, 0) scale3d(-1,-1,1);
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
        clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    }
    1.5% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
        clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    }
    2% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
        clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    }
    2.5% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    3% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
        clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    }
    5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
        clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    }
    5.5% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    }
    7% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
        clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    }
    8% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }
    9% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
        clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    }
    10.5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
        clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    }
    11% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
        clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    }
    13% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
        clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    }
    14% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
        clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    }
    14.5% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
        clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    }
    15% {
        -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
        clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    }
    16% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    18% {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
        clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(0, -10px, 0) scale3d(-1,-1,1);
    }
    22%, 100% {
        opacity: 0;
        transform: translate3d(0,0,0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-flash {
    0% { 
        opacity: 0.2; 
        transform: translate3d(10px, 5px, 0);
    }
    33%, 100% { 
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes glitch-flash-2 {
    0% {
        opacity: 0.2;
        transform: translate3d(5px, 10px, 0);
    }
    13%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

/* Bewegung anhalten
   Die Glitch-Ebenen laufen endlos (infinite). Das braucht zwei Notausgänge:
   den Schalter auf der Seite (Body-Klasse) und die System-Einstellung.
   Die Ebenen ab der zweiten werden dabei ausgeblendet — ohne ihre Animation
   lägen sie sonst alle sichtbar übereinander. Ebene 1 trägt das Bild.

   Zum ":nth-child(n)": Die Animationen oben hängen an
   ".glitch-image:nth-child(2)" bis ":nth-child(6)". Ein schlichtes
   ".glitch-image" wiegt weniger und verliert gegen sie — die Animation liefe
   dann trotz Stopp weiter. ":nth-child(n)" trifft jede Ebene und bringt das
   Gewicht auf dieselbe Stufe. Nicht hübsch, aber der Grund steht hier. */

.bewegung-gestoppt .glitch-image:nth-child(n) {
    animation: none;
}

.bewegung-gestoppt .glitch-image:nth-child(n+2) {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .glitch-image:nth-child(n) {
        animation: none;
    }

    .glitch-image:nth-child(n+2) {
        opacity: 0;
    }

    /* Es bewegt sich ohnehin nichts — dann braucht es auch keinen Stopp-Knopf. */
    .motion-toggle,
    .motion-toggle-menu {
        display: none;
    }
}

/* Der Stopp-Knopf: seitenweit EIN Knopf (gehookt in header.php), fixiert als
   hochkanter Tab an der rechten Kante — erreichbar auf jeder Seite, auch auf
   Archiv/FAQ/Projekt, wo die Glitch-Bewegung aus header.php bisher OHNE
   Stopp-Möglichkeit lief (WCAG 2.2.2).
   writing-mode statt transform:rotate — Latein läuft in "vertical-rl" mit
   der Default-Orientierung "mixed" automatisch sideways, keine eigene
   Rotation nötig.
   Deckende Flächen (kein rgba): der Knopf schwebt über hellem Beton UND
   dunklen Sections, sein Kontrast muss sich selbst tragen, unabhängig davon,
   was gerade dahinter liegt. */
/* Mobile: Tab am Rand ausgeblendet, er verdeckte dort Wortenden im Fließtext.
   Der Schalter sitzt stattdessen im Menü (.motion-toggle-menu), ab 900px
   kommt der Tab zurück (siehe Media Queries). */
.motion-toggle {
    display: none;
    position: fixed;
    top: 32%;
    right: 0;
    transform: translateY(-50%);
    z-index: 900;

    writing-mode: vertical-rl;

    /* block-size = in vertical-rl die PHYSISCHE Breite (die Dicke des Tabs) —
       WCAG 2.5.8 verlangt ein Ziel von mindestens 24x24px, hier großzügiger. */
    min-block-size: 2.75rem;
    /* padding-inline = physisch oben/unten (Luft um den Text im Tab),
       padding-block = physisch links/rechts (hält den Tab schlank). */
    padding-inline: var(--space-s);
    padding-block: var(--space-3xs);

    font-family: var(--font-details);
    /* Register 3 fest, 15px — war --text--xs (11,11px auf Desktop, ein
       Bedienelement unter Lesegröße). */
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: var(--track-label);

    color: var(---white);
    background-color: var(---black);
    border: 1px solid currentColor;
    /* Nur die Ecken weg von der Kante runden — der Tab wächst sichtbar aus
       dem Bildschirmrand heraus. */
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    cursor: pointer;
    /* Bewusst nur diese zwei Eigenschaften statt der Kurzform: "transition:
       .25s ease" bedeutet "all" und ließe auch den Fokusring einblenden.
       Eine Fokus-Markierung muss sofort da sein, nicht faden. */
    transition: color var(--transition), background-color var(--transition);
}

.motion-toggle:hover {
    color: var(---black);
    background-color: var(---white);
}

/* Stopp aktiv: Der Zustand steht schon im Wort ("Bewegung starten"/
   "Bewegung stoppen") — die Farbe ist zusätzliche, nicht alleinige
   Markierung. Pink-Fläche/schwarzer Text hält 4,85:1, unabhängig vom
   Seiteninhalt dahinter. */
.motion-toggle[aria-pressed="true"] {
    color: var(---black);
    background-color: var(---accent);
}

.motion-toggle[aria-pressed="true"]:hover {
    color: var(---accent);
    background-color: var(---black);
}

/* Eigener Fokusring statt des globalen --focus-ring-traeger-Systems: Der
   Knopf schwebt fixiert über wechselndem Seiteninhalt (mal heller Beton,
   mal dunkle Section, je nach Scrollposition) — ein einfarbiger Träger
   könnte genau dort verschwinden, wo die Seite zufällig dieselbe Farbe hat.
   Schwarzer Ring innen + weißer Ring außen deckt in Kombination JEDEN
   Hintergrund: der eine der beiden Ringe kontrastiert immer. */
.motion-toggle:focus-visible {
    outline: 3px solid var(---accent);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(---black), 0 0 0 9px var(---white);
}

/* Im gestoppten Zustand ist die Fläche selbst schon pink — der pinke Ring
   von oben würde dort unsichtbar in ihr verschwinden (Anders' Fund). Die
   Ringe außen tragen den Fokus ohnehin allein, aber ohne diese Zeile läge
   eine funktionslose, kaputt aussehende Schicht im Markup. */
.motion-toggle[aria-pressed="true"]:focus-visible {
    outline-color: var(---black);
}

/* Kurze/mobile Viewports (Querformat o.ä.): der vertikale Text darf nie über
   die Bildschirmhöhe hinauswachsen — kleinere Schrift, engere Polsterung. */
@media (max-height: 480px) {
    .motion-toggle {
        font-size: 0.75rem;
        padding-inline: var(--space-xs);
    }
}


.hero-content-img1,
.hero-content-img2-wrap,
.hero-textbox {
    margin: var(--space-s);
}

.hero-content-img1,
.hero-content-img2-wrap {
    width: 30vw;
}

.hero-content-img1 {
    z-index: 2;
    grid-column: 2/3;
    grid-row: 1/2;
    aspect-ratio: 8/7;
    justify-self: start;
    align-self: center;
}

.hero-content-img1.glitch-img-container {
    position: relative;
    overflow: hidden;
}

.hero-content-img1 .glitch-image {
    background-image: url(../img/create-or-decay-text.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hero-content-img1 .glitch-image:nth-child(2),
.hero-content-img1 .glitch-image:nth-child(3),
.hero-content-img1 .glitch-image:nth-child(4) {
    background-color: transparent;
}

.hero-content-img2-wrap {
    position: relative;
    z-index: 2;
    grid-column: 2/3;
    grid-row: 2/3;
    min-width: 0;
    background-color: #ff006e;
    align-self: stretch;
}

.hero-content-img2 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(120%);
}

.hero-textbox {
    max-width: 60vw;
    width: 100%;
    grid-row: 2/3;
    grid-column: 2/3;
    padding-left: var(--space-m);
    justify-self: flex-end;
    align-self: flex-end;
}

/* About */

.about-container {
    padding-inline:var(--space-s);
    text-wrap: balance;
}


/* Projekt Overview*/

.project-overview-container {
    padding-inline: var(--space-s);
}
.project-overview-headline {
    margin-bottom: var(--space-l);
}

.headline-graphic {
    background-color: var(---accent);
    width: 70px;
    height: 50px;
    display: none;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

}

.project-slider-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
}

.project-slider-track {
    display: flex;
    height: 100%;
    transition: transform var(--transition);
}

@media (prefers-reduced-motion: reduce) {
    .project-slider-track {
        transition: none;
    }
}

.project-slide {
    flex: 0 0 100%;
    height: 100%;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: var(---white);
    color: var(---black);
    font-size: var(--text-l, 1.25rem);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition), color var(--transition);
}

.slider-arrow:hover {
    background-color: var(---accent);
    color: var(---black);
}

.slider-arrow-prev {
    left: var(--space-s);
}

.slider-arrow-next {
    right: var(--space-s);
}

.project-slide a {
    display: block;
    height: 100%;
}

.project-slide img,
.dummy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dummy-img:not(img) {
    background-color: #c8c8c8;
}

.archive-link {
    padding-block: 0;
}

.project-current-link {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-s);
    font-family: var(--font-display);
    text-decoration: none;
    color: var(---black);
}

.project-current-link::before,
.project-current-link::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: var(---black);
}

/* Service */

.service-container {
    padding-inline: var(--space-s);
}

.service .textbox {
    margin-bottom: var(--space-l);
}

.service-card-grid {
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-rows: 1fr;
    gap: var(--space-m);
    justify-items: center;
}

.service-card {
    width: 100%;
    max-width: 600px;
    border-radius: var(--border-radius);
    background-color: var(---black);
    padding: var(--space-m);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-m);
    box-shadow: var(--card-shadow);
}

.service-card h3,
.service-card p {
    color: var(---white);
    text-wrap: pretty;
}

.service-card h3 {
    text-align: center;
    display: inline-block;
    border-bottom: 2px solid var(---accent);
    padding-bottom: var(--space-2xs);
}

.service .btn-wrap {
    justify-content: flex-end;
    flex-grow: 1;
}
.service .btn-wrap .minimal-btn {
    text-align: end;
    align-self: flex-end;
}

/* Deco */

.deco-container {
    display: grid;
    grid-template-columns: 1fr;
    padding: var(--space-s);
}

.deco-img {
    grid-column: 1/2;
    grid-row: 1/2;
    aspect-ratio: 4/3;
    object-fit: cover;
    background-color: var(---black);
    filter: brightness(160%) grayscale() contrast(105%);
}

.special-textbox {
    align-self: center;
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

/* Blog */

.output {
    background-color: var(---black);
}

.output .textbox * {
    color: var(---white);
}

.output-container {
    padding-inline: var(--space-s);
}

.output .textbox {
    margin-bottom: var(--space-l);
}

.blog-post-grid {
    display: grid;
    gap: var(--space-2xl) var(--space-xl);
}

.output .btn-wrap {
    justify-content: flex-end;
    flex-grow: 1;
}
.output .btn-wrap .minimal-btn {
    color: var(---white);
    text-align: end;
    align-self: flex-end;
}

/* Contact */
.contact-container {
    padding-inline: var(--space-s);
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
}

.contact .textbox {
    padding-bottom: var(--space-l);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.form-group label {
    font-family: var(--font-details);
    font-size: var(--text--s);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
}

.form-group .optional {
    text-transform: none;
    opacity: 1;
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-body);
    font-size: var(--text-m);
    color: var(---black);
    background: transparent;
    border: none;
    /* Die Linie ist das Einzige, was das Feld als Feld ausweist — sie muss
       3:1 tragen (WCAG 1.4.11). Vorher rgba(19,19,19,0.3): das ergibt über
       dem Median-Grund effektiv RGB 170 und damit 1,95:1. Deckend Schwarz
       liegt bei 6,52:1 über der dunkelsten Stelle der Textur.
       Sie bleibt in JEDEM Zustand schwarz — den Fokus zeigt der Ring aus dem
       :focus-visible-System oben, der gegen die Textur trägt. Akzent-Pink
       läge hier bei 1,35:1 über dem Grund und würde obendrein mit dem
       pinken Innenband des Rings verschmieren. */
    border-bottom: 2px solid var(---black);
    padding-block: var(--space-2xs);
}

.form-group textarea {
    resize: vertical;
    min-height: 8rem;
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form button[type="submit"] {
    align-self: flex-start;
    margin-top: var(--space-s);
    border: none;
}

/* War zweimal im File (.sr-only / .visually-hidden), byteidentisch —
   zusammengelegt auf den häufiger verwendeten Namen. clip-path als
   moderne Redundanz zu clip() ergänzt, nach Vorbild .skip-link oben. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(---black);
    font-family: var(--font-body);
}

/* Rückmeldung nach dem Absenden (Erfolg oder Fehler). */
.form-message {
    padding: var(--space-s);
    border-left: 4px solid var(---black);
    /* Deckend statt rgba(255,255,255,0.75): der Balken lag durchscheinend
       auf der Textur, der Kontrast schwankte mit der Fensterbreite (im
       schlechtesten Fall 3,07:1 — 0,07 über den nötigen 3:1, kein Puffer,
       Glück). Prisms Regel — auf dem Beton ist alles Farbige deckend.
       Deckend gerechnet: Pink (---accent) auf Weiß 3,83:1, echter Puffer. */
    background-color: var(---white);
    font-family: var(--font-details);
    font-size: var(--text--s);
}

.form-message-fehler {
    /* 4px-Balken ist eine deckende Fläche — Pink bleibt hier erlaubt. */
    border-left-color: var(---accent);
}

.form-message a {
    color: var(---black);
}

/* Fehlertext direkt am jeweiligen Feld. Pink als Textfarbe scheitert auf der
   Textur (kein deckender Grund) — deshalb schwarzer Text auf Weiß, Pink nur
   noch als deckender 4px-Balken links. */
.form-error {
    padding: var(--space-3xs) var(--space-2xs);
    border-left: 4px solid var(---accent);
    color: var(---black);
    background-color: var(---white);
    font-family: var(--font-details);
    font-size: var(--text--s);
}

.form-group-checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
    /* Damit ein Fehlertext unter der Zeile landet statt neben dem Label. */
    flex-wrap: wrap;
}

.form-group-checkbox .form-error {
    flex-basis: 100%;
}

.form-group-checkbox input[type="checkbox"] {
    /* 24px Zielgröße (WCAG 2.5.8) — war 1,1rem/17,6px, User-Agent-Ausnahme
       greift nicht, weil die Größe hier bewusst gesetzt ist. */
    width: 1.5rem;
    height: 1.5rem;
    accent-color: var(---accent);
    flex-shrink: 0;
}

.form-group-checkbox label {
    text-transform: none;
    font-family: var(--font-body);
    font-size: var(--text--s);
    letter-spacing: normal;
}

/* Der Datenschutzlink trägt keine .text-highlight-Klasse (mehr) — eine
   schwarze Platte um "Datenschutzerklärung" sähe aus wie eine Schwärzung
   genau des Dokuments, das man lesen soll. Schlichtes Schwarz + Unterstrich:
   6,52:1 über der dunkelsten Stelle der Textur (RGB 153). */
.form-group-checkbox a {
    background: none;
    padding: 0;
    color: var(---black);
    text-decoration: underline;
}

/* Rechtstexte (Impressum, Datenschutz) — Inhalt kommt aus dem WP-Editor,
   deshalb hier ein eigener Leserhythmus statt Abstaenden am Einzelelement. */
.rechtstext {
    /* Rechtstexte stehen links an der Containerkante, nicht mittig:
       eine Adresse und ein Paragrafentext lesen sich als Dokument, nicht als Hero. */
    margin-inline: 0;
}
.rechtstext h2 {
    /* Deutlich kleiner als die Hero-Größe (--text-4xl). Die großen, fetten
       Versalien erzeugten in einer 66ch-Spalte einzelne Wörter auf eigener
       Zeile — bei Überschriften wie "Hosting und technische Administration"
       jedes Mal. balance verteilt die Zeilen gleichmäßig. */
    font-size: var(--text-xl);
    line-height: 1.1;
    text-wrap: balance;
    margin-top: var(--space-l);
    margin-bottom: var(--space-2xs);
}
.rechtstext p,
.rechtstext li {
    /* verhindert einzelne Schlusswörter am Absatzende */
    text-wrap: pretty;
}
.rechtstext h2:first-of-type {
    margin-top: var(--space-m);
}
.rechtstext p + p,
.rechtstext ul {
    margin-top: var(--space-xs);
}
.rechtstext ul {
    padding-left: 1.2em;
}
.rechtstext li {
    margin-bottom: .3em;
}
.rechtstext a {
    /* Textfarbe erben statt Browser-Blau: der Unterstrich trägt die Erkennbarkeit,
       damit haengt sie nicht an der Farbwahrnehmung (WCAG 1.4.1). */
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.rechtstext a:hover,
.rechtstext a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Footer */

.sitefooter {
    background-image: url(../img/background-footer.webp);
    background-size: cover;
}

.sitefooter-container {
    padding: var(--space-xl) var(--space-s);
    display: grid;
    gap: var(--space-m);

}
.sitefooter-sitelogo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2xl);
    color: var(---white);
}

.sitefooter-sitelogo svg{
    max-width: 500px;
    width: 100%;
}

.social-media-container {
    display: flex;
    justify-content: center;
    gap: var(--space-m);
}

.social-media-container svg {
    fill: var(---white);
    width: 50px;
    height: auto;
    transition: var(--transition);
}

.social-media-container svg:hover {
    fill: var(---accent);
    transform: scale(1.3);
    transform-origin: center center;
}

.footer-bottom * {
    color: var(---white );
    font-family: var(--font-display);
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
    text-align: left;
}

.sitefooter ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.sitefooter ul li {
    list-style: none;
}

.sitefooter ul li a {
    transition: var(--transition);
    display: inline-block;
}

.sitefooter ul li a:hover {
    color: var(---accent);
    text-decoration: underline 2px;
    text-underline-offset: 4px;
    transform: scale(1.3);
    transform-origin: center center;
}

/* ------------- FAQ PAGE ------------- */

.faq-hero-container {
    margin-top: var(--space-s);
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0, 1350px) minmax(0,1fr);
    grid-template-rows:1fr 1fr;
    row-gap: var(--space-l);
}

.fotobox-img-bg {
    margin: var(--space-s);
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: var(---accent);
    max-width: 1350px;
    height: 100%;
    min-width: 0;
    position: relative;
}

.fotobox-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    transform: rotate(3deg);
    filter: grayscale() contrast(110%);
}

.faq-hero-container .textbox {
    padding-inline: var(--space-s);
    width: 80%;
    grid-column: 2/3;
    grid-row: 2/3;
}

.faq-hero .btn-wrap {
    flex-direction: row;
}

/* FAQ Liste */

.faq-list-container {
    padding-inline: var(--space-s);
}

.faq-item {
    border-bottom: 2px solid var(---black);
}

.faq-item:first-child {
    border-top: 2px solid var(---black);
}

.faq-item details summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-s);
    transition: var(--transition);
}


.faq-item details summary::-webkit-details-marker {
    display: none;
}

.faq-item details summary::marker {
    content: "";
}

.faq-item details summary:hover,
.faq-item details summary:focus-visible {
    background-color: var(---black);
}

.faq-item details summary:hover .faq-index,
.faq-item details summary:focus-visible .faq-index,
.faq-item details summary:hover h3,
.faq-item details summary:focus-visible h3 {
    color: var(---white);
}

.faq-item details summary:hover .faq-marker,
.faq-item details summary:focus-visible .faq-marker {
    background-color: var(---accent);
    color: var(---black);
}

.faq-item details[open] summary {
    background-color: var(---black);
}

.faq-item details[open] summary .faq-index,
.faq-item details[open] summary h3 {
    color: var(---white);
}

.faq-index {
    font-family: var(--font-details);
    /* Register 3 (Maschine): 16px/400, versal, schwarz — kein Nachbrand mehr,
       Schwarz auf der Textur liegt bei 6,52:1 im schlechtesten Fall. */
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: var(--track-label);
    color: var(---black);
}

.faq-item h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    transition: var(--transition);
}

.faq-marker {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    background-color: var(---accent);
    color: var(---black);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1;
    transition: var(--transition);
}

.faq-item details[open] .faq-marker {
    background-color: var(---accent);
    color: var(---black);
    transform: rotate(90deg);
}

.faq-answer {
    padding-block: var(--space-s) var(--space-m);
    padding-inline: calc(3ch + var(--space-s) + var(--space-s));
}

.faq-answer p {
    max-width: 66ch;
}

@media (prefers-reduced-motion: no-preference) {
    .faq-item details[open] summary + .faq-answer {
        animation: faq-answer-in 0.25s ease;
    }
}

@keyframes faq-answer-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------- FULL STORY PAGE ------------- */
.fullstory-hero {
    padding: 0;
    min-height: 100vh;
    height: 100%;
}

.fullstory-hero-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr max-content;
    gap: var(--space-xl);
}


.fullstory-hero-img {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    height: 50vh;
    display: block;
    object-fit: cover;
    filter: grayscale();
}

.fullstory-hero-text {
    /* margin-top: var(--header-h); */
    grid-column: 1/2;
    grid-row: 1/2;
    align-self: center;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-s);
    color: var(---white);
}

.fullstory-hero-text h2 {
    font-size: var(--text-4xl);
}

.fullstory-hero-subline {
    font-family: var(--font-details);
    font-size: var(--text-m);
    line-height: 0.8;
    display: inline-block;
    padding: var(--space-xs) var(--space-xl);
    background-color: var(---accent);
    color: var(---black);
    align-self: start;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: var(--card-shadow);
    
}


.thatsme {
    padding:var(--space-xl) var(--space-s);
    grid-column: 1/2;
    grid-row: 2/3;
    display: grid;
    grid-template-rows: 1fr max-content;
    gap: var(--space-xl);
}

.thatsme-imgbox {

    position: relative;
    background-color: #c8c8c8;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.thatsme-img {
    width: 100%;
    height: auto;
    display: block;
}

.thatsme-banner {
    position: absolute;
    top: 18%;
    left: -10%;
    width: 120%;
    text-align: center;
    background-color: var(---black);
    color: var(---accent);
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    /* Register 3 fest, 15px — war --text--xs (11,11px auf Desktop). */
    font-size: 0.9375rem;
    padding-block: var(--space-2xs);
    transform: rotate(-8deg);
    box-shadow: var(--card-shadow);
}


.thatsme-textbox p + p {
    margin-top: var(--space-s);
}

.tear-divider {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -1px;
    transform: scale(-1, -1);
}

/* Never change a running system */

.runningsystem {
    padding: 0;
    background-color: var(---black);
}

.runningsystem {
    padding: var(--space-xl) var(--space-s);
}


.runningsystem .textbox * {
    color: var(---white);
}

/* Ausnahme vom Stempel: Diese Section hat selbst schon einen schwarzen Grund
   (.runningsystem { background-color: var(---black) }). Die Stempel-Fläche wäre
   hier Schwarz auf Schwarz — unsichtbar, aber mit Padding: ein Klotz ohne Zweck.
   Die Farbe bleibt bewusst geerbt (weiß aus ".runningsystem .textbox *", 18,58:1);
   der Akzent trägt hier der 2px-Balken im ::before. */
.runningsystem .textbox .text-highlight {
    background: none;
    padding: 0;
    position: relative;
    font-size: var(--text-3xl);
    line-height: 0.9;
    font-family: var(--font-display);
    /* Bebas Neue liegt nur als Schnitt 400 vor (siehe fontface.css) — jedes
       andere font-weight synthetisiert Fake-Fett statt einen echten Schnitt
       zu laden. .text-highlight setzt sonst 800, das hier ist die Korrektur. */
    font-weight: 400;
    text-wrap: balance;
    margin-bottom: var(--space-xs);
    padding-left: var(--space-s);
    display: block;
}

.runningsystem .textbox .text-highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.03em;
    bottom: 0.08em;
    width: 2px;
    background-color: var(---accent);
}

/* Kerning zwischen Buchstabenpaaren aus, sonst ist die Summe der einzeln
   gemessenen Buchstabenbreiten schmaler/breiter als der ursprüngliche Text
   und der ganze Satz springt beim Aufbau der Glitch-Spans. */
[data-glitch-text] {
    font-kerning: none;
}

.glitch-word {
    display: inline-block;
    vertical-align: top;
}

.glitch-letter {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    overflow: hidden;
    transition: transform 120ms ease;
}

.glitch-letter.is-active {
    color: var(---black);
    background-color: var(---accent);
    text-shadow:
        -3px 0 0 #ff536b,
        3px 0 0 #3ffeff;
    transition: none;
}


.runningsystem-highlight {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-top: var(--space-m);
    text-wrap: balance;
}

.runningsystem .runningsystem-highlight span {
    color: var(---accent);
}

.runningsystem-grid {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.runningsystem-col {
    width: 100%;
    max-width: 60ch;
}

.runningsystem-col h3 {
    color: var(---white);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    text-decoration: underline 2px solid var(---accent);
    text-underline-offset: var(--space-xs);
}

.runningsystem-col p {
    color: var(---white);
}

.runningsystem .btn-wrap .minimal-btn {
    color: var(---white);
}

/* ------------- PORTFOLIO ARCHIVE PAGE ------------- */

.archive-hero-container {
    margin-top: var(--header-h);
    padding-inline: var(--space-s);
    display: grid;
    gap: var(--space-l);
}

.archive-hero h1 {
    font-size: var(--text-6xl);
    text-transform: uppercase;
}


.archive-hero-meta {
    margin-top: var(--space-s);
    opacity: 1;
}

/* Filter */

section.archive-filter {
    padding-block: 0;
}

.archive-filter-container {
    padding-inline: var(--space-s);
    display: grid;
    gap: var(--space-2xs);
}

.archive-filter-container::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    position: relative;
    flex: 0 0 auto;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--text-m);
    color: var(---black);
    background: transparent;
    border: 2px solid var(---black);
    padding: var(--space-2xs) var(--space-m);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.filter-btn::after {
    position: absolute;
    content: "";
    z-index: -1;
    inset: 0;
    width: 0%;
    background-color: var(---accent);
    transition: var(--transition);
}

.filter-btn:hover {
    color: var(---black);
    border: none;
}

.filter-btn:hover::after {
    width: 100%;
}

.filter-btn.is-active {
    background-color: var(---black);
    color: var(---accent);
    border-color: var(---black);
}

/* Archive list */

.archive-list-container {
    padding-inline: var(--space-s);
}

.archive-entry {
    border-top: 2px solid var(---black);
    padding-block: var(--space-l);
    display: grid;
    gap: var(--space-m);
}

.archive-list-container .archive-entry:last-child {
    border-bottom: 2px solid var(---black);
}

.archive-entry[hidden] {
    display: none;
}

.archive-entry-index {
    display: block;
    font-family: var(--font-details);
    font-weight: 400;
    font-size: var(--text-3xl);
    color: var(---black);
    letter-spacing: var(--track-label);
}

.archive-entry-media {
    position: relative;
    overflow: hidden;
}

.archive-placeholder-img {
    aspect-ratio: 4/3;
    display: grid;
    place-items: center;
    background-image: repeating-linear-gradient(45deg, var(---black), var(---black) 14px, var(---accent) 14px, var(---accent) 28px);
    transition: transform .4s ease;
}

.archive-entry.is-featured .archive-placeholder-img {
    aspect-ratio: 16/9;
}

.archive-entry:hover .archive-placeholder-img {
    transform: scale(1.03);
}

.archive-placeholder-img span {
    background-color: var(---white);
    color: var(---black);
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-size: var(--text--s);
    padding: var(--space-2xs) var(--space-s);
}

.archive-entry-tag {
    position: absolute;
    top: var(--space-s);
    left: var(--space-s);
    /* Kommt aus der Taxonomie, Länge nicht kontrollierbar — bricht um statt
       am overflow:hidden der .archive-entry-media abgeschnitten zu werden. */
    max-width: calc(100% - 2 * var(--space-s));
    background-color: var(---black);
    color: var(---accent);
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    /* Register 3 fest, 15px — war --text--xs (11,11px auf Desktop). */
    font-size: 0.9375rem;
    padding: var(--space-3xs) var(--space-s);
    transform: rotate(-3deg);
    box-shadow: var(--card-shadow);
    white-space: normal;
    overflow-wrap: break-word;
}

.archive-entry-body h3 {
    font-size: var(--text-3xl);
    text-transform: uppercase;
}

.archive-entry-meta {
    font-family: var(--font-details);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-size: var(--text--s);
    opacity: 1;
    margin-top: var(--space-3xs);
    margin-bottom: var(--space-s);
}

.archive-entry-body > p:not(.archive-entry-meta) {
    max-width: 60ch;
    margin-bottom: var(--space-s);
}

/* ------------- RAW OUTPUT BLOG ------------- */

.board {
    padding-top: 0;
}

.archive-filter-container  {
    margin-block: var(--space-xl);
}

.board-grid {
    padding-inline: var(--space-s);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl) var(--space-xl);
}

.board-note {
    max-width: 700px;
    width: 100%;
    position: relative;
    background-color: var(---white);
    padding: var(--space-m) var(--space-m) var(--space-l);
    box-shadow: var(--card-shadow);
    justify-self: center;
}

.board-note:nth-child(4n+1) { transform: rotate(-0.6deg); }
.board-note:nth-child(4n+2) { transform: rotate(0.5deg); }
.board-note:nth-child(4n+3) { transform: rotate(-0.3deg); }
.board-note:nth-child(4n+4) { transform: rotate(0.7deg); }

.board-note-tag {
    display: inline-block;
    background-color: var(---black);
    color: var(---accent);
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    /* Register 3 fest, 15px — war --text--xs (11,11px auf Desktop). */
    font-size: 0.9375rem;
    letter-spacing: var(--track-label);
    padding: var(--space-3xs) var(--space-xs);
    transform: rotate(-2deg);
    margin-bottom: var(--space-s);
    white-space: nowrap;
}

.board-note h3 {
    font-size: var(--text-2xl);
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: var(--space-2xs);
    text-wrap: balance;
}

.board-note-tag + h3 {
    margin-top: 0;
}

/* Verlinkter Titel (Kategorie-Archiv): Browser-Default wäre blau/unterstrichen,
   der Rest der Karte übernimmt bereits Farbe/Typo — Unterstrich nur als
   Nicht-Farb-Hinweis bei Hover/Fokus (WCAG 1.4.1). */
.board-note h3 a {
    color: inherit;
    text-decoration: none;
}

.board-note h3 a:hover,
.board-note h3 a:focus-visible {
    text-decoration: underline;
}

.board-note > p {
    margin-bottom: var(--space-s);
}

/* Tape sitzt zentriert exakt auf der Kartenecke (Bezugspunkt ist die Ecke
    selbst, nicht die Bildgröße) und wird von dort aus gedreht. Bewusst nur
    auf einzelnen Karten, nicht auf allen, sonst wirkt das Brett überladen. */
.board-note img.tape {
    position: absolute;
    z-index: 1;
    width: 76px;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.tape-lg {
    width: 130px;
}

.tape-corner-tl {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) rotate(-42deg);
}

.tape-corner-tr {
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%) rotate(42deg);
}

.tape-corner-bl {
    top: 100%;
    left: 0;
    transform: translate(-50%, -50%) rotate(42deg);
}

/* ------------- RAW OUTPUT BLOG (Einzelner Beitrag) ------------- */

.post-hero-container {
    margin-top: var(--header-h);
    padding-inline: var(--space-s);
}

.post-back {
    display: inline-block;
    margin-bottom: var(--space-m);
    color: var(---black);
    text-decoration: none;
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text--s);
    letter-spacing: var(--track-label);
    transition: var(--transition);
}

.post-back:hover {
    text-decoration: underline 2px;
    text-underline-offset: 4px;
}

.post-hero h1 {
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: var(--space-m);
}

.post-meta {
    margin-top: var(--space-s);
    color: var(---black);
}
/* „Live ansehen"-Button im Post-Hero: natürliche Breite statt Vollbreite (btn-wrap ist column/stretch) */
.post-hero-cta {
    align-items: flex-start;
}

.post-body {
    padding-inline: var(--space-s);
}

.post-content h2 {
    margin-bottom: var(--space-s);
    text-transform: uppercase;
}

.post-content p {
    margin-bottom: var(--space-m);
    max-width: 66ch;
}

.post-content p.special-text {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-block: var(--space-2xl);
}

.post-more {
    padding-inline: var(--space-s);
}

.post-more .section-subline {
    margin-bottom: var(--space-l);
}

.post-more-grid {
    padding-inline: 0;
}

/* ------------- PORTFOLIO CASE STUDY (Mini-Doku) ------------- */

section.case-endproduct {
    padding-inline: var(--space-s);
    padding-block: 0;
}

.case-endproduct-img {
    display: block;
    width: 100%;
    height: auto;             /* volle Höhe, natürliches Seitenverhältnis, kein Anschnitt (Zari, 16.09.2026) */
    filter: contrast(108%);   /* keine Graustufe: Cases zeigen Farbe (Zari, 28.07.2026) */
    box-shadow: var(--card-shadow);
}

.case-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    margin-bottom: var(--space-xl);
}

.case-intro-col h2 {
    margin-bottom: var(--space-s);
    text-transform: uppercase;
}

/* Auftrag & Mini-Doku kommen aus dem WYSIWYG-Feld: Absätze UND Listen
   brauchen denselben Rhythmus, sonst kleben sie aneinander. */
.case-intro-col p,
.case-intro-col ul {
    max-width: 60ch;
    margin-bottom: var(--space-s);
}

.case-intro-col ul {
    padding-left: 1.25em;   /* Aufzählungspunkte in die Textspalte holen */
}

.case-intro-col li {
    line-height: 1.6;
    margin-bottom: var(--space-2xs);
}

.case-intro-col li::marker {
    color: var(---accent);
}

.case-intro-col > :last-child {
    margin-bottom: 0;
}

.case-study-body .special-text {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-s);
    padding-inline: var(--space-l);
}

.case-gallery {
    padding-inline: var(--space-s);
    padding-block: 0;
}

.case-gallery-grid {
    margin-top: var(--space-l);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.case-shot {
    margin: 0;
}

.case-shot-frame {
    position: relative;
}

.case-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;   /* einheitliche Kachelhöhe im Raster */
    object-fit: contain;  /* ganzes Bild zeigen, nichts anschneiden — auch Print-Formate (Zari, 16.09.2026) */
    background: var(---white);   /* weißes Passepartout hinter Print-Medien */
    filter: contrast(108%);   /* keine Graustufe: Cases zeigen Farbe (Zari, 28.07.2026) */
    box-shadow: var(--card-shadow);
    position: relative;
    z-index: 1;
}

.case-shot figcaption {
    margin-top: var(--space-2xs);
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text--s);
    letter-spacing: var(--track-label);
    color: var(---black);
}

/* Doku-Bild als Link zur Großansicht. Die Lupe steht immer da — auf Touch
   gibt es kein Hover, das Klickbare muss man also ohne Zeiger erkennen. */
.case-shot-link {
    display: block;
    cursor: zoom-in;
}

.case-shot-lupe {
    position: absolute;
    right: var(--space-2xs);
    bottom: var(--space-2xs);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(---black);
    color: var(---white);
    border: 2px solid var(---white);
}

/* Hover/Fokus nie nur Farbe: die Lupe wächst und kippt auf Pink mit schwarzer Kante. */
.case-shot-link:hover .case-shot-lupe,
.case-shot-link:focus-visible .case-shot-lupe {
    background-color: var(---accent);
    color: var(---black);
    border-color: var(---black);
    transform: scale(1.15);
}

/* LIGHTBOX */

.lightbox {
    --focus-ring-traeger: var(---white);
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: none;
    padding: var(--space-s);
    background-color: var(---black);
    color: var(---white);
}

.lightbox::backdrop {
    background: transparent;
}

html:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox-inner {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--space-s);
}

.lightbox-figur {
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--space-2xs);
    align-items: center;
    justify-items: center;
}

.lightbox-bild {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
}

.lightbox-caption {
    font-family: var(--font-details);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text--s);
    letter-spacing: var(--track-label);
    text-align: center;
}

.lightbox-steuerung {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-m);
}

.lightbox-zaehler {
    font-family: var(--font-details);
    letter-spacing: var(--track-label);
    min-width: 4ch;
    text-align: center;
}

.lightbox-knopf {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--text-l);
    background-color: var(---white);
    color: var(---black);
    border: 2px solid var(---white);
    cursor: pointer;
}

/* Hover: Form UND Farbe — der Knopf wird zum Rahmen. */
.lightbox-knopf:hover {
    background-color: var(---black);
    color: var(---white);
}

.lightbox-schliessen {
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
}

@media (prefers-reduced-motion: no-preference) {
    .case-shot-lupe {
        transition: transform var(--transition), background-color var(--transition);
    }

    .lightbox[open] {
        animation: lightbox-in 0.2s ease;
    }
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* CTA */

.archive-cta {
    background-color: var(---black);
}

.archive-cta-container {
    padding-inline: var(--space-s);
    display: grid;
    gap: var(--space-l);
    justify-items: start;
}

.archive-cta-container p.archive-cta-stamp {
    background-color: var(---accent);
    color: var(---black);
    font-family: var(--font-details);
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--text-l);
    padding: var(--space-2xs) var(--space-m);
    transform: rotate(-3deg);
    box-shadow: var(--card-shadow);
}

.archive-cta-container h2,
.archive-cta-container p {
    color: var(---white);
    text-wrap: balance;
}

.archive-cta .btn-wrap {
    width: 100%;
}

.archive-cta .btn-secondary {
    background-color: var(---white);
    color: var(---black);
    --btn-glitch-bg: var(---white);
}

.archive-cta .btn-secondary.btn-glitch.is-active {
    background-color: transparent;
}












@media (min-width: 900px) {
    
/* HEADER */
    section {
        padding-block: var(--space-3xl);
    }

    .section-subline {
        font-size: var(--text-m);
    }

    header {
        height: var(--header-h);
    }

    .burger,
    .nav-panel,
    .backdrop{
        display:none;
    }

    /* Bewegungs-Schalter: ab hier wieder als Tab am Rand. */
    .motion-toggle {
        display: block;
    }

    @media (prefers-reduced-motion: reduce) {
        .motion-toggle {
            display: none;
        }
    }

    /* Der Tab (2,75rem) liegt fixiert am rechten Rand. Container halten
       beidseitig Abstand, damit kein Inhalt darunter läuft — symmetrisch,
       damit die Mitte bleibt; Hintergründe laufen weiter randlos. */
    .container {
        max-width: min(1350px, calc(100% - 2 * var(--tab-freiraum)));
    }

    .siteheader-container nav {
        display: flex;
    }
    .siteheader-container ul {
        display: flex;
        gap: var(--space-s);
    }
    .siteheader-container li {
        list-style: none;
    }
    .desktop-nav a {
        position: relative;
        z-index: 1;
        padding-inline: var(--space-xs);
    }
    .desktop-nav a::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(---accent);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .3s ease;
        z-index: -1;
    }
    .desktop-nav a:hover::after,
    .desktop-nav a.active::after,
    .desktop-nav .current-menu-item > a:not([href*="#"])::after {
        transform: scaleY(1);
    }
    .desktop-nav a:hover,
    .desktop-nav a.active,
    .desktop-nav .current-menu-item > a:not([href*="#"]) {
        color: var(---black);
    }

    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .sitefooter ul {
        flex-direction: row;
        gap: var(--space-m);
    }

    /* Hero */

    .hero-container {
        grid-template-rows: 2fr 2fr 3fr;
        /* Seitenspalten nie schmaler als der Tab-Freiraum: der Hero liegt
           nicht in einem .container und lief sonst unter den Bewegungs-Tab. */
        grid-template-columns: minmax(var(--tab-freiraum), 1fr) minmax(0, 1350px) minmax(var(--tab-freiraum), 1fr);
    }

    .hero-bg-img {
        grid-row: 1/3;
    }

    .hero-content-img1 {
        margin-top: var(--space-xl);
        width: 20vw;
        grid-row: 1/2;
        align-self: center;
    }

    .hero-content-img2-wrap {
        margin-top: var(--space-xl);
        grid-row: 2/4;
        width: 20vw;
        overflow: hidden;
        display: inline-block;
        background-color: var(---black);
    }

    .hero-content-img2 {
        filter: brightness(120%) grayscale(100%) contrast(2);
    }

    .hero-textbox {
        grid-row: 3/4;
        max-width: min(60vw, calc(100% - 40vw - 2 * var(--space-s)));
    }

    .btn-wrap {
        flex-direction: row;
    }

    /* About */

    .about .textbox {
    max-width: 30vw;
    width: 100%;
    }

    /* Project overview */

    .project-overview-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto auto;
        padding-inline: var(--space-s);
    }

    .project-slider-viewport {
        grid-column: 1 / 5;
        grid-row: 1;
    }

    .project-overview-headline {
        grid-column: 4/6;
        grid-row: 1;
        justify-self: flex-end;
        align-self: flex-start;
        text-align: left;
        padding: var(--space-s);
        z-index: 1;
        margin-block: var(--space-3xl);
        /* border: 2px solid blue; */
        background-color: var(---white);
    }
    .archive-link {
    padding-block: 0;
}

.project-current-link {
    grid-column: 1/5;
    font-size: var(--text-xl);

}

/* Service */

.service-card-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Deco */

.deco-container {
    padding: 0;
    grid-template-columns: 1fr 1fr 1fr;
}

.deco-img {
    grid-column: 2/4;
    aspect-ratio: 16/9;
}

.special-textbox {
    grid-column: 1/3;
    gap: var(--space-xl);
}

.deco .special-text:nth-child(1) {
    transform: rotate(4.16deg);
}
.deco .special-text:nth-child(2) {
    transform: rotate(2.3deg);
}
.deco .special-text:nth-child(3) {
    transform: rotate(-3.36deg);
}

.deco .special-text {
    font-size: var(--space-m);
}
/* Blog */
.blog-post-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Contact */

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    /* ------- FAQ Page ------- */

    /* hero */

.faq-hero-container {
    grid-template-rows: 1fr;
    /* wie beim Start-Hero: Seitenspalten halten den Bewegungs-Tab frei */
    grid-template-columns: minmax(var(--tab-freiraum), 1fr) minmax(0, 1350px) minmax(var(--tab-freiraum), 1fr);
}
.fotobox-img-bg {
    max-width: 40vw;
    aspect-ratio: 16/9;
}

.fotobox-img {
    top: 24px;
    left: 16px;
    transform: rotate(0.8deg);
}

.faq-hero-container .textbox {
    padding-inline: var(--space-s);
    padding-left: var(--space-2xl);
    width: 50ch;
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: flex-end;
    align-self: flex-end;
}

    /* ------- Full Story Page ------- */

.fullstory-hero-text h1 {
    font-size: var(--text-7xl);
}

.fullstory-hero-subline {
    font-size: var(--text-xl);
}

.thatsme {
    padding-block: var(--space-2xl);
    grid-template-rows: 1fr;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-xl);
}

.thatsme-imgbox {
    position: relative;
    grid-column: 1/2;
    grid-row: 1/2;
    height: 100%;
    aspect-ratio: 4 / 5;
}

.thatsme-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thatsme-textbox {
    grid-column: 2/3;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: auto;
    height: 100%;
}

.thatsme-textbox p + p {
    margin-top: var(--space-l);
}

.thatsme-banner {
    font-size: var(--text-l);
}

.runningsystem-grid {
    margin-block: var(--space-3xl);
    grid-template-columns: repeat(3, 1fr);
}
.runningsystem .textbox {
    max-width: 100%;
}

.runningsystem-body {
    max-width: 60ch;
}

.runningsystem .textbox .text-highlight {
    font-size: var(--text-7xl);
}

    /* ------- Portfolio Archive Page ------- */

.archive-filter-container {
    grid-template-columns: repeat(4, 1fr);
}

.archive-entry {
    grid-template-columns: 90px 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
}

.archive-entry-index {
    font-size: var(--text-4xl);
}

.archive-entry:nth-child(odd) .archive-entry-media {
    order: 2;
}

.archive-entry:nth-child(odd) .archive-entry-body {
    order: 3;
}

.archive-entry:nth-child(even) .archive-entry-media {
    order: 3;
}

.archive-entry:nth-child(even) .archive-entry-body {
    order: 2;
}

    /* ------- Raw Output Blog Archive ------- */

.board-filter-container {
    grid-template-columns: none;
    display: flex;
    flex-wrap: wrap;
}

.board-grid {
    /* Zwei Spalten bis 1100px: mit dem Tab-Freiraum passen drei Zettel
       (Mindestbreite ~245px) bei 900px nicht mehr nebeneinander. */
    grid-template-columns: repeat(2, 1fr);
}

    /* ------- Raw Output Blog Post (Einzelner Beitrag) ------- */


.post-hero-container .textbox {
    margin-inline: auto;
}

.post-hero-container .textbox.rechtstext {
    margin-inline: 0;
}

.post-content {
    margin-inline: auto;
}


.case-study-hero .textbox,
.case-study-body .post-content {
    margin-inline: 0;
}

.case-intro-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.post-more-inner {
    max-width: 900px;
    margin-inline: auto;
}

.post-more-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
}

    /* ------- Portfolio Case Study (Mini-Doku) ------- */

.case-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
}

.case-shot.is-featured figcaption {
    display: inline-block;
    background-color: var(---accent);
    color: var(---black);
    padding: var(--space-3xs) var(--space-2xs);
    transform: rotate(-3deg);
    box-shadow: var(--card-shadow);
    opacity: 1;
}








}

@media (min-width:1100px) {

    /* Raw Output Blog Archive */

    .board-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}