/* schraubklar.de, die Comic-Werkstatt: Grundlagen
 *
 * Risodruck-Stil wie tino-werner.de: Papier mit Rasterpunkten, dicke
 * Konturen, harte Schatten, leicht schiefe Panels. Eine Schrift (Archivo),
 * gesteuert ueber Staerke und Breite. Keine Inline-Styles: die CSP erlaubt
 * nur style-src 'self', jede Variante ist deshalb eine Klasse.
 *
 * Das CSS ist nach Bauteilen auf sechs Dateien verteilt. head.php bindet sie
 * in dieser Reihenfolge ein (OR_CSS_DATEIEN in includes/config.php), die
 * Reihenfolge ist Teil der Kaskade:
 *   basis, kopf-fuss, szene, abschnitte, spielereien, anpassung.
 * Medienabfragen und weniger Bewegung stehen gesammelt in anpassung.css.
 */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url('/fonts/archivo-latin-v2.woff2') format('woff2');
}

/* Ersatzschrift, bis Archivo geladen ist. Archivo ist bei 900 rund 15 % breiter
   als Arial, bei 400 etwas schmaler; ein einziges size-adjust trifft beides
   nicht, und die grosse Ueberschrift springt beim Nachladen um eine Zeile. */
@font-face {
    font-family: 'Archivo Fallback';
    src: local('Arial');
    font-weight: 100 599;
    size-adjust: 98%;
}
@font-face {
    font-family: 'Archivo Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 600 900;
    size-adjust: 109%;
}

/* ---------------------------------------------------------------
   Farben. Flammrot traegt immer Tinte, nie Weiss (3,3:1).
   Saeuregelb ist nur Flaeche, nie Schrift.
   --------------------------------------------------------------- */
:root {
    --papier:  #F4F1E8;
    --weiss:   #FFFDF8;
    --tinte:   #111010;
    --flamme:  #FF4D18;
    --rost:    #B23409;
    --saeure:  #D9F24B;
    --jeans:   #8DAFD3;
    --blei:    #5E584F;
    --ton-flamme: #FFDCCF;
    --ton-saeure: #EEF6C4;
    --ton-blau:   #DCE8F5;
    --reinweiss:  #FFFFFF;   /* Sprechblasen, Toast */
    --rost-dunkel: #7A2205;  /* Links beim Drueberfahren */
    --nebel:      #C9C4BA;   /* Nebentext auf Tinte */

    --schrift: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
    --kontur: 3px solid var(--tinte);
    --schatten: 6px 6px 0 var(--tinte);
    --rand: 40px;
    --luft: clamp(72px, 10vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden gilt immer, auch wenn ein Bauteil display setzt (z. B. Selbsttest-Ergebnis vor dem Skript) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
    margin: 0;
    background-color: var(--papier);
    background-image: radial-gradient(rgba(17, 16, 16, 0.08) 1px, transparent 1.4px);
    background-size: 7px 7px;
    color: var(--tinte);
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }

a { color: var(--rost); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rost-dunkel); }

:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }

.or-vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.or-skip {
    position: absolute; left: 16px; top: -4rem; z-index: 50;   /* ueber Kopf (30) und Hoch-Knopf (40) */
    padding: 0.5rem 0.75rem; background: var(--tinte); color: var(--papier); font-weight: 700;
}
.or-skip:focus { top: 16px; }

.or-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--rand); }
.or-leise { color: var(--blei); }

::selection { background: var(--flamme); color: var(--tinte); }

/* ---------------------------------------------------------------
   Knoepfe
   --------------------------------------------------------------- */
