/*
 * Schrift: Punktype von junkohanhero, lokal abgelegt unter
 * assets/fonts/. Frei für private Nutzung; für kommerzielle Nutzung
 * verlangt der Autor 15 Euro - Einzelheiten in assets/fonts/LIESMICH.txt.
 *
 * Nur für Überschriften, Wortmarke und Kacheltitel. Fließtext bleibt in
 * einer Brotschrift: Punktype ist gerissen und gesprüht, in Fließtext
 * ermüdet das nach zwei Sätzen.
 *
 * Vorsicht mit ß - das bringt die Schrift nicht mit und fällt auf die
 * nächste Schrift der Liste zurück.
 */
@font-face {
    font-family: "Punktype";
    src: url("../../fonts/punktype.regular.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tox";
    src: url("../../fonts/tox-typewriter.regular.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/*
 * Anarchie – Plakatoptik nach dem Motiv der Bundesagentur für Anarchie:
 * vergilbtes Papier mit Grain, schwarze Blockschrift, Rot als einziger
 * Akzent. Die Kopfzeile ist das helle Plakat mit großem Kreis-A im
 * Hintergrund, die Fußzeile der schwarze Balken mit den Leitmotiven.
 *
 * --accent bleibt Schwarz (Buttons, Fortschritt, Ergebnisrahmen kommen
 * aus frontend.css); --accent-alt ist das Warnrot.
 */
body.theme-anarchie {
    --page-bg: #999;
    --surface: #f7f4ea;
    --text: #1a1714;
    --muted: #6d6656;
    --accent: #1a1714;
    --accent-text: #f7f2e4;
    --border: #1a1714;
    --success: #dfe3c9;
    --danger: #f1d6d2;
    --radius: 2px;
    --font: Arial, Helvetica, sans-serif;
    --accent-alt: #b91f27;
    /* Schriftliste für alles Plakative */
    --font-punk: "Punktype", 'Arial Black', Arial, sans-serif;
    --font-punk2: "Tox", 'Arial Black', Arial, sans-serif;
    --header-bg: #f2eee1;
    --header-text: #1a1714;
    --footer-bg: #161311;
}

/*
 * Die Wand.
 *
 * Das Motiv ist hochskaliert und nachgeschärft in drei Teilen abgelegt:
 * wand/kopf.jpg für die Kopfzeile, wand/fuss.jpg für die Fußzeile und
 * wand/flaeche.jpg für alles dazwischen.
 *
 * Über der Fläche liegt ein heller Schleier in der Papierfarbe des Skins.
 * Ohne ihn kämpfen die Karten gegen eine vollflächige Sprühwand, und der
 * Text darin wird zur Zumutung. Darüber noch das feine Rauschen als
 * Putzstruktur.
 */
body.theme-anarchie {
    font-family: var(--font-punk2);
    background-color: var(--page-bg);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(rgba(233, 228, 214, .74), rgba(233, 228, 214, .8)),
        url("../../img/wand/flaeche.jpg");
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 240px 240px, cover, cover;
    background-position: 0 0, center, center top;
    background-attachment: scroll, fixed, fixed;
}

/*
 * Auf schmalen Geräten kostet ein festgestellter Hintergrund spürbar
 * Leistung, und von der Wand wäre ohnehin nur ein Ausschnitt zu sehen.
 */
@media (max-width: 720px) {
    body.theme-anarchie {
        background-attachment: scroll, scroll, scroll;
        background-size: 240px 240px, cover, 900px auto;
    }
}

body.theme-anarchie ::selection {
    background: var(--accent-alt);
    color: var(--accent-text);
}

/* ------------------------------------------------------------------
   Kopfzeile: helles Plakat, roter Abschlussstrich, großes Kreis-A als
   Wasserzeichen rechts – wie im Banner der Vorlage.
   ------------------------------------------------------------------ */
body.theme-anarchie {
    /* Kopf- und Fußzeile tragen jetzt Fotos - die Schrift darauf muss hell sein. */
    --header-text: #f6f1e6;
}

body.theme-anarchie .site-header {
    position: relative;
    /* Kein overflow:hidden mehr - das schnitt die aufklappenden Menüs
       unter der Kopfzeile ab. Das Wasserzeichen sitzt dafür jetzt ganz
       innerhalb der Kopfzeile statt über den Rand hinaus. */
    border-bottom: 6px solid var(--accent-alt);
    color: var(--header-text);
    background-color: #2a2622;
    background-image:
        linear-gradient(rgba(20, 17, 14, .58), rgba(20, 17, 14, .58)),
        url("../../img/wand/kopf.jpg");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center bottom;
}
body.theme-anarchie .site-header a { color: var(--header-text); }
body.theme-anarchie .brand-lines { border-left-color: rgba(246, 241, 230, .5); }
/* Das Dunkelrot der Wortmarke verschwindet auf dem dunklen Foto -
   im Kopf deshalb ein helleres Rot. */
body.theme-anarchie .site-header .brand-accent { color: #f4553f; }

/* Grosses Kreis-A als blasses Wasserzeichen rechts im Kopfbereich */
body.theme-anarchie .site-header::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 150px;
    height: 150px;
    transform: translateY(-50%) rotate(-6deg);
    background: url("../../img/logo-light.svg") no-repeat center / contain;
    opacity: .22;
    pointer-events: none;
}
body.theme-anarchie .site-header-inner { position: relative; padding-block: 20px; }
body.theme-anarchie .brand-name,
body.theme-anarchie .brand-accent {
    font-family: var(--font-punk);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .015em;
    font-size: 1.9rem;
}
body.theme-anarchie .brand-claim { font-weight: 700; opacity: .92; color: var(--header-text); }
body.theme-anarchie .brand-claim::after { content: ""; }
body.theme-anarchie .site-session a { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
body.theme-anarchie .site-session a:hover { color: var(--accent-alt); }

/* Überschriften mit rotem Pinselstrich */
body.theme-anarchie h1 {
    font-family: var(--font-punk);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
    position: relative;
    padding-bottom: 16px;
}
body.theme-anarchie h1::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 2px;
    width: 68px;
    height: 10px;
    background: var(--accent-alt);
    border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
    transform: rotate(-2deg);
}

/*
 * Fließtext auf der Wand: Grau auf Sprühfarbe ist nicht zu lesen.
 * Die Einleitung bekommt deshalb einen Papierstreifen untergelegt -
 * passt zum Plakatcharakter und macht den Satz eindeutig lesbar.
 */
body.theme-anarchie .portal-intro .lead,
body.theme-anarchie .section-lead {
    display: inline-block;
    color: var(--text);
    background: rgba(247, 244, 234, .88);
    padding: 9px 14px;
    box-shadow: 3px 3px 0 rgba(26, 23, 20, .18);
}

/* Kurze Hinweistexte wie Plakat-Unterzeilen */
body.theme-anarchie .muted,
body.theme-anarchie .hint {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: .82rem;
}

/* Karten: dicker Rahmen, harter Versatzschatten, Kreis-A-Wasserzeichen */
body.theme-anarchie .card {
    border: 3px solid var(--text);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--text);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg opacity='0.05' fill='none' stroke='%231a1714' stroke-width='6' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='42'/%3E%3Cpath d='M50 20 L26 78 M50 20 L74 78 M34 60 L66 60'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right -24px bottom -24px;
    background-size: 200px;
}
body.theme-anarchie .test-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--accent-alt);
}

