/* =========================================================================
   Variante 08 "Pop-Art".
   Rot, Gelb, Blau, Pink in flachen Flaechen. Ben-Day-Punkte, schwarze
   Konturen, Sprechblasen, Comic-Headlines (Bangers) + Rubik.
   ========================================================================= */

@font-face { font-family: 'Bangers'; src: url('fonts/bangers-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/rubik-latin-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
    --rot: #FF2E63;
    --gelb: #FFE13B;
    --blau: #1E5BFF;
    --pink: #FF8FC7;
    --gruen: #22C55E;
    --schwarz: #111;
    --weiss: #fff;
    --comic: 'Bangers', 'Impact', sans-serif;
    --rand: clamp(1rem, 4vw, 3.5rem);
    --punkte: radial-gradient(circle, rgba(0, 0, 0, .22) 22%, transparent 24%);

    --fv-scrim: rgba(30, 91, 255, .8);
    --fv-bg: #fff;
    --fv-fg: #111;
    --fv-muted: #333;
    --fv-line: #111;
    --fv-accent: var(--rot);
    --fv-accent-fg: #fff;
    --fv-radius: 0;
    --fv-feld-radius: 0;
    --fv-rand: 5px;
    --fv-schatten: 10px 10px 0 #111;
    --fv-font: 'Rubik', sans-serif;
    --fv-font-titel: var(--comic);

    --gal-bg: var(--blau);
    --gal-fg: #fff;
    --gal-muted: rgba(255, 255, 255, .85);
    --gal-accent: var(--gelb);
    --gal-accent-fg: #111;
    --gal-font: 'Rubik', sans-serif;
    --gal-rand: 4px solid #111;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--gelb); color: var(--schwarz); font-family: 'Rubik', sans-serif; font-size: 1.1rem; line-height: 1.55; }
main { overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 4px solid var(--blau); outline-offset: 3px; }

.pa-titel { font-family: var(--comic); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1; letter-spacing: .02em; color: var(--gelb); -webkit-text-stroke: 2px #111; text-shadow: 5px 5px 0 #111; margin-bottom: 2.5rem; }
.pa-titel-weiss { color: #fff; }

.pa-knopf {
    display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.5rem; cursor: pointer; text-decoration: none;
    font-family: var(--comic); font-size: 1.6rem; letter-spacing: .04em; line-height: 1;
    background: var(--rot); color: #fff; border: 4px solid #111; box-shadow: 6px 6px 0 #111; transform: rotate(-1.5deg);
    transition: transform .12s ease, box-shadow .12s ease;
}
.pa-knopf:hover { transform: rotate(1deg) scale(1.04); }
.pa-knopf:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 #111; }
.pa-knopf-gelb { background: var(--gelb); color: #111; }
.pa-knopf-weiss { background: #fff; color: #111; }
.pa-knopf-klein { font-size: 1.15rem; padding: .4rem .8rem; border-width: 3px; box-shadow: 3px 3px 0 #111; }

/* --- Kopf -------------------------------------------------------------- */
.pa-kopf { display: flex; align-items: center; gap: 1rem; padding: .8rem var(--rand); background: #fff; border-bottom: 5px solid #111; }
.pa-logo { margin-right: auto; font-family: var(--comic); font-size: 2rem; letter-spacing: .03em; text-decoration: none; color: var(--rot); -webkit-text-stroke: 1px #111; }
.pa-logo span { color: var(--blau); }
.pa-variante { display: none; font-weight: 700; font-size: .9rem; }
.pa-variante a { color: var(--rot); }
@media (min-width: 760px) { .pa-variante { display: inline; } }
.pa-sprache { display: flex; gap: .35rem; }
.pa-sprache a { font-family: var(--comic); font-size: 1.3rem; text-decoration: none; padding: 0 .35rem; border: 3px solid transparent; }
.pa-sprache a.ist-aktiv { background: var(--gelb); border-color: #111; }

/* --- Hero -------------------------------------------------------------- */
.pa-hero { position: relative; display: grid; gap: 2rem; align-items: center; padding: 4rem var(--rand) 5rem; background-color: var(--gelb); background-image: var(--punkte); background-size: 14px 14px; border-bottom: 5px solid #111; }
@media (min-width: 960px) { .pa-hero { grid-template-columns: 1.5fr 1fr; padding: 5rem var(--rand) 6rem; } }
.pa-hero h1 { font-family: var(--comic); font-weight: 400; font-size: clamp(3.8rem, 11vw, 9.5rem); line-height: .9; letter-spacing: .015em; color: #fff; -webkit-text-stroke: 3px #111; text-shadow: 8px 8px 0 #111; }
.pa-hero h1 span { color: var(--rot); }
.pa-kasten { margin: 2rem 0; max-width: 34rem; background: #fff; border: 4px solid #111; padding: 1rem 1.25rem; box-shadow: 6px 6px 0 #111; font-weight: 500; }
.pa-boom { position: relative; justify-self: center; width: min(80vw, 26rem); aspect-ratio: 1; }
.pa-boom svg { width: 100%; height: 100%; overflow: visible; }
.pa-boom polygon { fill: var(--rot); stroke: #111; stroke-width: 4; stroke-linejoin: round; }
.pa-boom span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--comic); font-size: clamp(3.5rem, 9vw, 6.5rem); color: var(--gelb); -webkit-text-stroke: 3px #111; text-shadow: 5px 5px 0 #111; transform: rotate(-12deg); }
@media (prefers-reduced-motion: no-preference) {
    .pa-boom { animation: pa-wackel 2.4s ease-in-out infinite; }
    @keyframes pa-wackel { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(4deg) scale(1.05); } }
}

/* --- Comic-Strip ------------------------------------------------------- */
.pa-strip { padding: 5rem var(--rand); background: #fff; border-bottom: 5px solid #111; }
.pa-panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .pa-panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pa-panels { grid-template-columns: repeat(4, 1fr); } }
.pa-panel { position: relative; min-height: 20rem; border: 5px solid #111; padding: 0 1rem 1rem; display: flex; flex-direction: column; background-size: 12px 12px; background-image: var(--punkte); overflow: hidden; }
.pa-rot { background-color: var(--rot); }
.pa-gelb { background-color: var(--gelb); }
.pa-blau { background-color: var(--blau); }
.pa-pink { background-color: var(--pink); }
.pa-erzaehler { margin: 0 -1rem 1rem; background: var(--gelb); border-bottom: 4px solid #111; padding: .5rem 1rem; font-weight: 700; font-size: .95rem; text-transform: uppercase; }
.pa-gelb .pa-erzaehler { background: #fff; }
.pa-blase { position: relative; align-self: flex-start; max-width: 88%; background: #fff; border: 4px solid #111; border-radius: 50% / 40%; padding: 1.2rem 1.3rem; font-family: var(--comic); font-size: 1.55rem; line-height: 1.05; letter-spacing: .02em; text-align: center; }
.pa-blase::after { content: ''; position: absolute; left: 22%; bottom: -1.5rem; width: 1.8rem; height: 1.6rem; background: #fff; border-right: 4px solid #111; border-bottom: 4px solid #111; clip-path: polygon(0 0, 100% 0, 100% 100%); transform: skewX(-20deg); }
.pa-blase-rechts { align-self: flex-end; }
.pa-blase-rechts::after { left: auto; right: 22%; transform: skewX(20deg) scaleX(-1); }
.pa-laut { margin-top: auto; align-self: flex-end; font-family: var(--comic); font-size: 3rem; line-height: 1; color: var(--gelb); -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111; transform: rotate(-8deg); }
.pa-gelb .pa-laut { color: var(--rot); }
.pa-laut-gross { font-size: 4.5rem; color: #fff; }
.pa-fussnote { margin-top: 2rem; font-size: .95rem; max-width: 52rem; }
.pa-fussnote span { font-style: italic; }

/* --- Superkraefte ------------------------------------------------------ */
.pa-kraefte { padding: 5rem var(--rand); background-color: var(--blau); background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 22%, transparent 24%); background-size: 16px 16px; border-bottom: 5px solid #111; }
.pa-kraefte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .pa-kraefte ul { grid-template-columns: 1fr 1fr; } }
.pa-kraefte li { position: relative; background: #fff; border: 5px solid #111; box-shadow: 8px 8px 0 #111; padding: 1.5rem 1.5rem 1.5rem 9.5rem; min-height: 9rem; }
.pa-kraefte li:nth-child(2) { transform: rotate(1deg); }
.pa-kraefte li:nth-child(3) { transform: rotate(-1deg); }
.pa-kraefte b { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%) rotate(-10deg); font-family: var(--comic); font-weight: 400; font-size: 3rem; color: var(--rot); -webkit-text-stroke: 2px #111; text-shadow: 3px 3px 0 #111; }
.pa-kraefte li:nth-child(even) b { color: var(--gelb); }
.pa-kraefte h3 { font-family: var(--comic); font-weight: 400; font-size: 2rem; letter-spacing: .03em; line-height: 1; }
.pa-kraefte p { margin-top: .3rem; }

/* --- Warhol ------------------------------------------------------------ */
.pa-warhol { padding: 5rem var(--rand); display: grid; gap: 2.5rem; align-items: center; background: var(--pink); border-bottom: 5px solid #111; }
@media (min-width: 960px) { .pa-warhol { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.pa-warhol-text p { font-size: 1.2rem; background: #fff; border: 4px solid #111; padding: 1.1rem 1.3rem; box-shadow: 6px 6px 0 #111; }
.pa-raster { display: grid; grid-template-columns: 1fr 1fr; border: 5px solid #111; box-shadow: 10px 10px 0 #111; }
.pa-raster-feld { background: var(--a); padding: 1.2rem; border: 2px solid #111; }
.pa-raster svg { display: block; width: 100%; height: auto; }

/* --- Angebot ----------------------------------------------------------- */
.pa-angebot { padding: 5rem var(--rand); display: grid; gap: 2rem; align-items: center; background-color: var(--rot); background-image: var(--punkte); background-size: 12px 12px; border-bottom: 5px solid #111; }
@media (min-width: 900px) { .pa-angebot { grid-template-columns: auto 1fr; gap: 4rem; } }
.pa-preis { position: relative; width: 16rem; aspect-ratio: 1; justify-self: center; transform: rotate(-10deg); }
.pa-preis svg { width: 100%; height: 100%; overflow: visible; }
.pa-preis polygon { fill: var(--gelb); stroke: #111; stroke-width: 5; stroke-linejoin: round; }
.pa-preis span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--comic); font-size: 2rem; line-height: .9; }
.pa-preis b { font-weight: 400; font-size: 5rem; color: var(--rot); -webkit-text-stroke: 2px #111; }
.pa-angebot-text { background: #fff; border: 5px solid #111; box-shadow: 10px 10px 0 #111; padding: 2rem; display: grid; gap: 1rem; justify-items: start; }
.pa-angebot h2 { font-family: var(--comic); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--blau); }

/* --- Arbeiten ---------------------------------------------------------- */
.pa-arbeiten { padding: 5rem var(--rand); background: var(--gelb); border-bottom: 5px solid #111; }
.pa-arbeiten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .pa-arbeiten ul { grid-template-columns: repeat(3, 1fr); } }
.pa-arbeiten a { display: block; text-decoration: none; background: #fff; border: 5px solid #111; box-shadow: 8px 8px 0 #111; transition: transform .15s ease; }
.pa-arbeiten li:nth-child(odd) a { transform: rotate(-1.5deg); }
.pa-arbeiten li:nth-child(even) a { transform: rotate(1.5deg); }
.pa-arbeiten a:hover { transform: rotate(0) scale(1.03); }
.pa-arbeiten img { display: block; width: 100%; height: 12rem; object-fit: cover; object-position: top; border-bottom: 5px solid #111; filter: saturate(1.6) contrast(1.15); }
.pa-arbeiten span { display: block; padding: .7rem 1rem; font-family: var(--comic); font-size: 1.7rem; letter-spacing: .03em; }

/* --- Design ------------------------------------------------------------ */
.pa-design { padding: 5rem var(--rand); background: #fff; border-bottom: 5px solid #111; }
.pa-design-blasen { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .pa-design-blasen { grid-template-columns: 1fr 1fr; } }
.pa-gedanke { position: relative; background: #fff; border: 4px solid #111; border-radius: 2.5rem; padding: 1.6rem 1.8rem; box-shadow: 6px 6px 0 #111; }
.pa-gedanke::after { content: ''; position: absolute; left: 2.5rem; bottom: -2.2rem; width: 1.3rem; height: 1.3rem; border: 4px solid #111; border-radius: 50%; background: #fff; }
.pa-gedanke-2 { background: var(--gelb); }
.pa-gedanke-2::after { background: var(--gelb); left: auto; right: 2.5rem; }

/* --- Schluss ----------------------------------------------------------- */
.pa-schluss { padding: 6rem var(--rand); background-color: var(--blau); background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 22%, transparent 24%); background-size: 16px 16px; }
.pa-schluss h2 { font-family: var(--comic); font-weight: 400; font-size: clamp(4rem, 14vw, 11rem); line-height: .9; color: var(--gelb); -webkit-text-stroke: 3px #111; text-shadow: 8px 8px 0 #111; transform: rotate(-3deg); }
.pa-schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 3rem; }

.fv-galerie { border-top: 5px solid #111; border-bottom: 5px solid #111; }
.pa-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--rand); background: #fff; font-weight: 600; }
.pa-fuss nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Popups */
.fv-kopf { background: var(--gelb); border-bottom: 4px solid #111; }
.fv-titel { font-weight: 400; font-size: 2.2rem; letter-spacing: .03em; }
.fv-input { border-width: 3px; border-color: #111; }
.fv-senden, .fv-knopf { border: 4px solid #111; box-shadow: 5px 5px 0 #111; font-family: var(--comic); font-size: 1.3rem; font-weight: 400; letter-spacing: .04em; }
.fv-knopf-zweit { background: #fff; color: #111; }

/* Schmale Schirme */
@media (max-width: 600px) {
    .pa-kopf { gap: .5rem; }
    .pa-logo { font-size: 1.5rem; }
    .pa-knopf-klein { font-size: 1rem; padding: .35rem .55rem; }
    .pa-kraefte li { padding: 4.2rem 1.25rem 1.25rem; }
    .pa-kraefte b { top: 1.6rem; transform: rotate(-8deg); font-size: 2.4rem; }
}
.pa-kraefte li { min-width: 0; }