.or-btn {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
    border: 2.5px solid var(--tinte); background: var(--flamme); color: var(--tinte);
    font-family: var(--schrift); font-weight: 800; font-size: 17px; text-decoration: none;
    box-shadow: 4px 4px 0 var(--tinte); cursor: pointer;
    transition: translate .12s, box-shadow .12s;
}
.or-btn:hover { color: var(--tinte); translate: 2px 2px; box-shadow: 2px 2px 0 var(--tinte); }
.or-btn--hell { background: var(--weiss); }
.or-btn--klein { min-height: 44px; padding: 0 16px; font-size: 15px; }
.or-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Einleitung und Kleingedrucktes, auf Startseite und im Magazin */
.or-lead { font-size: 19px; line-height: 1.5; }
/* Dachzeile: sagt, worum es geht, bevor der Witz kommt (Startseite, Leistungsseiten, Check) */
.or-dachzeile {
    display: inline-block; margin-bottom: 18px; padding: 3px 12px; rotate: -1deg;
    background: var(--saeure); border: 2.5px solid var(--tinte); box-shadow: 3px 3px 0 var(--tinte);
    font-weight: 800; font-size: 16px;
}
/* Brotkrumen ueber der H1 (Magazin, Leistungsseiten, Check) */
.or-brotkrumen { font-size: 15px; margin-bottom: 18px; }
.or-brotkrumen span { color: var(--blei); margin-inline: 4px; }
.or-kleindruck { font-size: 15px; color: var(--blei); max-width: 46ch; }

/* ---------------------------------------------------------------
   Comic-Panel und seine Bauteile
   --------------------------------------------------------------- */
.or-panel { position: relative; border: var(--kontur); background: var(--weiss); box-shadow: var(--schatten); }

.or-kipp-l1 { transform: rotate(-0.4deg); }
.or-kipp-l2 { transform: rotate(-0.6deg); }
.or-kipp-l3 { transform: rotate(-0.8deg); }
.or-kipp-r1 { transform: rotate(0.4deg); }
.or-kipp-r2 { transform: rotate(0.6deg); }
.or-kipp-r3 { transform: rotate(0.8deg); }

.or-ton-papier { background: var(--weiss); }
.or-ton-flamme { background: var(--ton-flamme); }
.or-ton-saeure { background: var(--ton-saeure); }
.or-ton-blau   { background: var(--ton-blau); }
.or-ton-tinte  { background: var(--tinte); color: var(--papier); }
.or-ton-tinte a { color: var(--papier); }

.or-cap {
    position: absolute; top: -16px; left: 18px; z-index: 1;
    background: var(--saeure); color: var(--tinte); border: 2.5px solid var(--tinte);
    padding: 3px 10px; font-weight: 700; font-size: 14px; line-height: 1.3;
}

.or-sticker {
    position: absolute; top: -22px; right: -14px; z-index: 1;
    width: 78px; height: 78px; padding: 6px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--flamme); color: var(--tinte); border: 2.5px solid var(--tinte);
    font-weight: 800; font-size: 15px; line-height: 1.05; transform: rotate(12deg);
    cursor: pointer;
}
.or-sticker--lang { font-size: 13px; }
/* Preis-Aufkleber: wackelt, wenn man ueber die Karte faehrt, faellt beim Klick ab und klebt sich wieder an */
.or-werk:hover .or-sticker { animation: or-wackeln .5s ease-in-out; }
.or-sticker.ist-ab { animation: or-abfallen 2.2s cubic-bezier(.5, 0, .5, 1) forwards; }
@keyframes or-wackeln { 0%, 100% { rotate: 0deg; } 30% { rotate: -9deg; } 60% { rotate: 7deg; } }
@keyframes or-abfallen {
    0% { translate: 0 0; rotate: 0deg; }
    15% { translate: 6px 4px; rotate: 20deg; }
    55% { translate: 30px 260px; rotate: 210deg; opacity: 1; }
    56% { opacity: 0; }
    80% { translate: 0 0; rotate: 0deg; opacity: 0; scale: 1.6; }
    92% { opacity: 1; scale: .9; }
    100% { opacity: 1; scale: 1; }
}