/* Buttons: eckig, Blockschrift, Hover in Warnrot */
body.theme-anarchie .button,
body.theme-anarchie .link {
    font-family: var(--font-punk);
    font-weight: 900;
    font-size:16px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
body.theme-anarchie .button:hover,
body.theme-anarchie .link:hover { background: var(--accent-alt); }

/* Antwortoptionen: roter Streifen bei Auswahl/Hover */
body.theme-anarchie .option { border-width: 2px; }
body.theme-anarchie .option:hover,
body.theme-anarchie .option:has(input:checked) {
    background: var(--surface);
    border-color: var(--text);
    box-shadow: inset 6px 0 0 var(--accent-alt);
}

/* Fortschrittsbalken in Warnstreifen-Optik */
body.theme-anarchie .progress {
    height: 10px;
    border-radius: 2px;
    background: repeating-linear-gradient(45deg, var(--text) 0 10px, #2e2a25 10px 20px);
}
body.theme-anarchie .progress span { background: var(--accent-alt); }
body.theme-anarchie .progress-label { font-weight: 700; letter-spacing: .03em; }

/* Hinweis- und Fehlerboxen als gestempelte Notizen */
body.theme-anarchie .feedback { border-left: 6px solid var(--text); }
body.theme-anarchie .error { border-left: 6px solid var(--accent-alt); }

/* Formularlabels wie Plakat-Beschriftung */
body.theme-anarchie label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .85rem;
    font-weight: 900;
}

/* ------------------------------------------------------------------
   Fußzeile: schwarzer Balken mit Leitmotiven, wie die Leiste unten im
   Motiv – Icons in Rot, Trennstriche, roter Stempel rechts.
   ------------------------------------------------------------------ */
body.theme-anarchie .site-footer {
    margin-top: 56px;
    color: #efe9db;
    border-top: 6px solid var(--accent-alt);
    background-color: #161311;
    background-image:
        linear-gradient(rgba(14, 12, 10, .62), rgba(14, 12, 10, .62)),
        url("../../img/wand/fuss.jpg");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center top;
    font-size: 1.6rem;
}
body.theme-anarchie .motive { font-weight: 700; letter-spacing: .07em; background-color: rgba(0,0,0,.8);padding:5px;transform: rotate(8deg); }
body.theme-anarchie .motive strong { font-family: var(--font-punk); font-weight: 900; }
body.theme-anarchie .stamp {
    font-family: var(--font-punk);
    background: var(--accent-alt);
    transform: rotate(-4deg);
    box-shadow: 4px 4px 0 #000;
}
body.theme-anarchie .theme-choice {
    border-radius: 2px;
    border-width: 2px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .03em;
}
body.theme-anarchie .theme-choice.is-active,
body.theme-anarchie .theme-choice:hover {
    background: var(--accent-alt);
    border-color: var(--accent-alt);
    color: #fff;
}
body.theme-anarchie .site-footer-note { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }


/* ------------------------------------------------------------------
   Punkschrift für alles, was ruft
   ------------------------------------------------------------------ */

body.theme-anarchie h1,
body.theme-anarchie h2,
body.theme-anarchie h3,
body.theme-anarchie .brand-name,
body.theme-anarchie .brand-accent,
body.theme-anarchie .tile-title,
body.theme-anarchie .portal-intro h1,
body.theme-anarchie .stamp,
body.theme-anarchie .motive strong {
    font-family: var(--font-punk);
    font-weight: 400;
    letter-spacing: .02em;
    font-size:21px;
}

/* Die Schrift läuft eng und hoch - etwas mehr Zeilenluft bekommt ihr gut. */
body.theme-anarchie h1,
body.theme-anarchie .portal-intro h1 { line-height: 1.24;font-size:32px; }
body.theme-anarchie h2 { line-height: 1.3; }

/* ------------------------------------------------------------------
   Rostblech unter den Kästen

   assets/img/rost/rost.png ist selbst gerechnet und nahtlos kachelbar.
   Darüber liegt ein heller Schleier, sonst ist dunkler Text auf Rost
   nicht zu lesen; die Kachel bleibt trotzdem sichtbar. Dazu vier
   Nietenköpfe in den Ecken und ein harter Schatten - das Ganze soll wie
   eine angeschraubte Blechtafel wirken, nicht wie eine Karte.
   ------------------------------------------------------------------ */

body.theme-anarchie .card,
body.theme-anarchie .tile,
body.theme-anarchie .hero-box,
body.theme-anarchie .notice,
body.theme-anarchie .side-teaser,
body.theme-anarchie .teaser {
    background-color: #cfc6b4;
    background-image:
        radial-gradient(circle at 11px 11px, rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 11px) 11px, rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        radial-gradient(circle at 11px calc(100% - 11px), rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        linear-gradient(rgba(244, 239, 226, .78), rgba(244, 239, 226, .78)),
        url("../../img/rost/rost.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: auto, auto, auto, auto, auto, 300px 300px;
    border: 2px solid #2a231d;
    border-radius: 3px;
    box-shadow: 5px 5px 0 rgba(26, 23, 20, .35);
    margin-bottom:1px;
}

/* Beim Überfahren blitzt mehr Rost durch. */
body.theme-anarchie .tile:hover,
body.theme-anarchie .tile:focus-visible {
    background-image:
        radial-gradient(circle at 11px 11px, rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 11px) 11px, rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        radial-gradient(circle at 11px calc(100% - 11px), rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), rgba(30,26,22,.55) 0 2px, rgba(255,255,255,.35) 2px 3.4px, transparent 3.6px),
        linear-gradient(rgba(244, 239, 226, .64), rgba(244, 239, 226, .64)),
        url("../../img/rost/rost.png");
    box-shadow: 7px 7px 0 var(--accent-alt);
}

/* Das Kreis-A-Wasserzeichen der Karten würde sich mit dem Blech beißen. */
body.theme-anarchie .card { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
.hero-boxes {transform: rotate(1deg);}
.hero-box {transform: rotate(-2deg);}
.side-teaser{transform: rotate(4deg);}
.teaser {transform: rotate(-1deg);}