.or-bubble {
    position: relative; background: var(--reinweiss); color: var(--tinte);
    border: 2.5px solid var(--tinte); border-radius: 18px; padding: 10px 14px;
    font-weight: 600; font-size: 15px; line-height: 1.35; box-shadow: 4px 4px 0 var(--tinte);
}
.or-bubble::after {
    content: ""; position: absolute; left: calc(50% - 10px); bottom: -13px; width: 20px; height: 20px;
    background: var(--reinweiss); border-right: 2.5px solid var(--tinte); border-bottom: 2.5px solid var(--tinte);
    transform: rotate(45deg) skew(8deg, 8deg);
}
.or-bubble--l::after { left: 24px; }
.or-bubble--r::after { left: auto; right: 28px; }

/* Panels ruecken sich gerade, wenn man drueberfaehrt */
.or-werk, .or-brief, .or-karte { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.or-werk:hover, .or-brief:hover, .or-karte:hover { transform: rotate(0deg); box-shadow: 9px 9px 0 var(--tinte); }

/* ---------------------------------------------------------------
   Figuren, Formen wie die Kletterfigur auf tino-werner.de
   --------------------------------------------------------------- */
.or-figur { display: block; overflow: visible; }
.f-shadow { fill: var(--tinte); opacity: .18; }
.f-shadow--stark { opacity: .25; }
.f-o { fill: none; stroke: var(--tinte); stroke-width: 12; stroke-linecap: round; }
.f-sleeve { fill: none; stroke: var(--flamme); stroke-width: 8; stroke-linecap: round; }
.f-leg { fill: none; stroke: #262A33; stroke-width: 8; stroke-linecap: round; }
.f-shoe { fill: var(--tinte); }
.f-hoodie { fill: var(--flamme); stroke: var(--tinte); stroke-width: 2.2; stroke-linejoin: round; }
.f-pocket { fill: none; stroke: var(--tinte); stroke-width: 1.4; stroke-linejoin: round; opacity: .6; }
.f-string { fill: none; stroke: var(--papier); stroke-width: 1.6; stroke-linecap: round; }
.f-skin { fill: #E9B48F; stroke: var(--tinte); stroke-width: 2.2; }
.f-beard { fill: var(--tinte); stroke: var(--tinte); stroke-width: 2.2; stroke-linejoin: round; }
.f-mouth { fill: none; stroke: var(--papier); stroke-width: 1.6; stroke-linecap: round; }
.f-smile { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linecap: round; }
.f-beanie { fill: var(--tinte); }
.f-rib { fill: none; stroke: var(--papier); stroke-opacity: .22; stroke-width: 1.1; }
.f-eye { fill: var(--papier); stroke: var(--tinte); stroke-width: 1.2; }
.f-pupil { fill: var(--tinte); }
.f-tool { fill: var(--saeure); stroke: var(--tinte); stroke-width: 1.4; stroke-linejoin: round; }
.f-line { fill: none; stroke: var(--tinte); stroke-width: 1.4; stroke-linecap: round; }
.f-faint { opacity: .5; }

.f-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: or-blinzeln 4.6s infinite; }
.f-body { transform-box: fill-box; transform-origin: 50% 100%; animation: or-wippen 2.8s ease-in-out infinite; }
.f-takt1 { animation-delay: -0.7s; }
.f-takt2 { animation-delay: -1.4s; }
.f-takt3 { animation-delay: -2.1s; }
.f-arm-wave { transform-box: fill-box; transform-origin: 15% 4%; animation: or-winken 1.4s ease-in-out infinite; }
@keyframes or-blinzeln { 0%, 93%, 100% { scale: 1 1; } 96% { scale: 1 .08; } }
@keyframes or-wippen { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes or-winken { 0%, 100% { rotate: -140deg; } 50% { rotate: -168deg; } }
/* Muetze: dreht beim Drueberfahren ueber das Logo und fliegt beim Easter Egg (kopf-fuss.css) */
.f-hat { transform-box: fill-box; transform-origin: 85% 100%; transition: rotate .25s cubic-bezier(.3, 1.8, .5, 1), translate .25s cubic-bezier(.3, 1.8, .5, 1); }
/* Augen folgen der Maus: script.js verschiebt .f-pupils und .lg-pupils */
.f-pupils, .lg-pupils { transition: translate .12s ease-out; }