/* GENERIERT von werkzeug/c2/siebdruck_scope.mjs aus entwuerfe-html/C2-siebdruck/css/siebdruck.css, nicht von Hand ändern. Theme „Siebdruck“: alle Regeln gelten nur unter . */ /* ========================================================================== C2 · Theme „Siebdruck“ (Farben, Schriften und Druck-Anmutung aus K10) Wird NACH c.css, c2.css, album.css, timeline.css geladen und überschreibt nur Darstellung: Farben, Schriften, Texturen, Rahmen, Knöpfe, Tags, Navigation, Fuß, Bildbehandlung. Aufbau und Raster bleiben C2. Druckfarben: Papier #f1e8d3 · Schwarz #181412 · Signalrot #ce261e · Rot tief #a81c15 Ocker #e3a12b · Orange #e5671f · Gelb #f2c230 · Weiß #fbf7ec Abschnitte: 0 Schriften 1 Farben + Bögen 2 Grundtypografie 3 Bausteine 4 Kopf + Navigation 5 Hero als Plakat 6 Startseite 7 Regal + Hüllen 8 Shootings 9 Album-Seiten 10 Rosen-Timeline 11 Fuß 12 Druckvorgang ========================================================================== */ /* ── 0. Schriften (lokal, aus K10) ─────────────────────────────────────── */ @font-face { font-family: "Anton"; src: url(/fonts/Anton-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Anton"; src: url(/fonts/Anton-latin-ext.woff2) format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Alfa Slab One"; src: url(/fonts/AlfaSlabOne-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Alfa Slab One"; src: url(/fonts/AlfaSlabOne-latin-ext.woff2) format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Shoulders Stencil"; src: url(/fonts/BigShouldersStencil-900-latin.woff2) format("woff2"); font-weight: 900; font-display: swap; } @font-face { font-family: "Shoulders Stencil"; src: url(/fonts/BigShouldersStencil-900-latin-ext.woff2) format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-700-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; } /* ── 1. Farben: C-Variablen auf Druckfarben umgedeutet ────────────────────── Grundbogen = Papier. Dazu drei Bögen in Vollton, die die C-Variablen lokal neu setzen: Schwarz (.sd-bogen-schwarz u. a.), Ocker, Rot. */ :root:where([data-design="siebdruck"]) { --sd-papier: #f1e8d3; --sd-papier-tief: #e6dabe; --sd-weiss: #fbf7ec; --sd-schwarz: #181412; --sd-rot: #ce261e; --sd-rot-tief: #a81c15; --sd-ocker: #e3a12b; --sd-orange: #e5671f; --sd-gelb: #f2c230; --sd-grau: #5d5245; --sd-anton: "Anton", "Barlow Condensed", Impact, sans-serif; --sd-slab: "Alfa Slab One", Rockwell, Georgia, serif; --sd-schablone: "Shoulders Stencil", "Barlow Condensed", sans-serif; --sd-kond: "Barlow Condensed", "Arial Narrow", sans-serif; --sd-ease: cubic-bezier(.7, 0, .2, 1); --vx: 6px; --vy: 4px; --color-schwarz: var(--sd-papier); --color-anthrazit: var(--sd-weiss); --color-anthrazit-hell: #c3b28d; --color-stahl: #5d5245; --color-stahl-hell: #2b241f; --color-weiss: var(--sd-schwarz); --color-papier: var(--sd-weiss); --color-papier-tief: #e1d3b3; --color-tinte: var(--sd-schwarz); --color-tinte-gedaempft: #54493e; --color-rot: var(--sd-rot); --color-rot-hell: var(--sd-rot); --color-rot-tief: var(--sd-rot-tief); --sd-akzent: #b01f17; /* kleine rote Schrift auf Papier (Kontrast ≥ 5:1) */ --sd-linie: var(--sd-schwarz); /* tragende Linien */ --sd-schatten: var(--sd-rot); /* versetzter Druckschatten bei Hover */ --font-display: var(--sd-kond); --font-mono: "Courier Prime", "Courier New", monospace; --font-lesen: "Source Serif 4", Georgia, serif; --font-ui: "Source Serif 4", Georgia, serif; --c2-hand: var(--sd-schablone); /* Rosen-Timeline (js/timeline.js liest diese Werte) */ --tl-linie: #181412; --tl-hell: #ce261e; --tl-tief: #ce261e; --tl-blatt: #e3a12b; --tl-knoten: #f1e8d3; --tl-weiss: #181412; --tl-keim: #e3a12b; --tl-glut: #ce261e; --tl-glut-deckung: .85; color-scheme: light; } html:where([data-design="siebdruck"]) { font-synthesis: none; } /* Schwarzer Bogen */ :where([data-design="siebdruck"]) .sd-bogen-schwarz, :where([data-design="siebdruck"]) .c-fuss, :where([data-design="siebdruck"]) .riss, :where([data-design="siebdruck"]) main > section.c-stahl.border-y, :where([data-design="siebdruck"]) main > section.c-stahl.border-t, :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(3), :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(2) { --color-schwarz: var(--sd-schwarz); --color-anthrazit: #241e1a; --color-anthrazit-hell: #5a4d42; --color-stahl: #c4b597; --color-stahl-hell: #eadfc6; --color-weiss: var(--sd-papier); --color-papier: var(--sd-weiss); --color-tinte: var(--sd-schwarz); --color-rot-hell: var(--sd-ocker); --sd-akzent: var(--sd-ocker); --sd-linie: var(--sd-papier); --sd-schatten: var(--sd-rot); background-color: var(--sd-schwarz); color: var(--color-stahl-hell); } /* Ocker-Bogen */ :where([data-design="siebdruck"]) .sd-bogen-ocker, :where([data-design="siebdruck"]) .album-kopf, :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(1), :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(3) { --color-schwarz: var(--sd-ocker); --color-anthrazit: var(--sd-weiss); --color-anthrazit-hell: #a3741c; --color-stahl: #3d2d18; --color-stahl-hell: #1f1810; --color-weiss: var(--sd-schwarz); --color-rot-hell: var(--sd-rot-tief); --sd-akzent: #7c120c; --sd-linie: var(--sd-schwarz); --sd-schatten: var(--sd-schwarz); background-color: var(--sd-ocker); color: var(--color-stahl-hell); } /* Roter Bogen */ :where([data-design="siebdruck"]) .sd-bogen-rot, :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(4), :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(1) { --color-schwarz: var(--sd-rot); --color-anthrazit: var(--sd-rot-tief); --color-anthrazit-hell: #e0796f; --color-stahl: #fffaf2; --color-stahl-hell: #fffaf2; --color-weiss: #fffaf2; --color-rot: var(--sd-schwarz); --color-rot-hell: var(--sd-papier); --sd-akzent: var(--sd-papier); --sd-linie: var(--sd-papier); --sd-schatten: var(--sd-schwarz); background-color: var(--sd-rot); color: #fffaf2; } /* Papier mit Fasern; Volltöne mit Farbausfällen (Poren) */ :where([data-design="siebdruck"]) body { background: var(--sd-papier) url(/c2/sd/papier.webp) repeat; background-size: 640px; color: var(--color-stahl-hell); font-family: var(--font-lesen); -webkit-font-smoothing: auto; } :where([data-design="siebdruck"]) .c-ambiente { display: none; } :where([data-design="siebdruck"]) .c-stahl::before { content: none; } :where([data-design="siebdruck"]) .album-kopf, :where([data-design="siebdruck"]) .sd-bogen-ocker, :where([data-design="siebdruck"]) .sd-bogen-rot { background-image: url(/c2/sd/poren.webp); background-size: 512px; } /* auf Schwarz nur ein Hauch Farbausfall (wie K10: Deckkraft .2) */ :where([data-design="siebdruck"]) .sd-bogen-schwarz, :where([data-design="siebdruck"]) .c-fuss, :where([data-design="siebdruck"]) .riss, :where([data-design="siebdruck"]) main > section.c-stahl.border-y, :where([data-design="siebdruck"]) main > section.c-stahl.border-t { position: relative; } :where([data-design="siebdruck"]) .sd-bogen-schwarz::before, :where([data-design="siebdruck"]) .c-stahl.c-fuss::before, :where([data-design="siebdruck"]) .riss::before, :where([data-design="siebdruck"]) main > section.c-stahl.border-y::before, :where([data-design="siebdruck"]) main > section.c-stahl.border-t::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background: url(/c2/sd/poren.webp) 0 0 / 512px repeat; } :where([data-design="siebdruck"]) ::selection { background: var(--sd-ocker); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) :focus-visible { outline: 3px solid var(--sd-rot); outline-offset: 3px; } :where([data-design="siebdruck"]) .sd-bogen-schwarz :focus-visible, :where([data-design="siebdruck"]) .c-fuss :focus-visible { outline-color: var(--sd-ocker); } /* ── 2. Grundtypografie ─────────────────────────────────────────────────── */ :where([data-design="siebdruck"]) h1, :where([data-design="siebdruck"]) h2, :where([data-design="siebdruck"]) .display { font-family: var(--sd-anton); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .92; color: var(--color-weiss); } :where([data-design="siebdruck"]) h3, :where([data-design="siebdruck"]) h4 { font-family: var(--sd-slab); font-weight: 400; letter-spacing: 0; line-height: 1.08; color: var(--color-weiss); } :where([data-design="siebdruck"]) h3.uppercase { letter-spacing: .01em; } :where([data-design="siebdruck"]) .lead { font-family: var(--font-lesen); color: var(--color-stahl-hell); } :where([data-design="siebdruck"]) .stempel { font-family: var(--font-mono); font-weight: 700; letter-spacing: .07em; color: var(--color-stahl); } :where([data-design="siebdruck"]) .stempel--rot { color: var(--sd-akzent); } :where([data-design="siebdruck"]) .papier .stempel { color: var(--color-tinte-gedaempft); } :where([data-design="siebdruck"]) .papier .stempel--rot { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .text-rot-hell { color: var(--color-rot-hell); } :where([data-design="siebdruck"]) .text-stahl { color: var(--color-stahl); } :where([data-design="siebdruck"]) .brotkrumen { font-family: var(--font-mono); font-size: .82rem; color: var(--color-stahl); } :where([data-design="siebdruck"]) .brotkrumen li + li::before { color: var(--color-rot-hell); } /* Versatz der Farbebenen (setzt js/siebdruck.js als Ebene hinter Überschriften) */ :where([data-design="siebdruck"]) .sd-ebenen { position: relative; isolation: isolate; } :where([data-design="siebdruck"]) .sd-ebene { position: absolute; left: 0; top: 0; right: 0; z-index: -1; pointer-events: none; user-select: none; color: var(--sd-ocker); transform: translate(.045em, .035em); transition: transform .9s var(--sd-ease) .35s, opacity .4s ease .35s; } :where([data-design="siebdruck"]) .sd-ebene * { color: inherit !important; -webkit-text-stroke: 0 !important; } :where([data-design="siebdruck"]) .sd-bogen-ocker .sd-ebene, :where([data-design="siebdruck"]) .album-kopf .sd-ebene { color: var(--sd-rot); } :where([data-design="siebdruck"]) .sd-bogen-schwarz .sd-ebene, :where([data-design="siebdruck"]) .riss .sd-ebene { color: var(--sd-rot); } :where([data-design="siebdruck"]) h1 em, :where([data-design="siebdruck"]) .c-hero__titel em { font-style: normal; color: var(--sd-rot); } /* ── 3. Bausteine ────────────────────────────────────────────────────────── */ /* Reiter = kleine Knöpfe aus K10 */ :where([data-design="siebdruck"]) .reiter { border: 2px solid var(--sd-linie); border-radius: 0; background: var(--color-anthrazit); color: var(--color-weiss); font-family: var(--sd-kond); font-weight: 800; letter-spacing: .08em; padding: .32rem .7rem .26rem; box-shadow: 0 0 0 var(--sd-schatten); transition: transform .2s var(--sd-ease), box-shadow .2s var(--sd-ease), background .2s; } :where([data-design="siebdruck"]) .reiter:hover, :where([data-design="siebdruck"]) .reiter:focus-visible { border-color: var(--sd-linie); color: var(--color-weiss); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--sd-schatten); } :where([data-design="siebdruck"]) .reiter--rot, :where([data-design="siebdruck"]) .papier .reiter--rot { background: var(--sd-rot); border-color: var(--sd-rot); color: var(--sd-papier); --sd-schatten: var(--sd-schwarz); } :where([data-design="siebdruck"]) .reiter--rot:hover, :where([data-design="siebdruck"]) .reiter--rot:focus-visible, :where([data-design="siebdruck"]) .papier .reiter--rot:hover { background: var(--sd-rot); border-color: var(--sd-rot); color: var(--sd-papier); } :where([data-design="siebdruck"]) .reiter__zahl { font-family: var(--font-mono); font-weight: 700; opacity: 1; color: var(--sd-akzent); } :where([data-design="siebdruck"]) .reiter--rot .reiter__zahl { color: var(--sd-papier); } :where([data-design="siebdruck"]) .papier .reiter { background: var(--sd-papier); border-color: var(--sd-schwarz); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .papier .reiter:hover, :where([data-design="siebdruck"]) .papier .reiter:focus-visible { border-color: var(--sd-schwarz); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-bogen-schwarz .reiter:not(.reiter--rot), :where([data-design="siebdruck"]) .c-fuss .reiter:not(.reiter--rot), :where([data-design="siebdruck"]) main > section.c-stahl.border-t .reiter:not(.reiter--rot) { background: transparent; } /* Tafeln = Abzüge: Papier mit kräftigem Rand, Raster in der Ecke, Druckschatten bei Hover */ :where([data-design="siebdruck"]) .tafel, :where([data-design="siebdruck"]) .tafel:not(.papier), :where([data-design="siebdruck"]) .papier, :where([data-design="siebdruck"]) .tafel.papier { background-color: var(--color-anthrazit); background-image: url(/c2/sd/raster-ocker.webp); background-size: 210px; background-repeat: no-repeat; background-position: right top; border: 2.5px solid var(--sd-linie); border-radius: 0; transition: transform .3s var(--sd-ease), box-shadow .3s var(--sd-ease), border-color .2s; } :where([data-design="siebdruck"]) .papier { background-color: var(--sd-weiss); box-shadow: 9px 9px 0 var(--sd-ocker); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .tafel::before { width: 6px; border-radius: 0; background: var(--sd-rot); } :where([data-design="siebdruck"]) .tafel:hover, :where([data-design="siebdruck"]) .tafel:focus-within { border-color: var(--sd-linie); transform: translate(-4px, -4px); box-shadow: 9px 9px 0 var(--sd-schatten); } :where([data-design="siebdruck"]) .tafel:hover h2, :where([data-design="siebdruck"]) .tafel:hover h3 { color: var(--color-weiss); } :where([data-design="siebdruck"]) .tafel.papier:hover h2, :where([data-design="siebdruck"]) .tafel.papier:hover h3 { color: var(--sd-rot); } :where([data-design="siebdruck"]) .tafel.papier:hover { box-shadow: 9px 9px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .teaser h3 { font-size: 1.28rem; line-height: 1.1; } :where([data-design="siebdruck"]) .teaser p, :where([data-design="siebdruck"]) .teaser--papier p { color: var(--color-stahl); font-family: var(--font-lesen); font-size: .98rem; line-height: 1.5; } /* farbige Abzüge: Akten (Ocker · Papier · Schwarz · Rot) und Einstiege (Rot · Schwarz · Ocker) */ :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(1), :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(3) { background-image: url(/c2/sd/raster-rot.webp); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(3), :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(2) { background-image: url(/c2/sd/raster-rot.webp); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(4), :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(1) { background-image: url(/c2/sd/raster-schwarz.webp); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(4)::before, :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(1)::before { background: var(--sd-schwarz); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(1)::before, :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(3)::before { background: var(--sd-schwarz); } :where([data-design="siebdruck"]) .raster--4 > .tafel, :where([data-design="siebdruck"]) .c2-einstieg > .tafel { border-color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .raster--4 > .tafel h3 { font-size: 2.1rem; } :where([data-design="siebdruck"]) .raster--4 .linie { border-top: 2px solid var(--sd-linie); } /* Etiketten: rote Schablonenschrift mit Spitze */ :where([data-design="siebdruck"]) .papier > .stempel--rot:first-child, :where([data-design="siebdruck"]) .papier > :first-child > .stempel--rot:first-child, :where([data-design="siebdruck"]) .tafel > .stempel--rot:first-child, :where([data-design="siebdruck"]) .c2-tag { background: var(--sd-rot); color: var(--sd-papier) !important; font-family: var(--sd-schablone); font-weight: 900; font-size: .98rem; letter-spacing: .14em; padding: .4rem .7rem .34rem .75rem; box-shadow: 3px 3px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .papier > .stempel--rot:first-child::after, :where([data-design="siebdruck"]) .papier > :first-child > .stempel--rot:first-child::after, :where([data-design="siebdruck"]) .tafel > .stempel--rot:first-child::after, :where([data-design="siebdruck"]) .c2-tag::after { border-top-color: var(--sd-rot); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(4) > .stempel--rot:first-child, :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(1) > .stempel--rot:first-child { background: var(--sd-schwarz); box-shadow: 3px 3px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(4) > .stempel--rot:first-child::after, :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(1) > .stempel--rot:first-child::after { border-top-color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .raster--4 > .tafel:nth-child(3) > .stempel--rot:first-child, :where([data-design="siebdruck"]) .c2-einstieg > .tafel:nth-child(2) > .stempel--rot:first-child { box-shadow: 3px 3px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .linie { border-top: 1.5px solid var(--color-anthrazit-hell); } :where([data-design="siebdruck"]) .papier .linie, :where([data-design="siebdruck"]) .linie--papier { border-top-color: var(--color-papier-tief); } /* Kopfzeilen der Abschnitte: dicke Druckerlinie oben (wie die Kapitel in K10) */ :where([data-design="siebdruck"]) .c-kopfzeile { border-top: 6px solid var(--sd-linie); padding-top: .9rem; } :where([data-design="siebdruck"]) .c-kopfzeile h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); } :where([data-design="siebdruck"]) .c-kopfzeile .stempel { font-weight: 700; } :where([data-design="siebdruck"]) main h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); } :where([data-design="siebdruck"]) .zahl { font-family: var(--sd-slab); font-weight: 400; color: var(--sd-ocker); font-size: clamp(2.8rem, 5.4vw, 4.9rem); letter-spacing: -.01em; text-shadow: .04em .035em 0 var(--sd-rot); } :where([data-design="siebdruck"]) .zahl + .stempel { color: var(--color-stahl-hell); } /* Fließtext auf Papier: dunkel und ruhig */ :where([data-design="siebdruck"]) .lesetext { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .lesetext h2 { font-family: var(--sd-anton); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.3rem); border-top: 2.5px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .lesetext h2::before { width: 3.5rem; height: 6px; background: var(--sd-rot); box-shadow: 4px 3px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .lesetext h3 { font-family: var(--sd-slab); font-weight: 400; font-size: 1.3rem; } :where([data-design="siebdruck"]) .lesetext blockquote { border-left: 6px solid var(--sd-rot); color: #3b3229; } :where([data-design="siebdruck"]) .papier a:not(.reiter) { color: var(--sd-rot-tief); text-decoration-color: color-mix(in srgb, var(--sd-rot) 55%, transparent); text-decoration-thickness: 1.5px; } :where([data-design="siebdruck"]) .papier a:not(.reiter):hover { text-decoration-color: var(--sd-rot); } :where([data-design="siebdruck"]) .tabelle, :where([data-design="siebdruck"]) .steckbrief { border-radius: 0; } :where([data-design="siebdruck"]) .tabelle th, :where([data-design="siebdruck"]) .album-tabelle th { background: var(--sd-papier-tief); font-family: var(--font-mono); color: #3d342b; } :where([data-design="siebdruck"]) .quellen li::before, :where([data-design="siebdruck"]) .tabelle td:first-child, :where([data-design="siebdruck"]) .track__nr { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .c2-quellen > summary::after, :where([data-design="siebdruck"]) .c-schublade__inhalt details[open] summary::after { content: "−"; } :where([data-design="siebdruck"]) .c2-quellen > summary::after { color: var(--sd-rot); } :where([data-design="siebdruck"]) .c2-quellen__titel { font-family: var(--sd-anton); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; } /* Handnotizen: Schablonenschrift, leicht gedreht, gestempelt */ :where([data-design="siebdruck"]) .c2-hand, :where([data-design="siebdruck"]) .bu__hand, :where([data-design="siebdruck"]) .riss__hand, :where([data-design="siebdruck"]) .achse__hand, :where([data-design="siebdruck"]) .rose__hand, :where([data-design="siebdruck"]) .rose__notiz, :where([data-design="siebdruck"]) .album-hand { font-family: var(--sd-schablone); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; text-shadow: none; } :where([data-design="siebdruck"]) .bu__hand, :where([data-design="siebdruck"]) .album-hand { font-size: 1.35rem; line-height: 1.02; color: var(--sd-rot); } :where([data-design="siebdruck"]) .rose__hand { color: var(--sd-rot); text-shadow: none; } :where([data-design="siebdruck"]) .rose__hand--kopf { font-size: 1.25rem; } :where([data-design="siebdruck"]) .rose__hand--phase, :where([data-design="siebdruck"]) .rose__hand--ende { font-size: 1.15rem; } :where([data-design="siebdruck"]) .rose__notiz { font-size: 1rem; color: var(--sd-papier); background: var(--sd-rot); padding: .2rem .45rem .15rem; box-shadow: 2px 2px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__gedicht .rose__hand { font-family: var(--sd-slab); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.15; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__hand--still { font-size: clamp(1.2rem, 1.8vw, 1.5rem); } /* Bildunterschriften */ :where([data-design="siebdruck"]) .bu__zeile { font-family: var(--font-mono); font-weight: 700; letter-spacing: .1em; color: var(--color-stahl); border-top: 2px solid var(--sd-linie); } /* Fotos als Rasterdruck: einfarbig Schwarz auf Ocker (multiply), farbig beim Zeigen */ :where([data-design="siebdruck"]) .c-kontaktbogen { background: var(--sd-ocker); border-block: 5px solid var(--sd-schwarz); gap: 5px; padding-block: 5px; } :where([data-design="siebdruck"]) .c-kontaktbogen img, :where([data-design="siebdruck"]) .c2-streifen img { filter: grayscale(1) contrast(1.45) brightness(1.08); mix-blend-mode: multiply; } :where([data-design="siebdruck"]) .c-kontaktbogen img:hover, :where([data-design="siebdruck"]) .c2-streifen img:hover { filter: grayscale(1) contrast(1.6) brightness(1.15); } :where([data-design="siebdruck"]) .c2-streifen { background: var(--sd-ocker); border: 3px solid var(--sd-schwarz); } /* ── 4. Kopf und Navigation ─────────────────────────────────────────────── */ :where([data-design="siebdruck"]) .sd-leiste { position: relative; z-index: 1001; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem clamp(16px, 3vw, 40px) .4rem; background: var(--sd-schwarz); color: var(--sd-papier); font: 400 12.5px/1.25 var(--font-mono); letter-spacing: .04em; } :where([data-design="siebdruck"]) .sd-leiste__mitte { opacity: .8; } :where([data-design="siebdruck"]) .sd-wahl { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; } :where([data-design="siebdruck"]) .sd-wahl > span:first-child { opacity: .75; } :where([data-design="siebdruck"]) .sd-wahl a, :where([data-design="siebdruck"]) .sd-wahl b { padding: .12rem .45rem .08rem; font-weight: 700; text-decoration: none; } :where([data-design="siebdruck"]) .sd-wahl a { color: inherit; border: 1.5px solid currentColor; transition: background .2s, color .2s; } :where([data-design="siebdruck"]) .sd-wahl a:hover, :where([data-design="siebdruck"]) .sd-wahl a:focus-visible { background: var(--sd-papier); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-wahl b { background: var(--sd-rot); color: var(--sd-papier); } @media (max-width: 760px) { :where([data-design="siebdruck"]) .sd-leiste__mitte { display: none; } } @media (max-width: 430px) { :where([data-design="siebdruck"]) .sd-leiste__links { display: none; } :where([data-design="siebdruck"]) .sd-leiste { justify-content: flex-end; } } :where([data-design="siebdruck"]) .c2-menue-offen .sd-leiste { display: none; } :where([data-design="siebdruck"]) .c-kopf { border-bottom: 0; } :where([data-design="siebdruck"]) .c-kopf::before { background: var(--sd-papier) url(/c2/sd/papier.webp) repeat; background-size: 640px; border-bottom: 5px solid var(--sd-schwarz); box-shadow: 0 4px 0 var(--sd-papier), 0 7px 0 var(--sd-schwarz); -webkit-backdrop-filter: none; backdrop-filter: none; } :where([data-design="siebdruck"]) #c-fortschritt { bottom: 0; height: 5px; background: var(--sd-rot); } :where([data-design="siebdruck"]) .c-marke { font-family: var(--sd-slab); font-weight: 400; font-size: 1.42rem; letter-spacing: .01em; color: var(--sd-schwarz); text-shadow: 2px 2px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .c-marke .text-rot-hell { color: var(--sd-rot); text-shadow: none; } :where([data-design="siebdruck"]) .c-marke__reiter { background: transparent; color: var(--sd-rot); border: 2.5px solid var(--sd-rot); border-radius: 0; text-shadow: none; font-family: var(--sd-schablone); font-weight: 900; font-size: .72rem; letter-spacing: .18em; padding: .22rem .35rem .18rem .5rem; transform: rotate(-4deg); } :where([data-design="siebdruck"]) .c-nav__link { font-family: var(--sd-kond); font-weight: 800; font-size: 1.04rem; letter-spacing: .09em; color: var(--sd-schwarz); border-bottom-width: 5px; } :where([data-design="siebdruck"]) .c-nav__link .text-stahl { color: var(--sd-rot); } :where([data-design="siebdruck"]) .c-nav__punkt:hover > .c-nav__link, :where([data-design="siebdruck"]) .c-nav__punkt:focus-within > .c-nav__link, :where([data-design="siebdruck"]) .c-nav__link[aria-current="true"] { color: var(--sd-schwarz); border-bottom-color: var(--sd-rot); } :where([data-design="siebdruck"]) .c-mega, :where([data-design="siebdruck"]) .c-sprache__liste { background: var(--sd-weiss) url(/c2/sd/raster-ocker.webp) right top / 220px no-repeat; border: 3px solid var(--sd-schwarz); border-top: 7px solid var(--sd-rot); border-radius: 0; box-shadow: 9px 9px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .c-mega__titel { font-family: var(--sd-schablone); font-weight: 900; font-size: .9rem; letter-spacing: .2em; color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .c-mega a { font-family: var(--sd-kond); font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; color: var(--sd-schwarz); border-bottom: 1.5px solid #d6c7a4; padding: .38rem 0 .3rem; } :where([data-design="siebdruck"]) .c-mega a:hover { color: var(--sd-rot); } :where([data-design="siebdruck"]) .c-mega a .reiter__zahl, :where([data-design="siebdruck"]) .c-mega a:hover .reiter__zahl { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .c-suche input { background: var(--sd-weiss); border: 2.5px solid var(--sd-schwarz); border-right: 0; border-radius: 0; color: var(--sd-schwarz); font-family: var(--font-mono); font-size: .85rem; } :where([data-design="siebdruck"]) .c-suche input::placeholder { color: #6f6253; } :where([data-design="siebdruck"]) .c-suche input:focus { border-color: var(--sd-rot); } :where([data-design="siebdruck"]) .c-suche button { background: var(--sd-schwarz); border: 2.5px solid var(--sd-schwarz); border-radius: 0; color: var(--sd-papier); font-family: var(--sd-anton); font-weight: 400; letter-spacing: .08em; } :where([data-design="siebdruck"]) .c-suche button:hover { background: var(--sd-rot); border-color: var(--sd-rot); } :where([data-design="siebdruck"]) .c-sprache__aktiv { color: var(--sd-schwarz); border: 2px solid var(--sd-schwarz); border-radius: 0; font-family: var(--font-mono); font-weight: 700; } :where([data-design="siebdruck"]) .c-sprache__liste a { color: var(--sd-schwarz); border-bottom-color: #d6c7a4; } :where([data-design="siebdruck"]) .c-sprache__liste a:hover { color: var(--sd-rot); } :where([data-design="siebdruck"]) .c-sprache__liste .stempel { color: var(--sd-rot-tief); } /* Handy: Schublade */ :where([data-design="siebdruck"]) .c-schublade > summary { background: var(--sd-schwarz); color: var(--sd-papier); border: 0; border-radius: 0; font-family: var(--sd-anton); font-weight: 400; letter-spacing: .1em; padding: .5rem .75rem .42rem; box-shadow: 3px 3px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .c-schublade[open] > summary { background: var(--sd-rot); box-shadow: 3px 3px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .c-schublade__inhalt { background: var(--sd-papier) url(/c2/sd/papier.webp) repeat; background-size: 640px; border-top: 7px solid var(--sd-rot); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c-schublade__inhalt details { border-bottom: 2px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .c-schublade__inhalt summary { font-family: var(--sd-anton); font-weight: 400; font-size: 1.5rem; letter-spacing: .05em; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c-schublade__inhalt summary::after { color: var(--sd-rot); font-family: var(--sd-anton); } :where([data-design="siebdruck"]) .c-schublade__inhalt a { font-family: var(--sd-kond); font-weight: 600; font-size: 1.12rem; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c-schublade__inhalt input { background: var(--sd-weiss) !important; border: 2.5px solid var(--sd-schwarz) !important; border-radius: 0 !important; color: var(--sd-schwarz) !important; } :where([data-design="siebdruck"]) .c-schublade__inhalt button[type="submit"] { background: var(--sd-schwarz) !important; border-radius: 0 !important; color: var(--sd-papier) !important; font-family: var(--sd-anton) !important; } :where([data-design="siebdruck"]) .c-sprachen-mobil a { color: var(--sd-schwarz); } /* ── 5. Hero als Plakat (index.html, Markup aus _werkzeug/siebdruck_anwenden.py) ── */ :where([data-design="siebdruck"]) .sd-plakat { position: relative; overflow: hidden; padding: 0; isolation: isolate; } :where([data-design="siebdruck"]) .sd-plakat::before { content: none; } :where([data-design="siebdruck"]) .sd-plakat__ocker { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: 50%; background: var(--sd-ocker) url(/c2/sd/poren.webp); background-size: 512px; } :where([data-design="siebdruck"]) .sd-plakat__band { position: absolute; z-index: 0; top: 8%; bottom: 0; left: calc(50% - 35px); width: 70px; background: var(--sd-rot) url(/c2/sd/poren.webp); background-size: 512px; mix-blend-mode: multiply; } :where([data-design="siebdruck"]) .sd-plakat__raster { position: absolute; z-index: 0; top: 0; right: 0; left: 50%; height: 64%; background-image: radial-gradient(circle at center, var(--sd-rot) 0 2.6px, transparent 3px); background-size: 11px 11px; -webkit-mask-image: linear-gradient(200deg, #000 0%, rgba(0,0,0,.65) 30%, transparent 70%); mask-image: linear-gradient(200deg, #000 0%, rgba(0,0,0,.65) 30%, transparent 70%); mix-blend-mode: multiply; opacity: .85; } :where([data-design="siebdruck"]) .sd-passer { position: absolute; z-index: 3; width: 30px; height: 30px; color: var(--sd-schwarz); pointer-events: none; } :where([data-design="siebdruck"]) .sd-passer--a { top: 16px; left: calc(50% - 82px); } :where([data-design="siebdruck"]) .sd-passer--b { bottom: 18px; right: 16px; } :where([data-design="siebdruck"]) .sd-plakat__wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: min(880px, max(700px, calc(100vh - 120px))); } :where([data-design="siebdruck"]) .sd-plakat__text { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding: clamp(2.6rem, 5vw, 4.6rem) 1.6rem clamp(2.4rem, 4vw, 3.6rem) 0; position: relative; z-index: 2; } :where([data-design="siebdruck"]) .sd-kicker { margin: 0 0 1.2rem; font: 900 clamp(15px, 1.25vw, 19px)/1.3 var(--sd-schablone); letter-spacing: .14em; text-transform: uppercase; color: var(--sd-akzent); } :where([data-design="siebdruck"]) .sd-kicker span { white-space: nowrap; } :where([data-design="siebdruck"]) .sd-kicker .sd-trenner { color: var(--sd-schwarz); margin: 0 .25em; } :where([data-design="siebdruck"]) .sd-parole { margin: 0; font-family: var(--sd-anton); font-weight: 400; text-transform: uppercase; line-height: .86; letter-spacing: .004em; font-size: clamp(64px, 10.8vw, 170px); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-zeile { display: block; } :where([data-design="siebdruck"]) .sd-zeile--klein { font-size: .62em; line-height: 1; padding: .05em 0 .03em; letter-spacing: .03em; } :where([data-design="siebdruck"]) .sd-versatz { position: relative; display: inline-block; isolation: isolate; } :where([data-design="siebdruck"]) .sd-versatz::after { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; transform: translate(.05em, .04em); transition: transform .6s var(--sd-ease); } :where([data-design="siebdruck"]) .sd-versatz--rot { color: var(--sd-rot); } :where([data-design="siebdruck"]) .sd-versatz--rot::after { color: transparent; -webkit-text-stroke: .028em var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-versatz--ocker::after { color: var(--sd-ocker); } :where([data-design="siebdruck"]) .sd-plakat__lede { margin: 1.7rem 0 0; max-width: 31em; font-family: var(--font-lesen); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.52; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-jahre { margin-top: 1.9rem; gap: .7rem .8rem; } :where([data-design="siebdruck"]) .sd-jahre .reiter { font-family: var(--sd-anton); font-weight: 400; font-size: 1.15rem; letter-spacing: .06em; padding: .55rem .9rem .45rem; background: var(--sd-schwarz); border-color: var(--sd-schwarz); color: var(--sd-papier); box-shadow: 5px 5px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .sd-jahre .reiter:hover, :where([data-design="siebdruck"]) .sd-jahre .reiter:focus-visible { color: var(--sd-papier); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .sd-jahre .reiter--rot { background: var(--sd-rot); border-color: var(--sd-rot); box-shadow: 5px 5px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-jahre .reiter--rot:hover { box-shadow: 8px 8px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-plakat__suche { display: flex; max-width: 27rem; margin-top: 1.9rem; } :where([data-design="siebdruck"]) .sd-plakat__suche input { flex: 1; min-width: 0; padding: .7rem .85rem .6rem; background: var(--sd-weiss); color: var(--sd-schwarz); border: 3px solid var(--sd-schwarz); border-right: 0; border-radius: 0; font: 700 .95rem/1.2 var(--font-mono); } :where([data-design="siebdruck"]) .sd-plakat__suche input::placeholder { color: #6f6253; } :where([data-design="siebdruck"]) .sd-plakat__suche input:focus { outline: none; border-color: var(--sd-rot); } :where([data-design="siebdruck"]) .sd-plakat__suche button { padding: .6rem 1.1rem .5rem; background: var(--sd-rot); color: var(--sd-papier); border: 3px solid var(--sd-rot); border-radius: 0; cursor: pointer; font: 400 1.1rem/1 var(--sd-anton); letter-spacing: .08em; text-transform: uppercase; box-shadow: 5px 5px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-plakat__suche button:hover { background: var(--sd-schwarz); border-color: var(--sd-schwarz); box-shadow: 5px 5px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .sd-figur { position: relative; z-index: 1; grid-column: 2 / span 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: min(640px, 100%); margin: 0 -14px 0 0; } :where([data-design="siebdruck"]) .sd-figur__ebenen { position: relative; aspect-ratio: 1060 / 1096; } :where([data-design="siebdruck"]) .sd-ebene-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } :where([data-design="siebdruck"]) .sd-ebene-bild--rot { mix-blend-mode: multiply; transform: translate(var(--vx), var(--vy)); } :where([data-design="siebdruck"]) .sd-ebene-bild--schwarz { mix-blend-mode: multiply; } :where([data-design="siebdruck"]) .sd-plakat__name { position: relative; z-index: 2; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; margin: 5.2rem 0 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 900 clamp(15px, 1.25vw, 19px)/1 var(--sd-schablone); letter-spacing: .12em; text-transform: uppercase; color: var(--sd-papier); white-space: nowrap; } @media (max-width: 1023px) { :where([data-design="siebdruck"]) .sd-plakat__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; } :where([data-design="siebdruck"]) .sd-plakat__text { grid-column: 1; grid-row: 1; padding: 2.2rem 0 1.4rem; } :where([data-design="siebdruck"]) .sd-plakat__name { grid-column: 1; grid-row: 2; justify-self: start; margin: .2rem 0 1.6rem; writing-mode: horizontal-tb; transform: rotate(-2deg); background: var(--sd-rot); padding: .5rem .8rem .42rem; white-space: normal; letter-spacing: .1em; font-size: 1.05rem; line-height: 1.15; box-shadow: 4px 4px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-figur { grid-column: 1; grid-row: 3; justify-self: start; width: min(88vw, 560px); margin: 0 0 0 -4px; } :where([data-design="siebdruck"]) .sd-plakat__ocker { top: auto; left: 0; height: min(520px, 84vw); } :where([data-design="siebdruck"]) .sd-plakat__raster { top: auto; bottom: 0; left: 0; height: min(520px, 84vw); } :where([data-design="siebdruck"]) .sd-plakat__band { top: auto; height: min(470px, 76vw); left: auto; right: 7%; width: 13%; } :where([data-design="siebdruck"]) .sd-passer--a { display: none; } :where([data-design="siebdruck"]) .sd-parole { font-size: clamp(60px, 24vw, 150px); } } /* Kopf der Unterseiten (Diskografie, Shootings): Plakatrand wie K10, Ocker mit Raster, roter Balken */ :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf) { --feld: clamp(220px, 22vw, 380px); position: relative; overflow: hidden; border-bottom: 6px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf)::before { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--feld); pointer-events: none; opacity: 1; z-index: 0; background: url(/c2/sd/raster-rot.webp) right top / 440px no-repeat, url(/c2/sd/poren.webp) 0 0 / 512px, var(--sd-ocker); } :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf) > * { z-index: 1; } :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf)::after { content: ""; position: absolute; top: 16%; bottom: 0; left: auto; right: calc(var(--feld) - 26px); width: 52px; pointer-events: none; z-index: 0; background: url(/c2/sd/poren.webp) 0 0 / 512px, var(--sd-rot); mix-blend-mode: multiply; } @media (max-width: 1023px) { :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf)::before { inset: auto 0 0 0; height: 16px; width: 100%; background: url(/c2/sd/poren.webp) 0 0 / 512px, var(--sd-ocker); } :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf)::after { top: auto; height: 16px; right: auto; left: 12%; width: 18%; } :where([data-design="siebdruck"]) main > div.c-stahl:first-child:not(.album-kopf) { padding-bottom: 16px; } } /* ── 6. Startseite ─────────────────────────────────────────────────────── */ :where([data-design="siebdruck"]) .c2-einstieg { margin-top: 0; padding-top: 2.6rem; } :where([data-design="siebdruck"]) .c2-einstieg__karte h3 { font-size: 1.5rem; } :where([data-design="siebdruck"]) main > section.c-stahl.border-y { border: 0; border-top: 6px solid var(--sd-rot); } :where([data-design="siebdruck"]) main > section.c-stahl.border-t { border: 0; } :where([data-design="siebdruck"]) .c2-kasten { box-shadow: 9px 9px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .c2-kasten time { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .c2-kasten li a:hover { background: var(--sd-ocker) !important; } :where([data-design="siebdruck"]) .c2-kasten span.font-display { font-family: var(--sd-kond); font-weight: 800; } :where([data-design="siebdruck"]) .divide-papier-tief > * + * { border-color: #d9caa6 !important; } /* ── 7. Regal (Startseite, Diskografie) und Hüllen ─────────────────────── */ :where([data-design="siebdruck"]) .regal-rahmen { background: var(--sd-ocker) url(/c2/sd/poren.webp); background-size: 512px; border: 3px solid var(--sd-schwarz); border-bottom: 0; border-radius: 0; padding: 1.1rem .9rem 0; } :where([data-design="siebdruck"]) .regal { border-bottom: 12px solid var(--sd-schwarz); box-shadow: 0 6px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .regal__ruecken a { background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 30%, transparent 72%, rgba(0,0,0,.25)), var(--sd-schwarz); border: 2px solid var(--sd-schwarz); border-bottom: 0; border-top: 4px solid var(--sd-schwarz); border-radius: 0; color: var(--sd-papier); } :where([data-design="siebdruck"]) .regal__ruecken a:hover, :where([data-design="siebdruck"]) .regal__ruecken a:focus-visible { border-top-color: var(--sd-rot); box-shadow: 6px 0 0 var(--sd-rot); } :where([data-design="siebdruck"]) .regal__titel { font-family: var(--sd-anton); font-weight: 400; letter-spacing: .07em; font-size: clamp(.78rem, 1.32vw, 1.12rem); } :where([data-design="siebdruck"]) .regal__jahr { font-family: var(--font-mono); font-weight: 700; color: var(--sd-ocker); } :where([data-design="siebdruck"]) .regal__loch { background: var(--sd-rot); box-shadow: 0 0 0 2px var(--sd-papier); } :where([data-design="siebdruck"]) .regal__ruecken--papier a { background: linear-gradient(90deg, rgba(255,255,255,.5), transparent 30%, transparent 72%, rgba(0,0,0,.08)), var(--sd-weiss); border-color: var(--sd-schwarz); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .regal__ruecken--papier .regal__jahr { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .regal__ruecken--papier .regal__loch { box-shadow: 0 0 0 2px var(--sd-schwarz); } :where([data-design="siebdruck"]) .regal__tod { flex-basis: 5px; background: var(--sd-rot); box-shadow: none; } :where([data-design="siebdruck"]) .regal__tod span { color: var(--sd-schwarz); font-weight: 700; background: var(--sd-papier); padding: .05rem .25rem; } :where([data-design="siebdruck"]) .regal__cover { background: var(--sd-schwarz); border: 1.5px solid var(--sd-schwarz); box-shadow: none; } :where([data-design="siebdruck"]) .regal__cover--typo { background: var(--sd-rot); } :where([data-design="siebdruck"]) .regal__cover--typo b { font-family: var(--sd-anton); font-weight: 400; color: var(--sd-papier); } :where([data-design="siebdruck"]) .regal__cover--typo b::after { background: var(--sd-ocker); } :where([data-design="siebdruck"]) .regal__ruecken--papier .regal__cover--typo { background: var(--sd-rot); } :where([data-design="siebdruck"]) .regal__legende { color: var(--color-stahl); font-family: var(--font-lesen); } :where([data-design="siebdruck"]) .regal__legende b { font-family: var(--sd-kond); font-weight: 800; color: var(--color-weiss); } :where([data-design="siebdruck"]) .regal__muster { background: var(--sd-schwarz); border: 2px solid var(--sd-linie); border-radius: 0; } :where([data-design="siebdruck"]) .regal__muster--papier { background: var(--sd-weiss); border-color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .sd-bogen-schwarz .regal__muster, :where([data-design="siebdruck"]) main > section.c-stahl.border-t .regal__muster { border-color: var(--sd-papier); } :where([data-design="siebdruck"]) .c2-seite__kopf { border-bottom: 4px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-seite__kopf h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); } :where([data-design="siebdruck"]) .c2-seite__text { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-seite__text a { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .c2-seitenlabel, :where([data-design="siebdruck"]) .huelle, :where([data-design="siebdruck"]) .weiter__karte { --label-text: var(--sd-papier); } :where([data-design="siebdruck"]) .c2-seitenlabel { background: radial-gradient(circle, var(--sd-papier) 0 3px, transparent 3.5px), radial-gradient(circle, var(--label) 0 55%, transparent 55.5%), repeating-radial-gradient(circle, #181412 0 1.5px, #2c2520 1.5px 3px); box-shadow: 4px 4px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .c2-seitenlabel b { font-family: var(--sd-anton); font-weight: 400; } :where([data-design="siebdruck"]) .c2-seite--a .c2-seitenlabel, :where([data-design="siebdruck"]) .c2-seitenlabel.c2-seite--a, :where([data-design="siebdruck"]) .huelle.c2-seite--a { --label: var(--sd-rot); } :where([data-design="siebdruck"]) .c2-seite--b .c2-seitenlabel, :where([data-design="siebdruck"]) .c2-seitenlabel.c2-seite--b, :where([data-design="siebdruck"]) .huelle.c2-seite--b, :where([data-design="siebdruck"]) .weiter--b { --label: var(--sd-papier); --label-text: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-seitenlabel.c2-seite--c, :where([data-design="siebdruck"]) .huelle.c2-seite--c, :where([data-design="siebdruck"]) .weiter--c { --label: var(--sd-ocker); --label-text: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-seitenlabel.c2-seite--d, :where([data-design="siebdruck"]) .huelle.c2-seite--d, :where([data-design="siebdruck"]) .weiter--d { --label: var(--sd-orange); --label-text: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-seitenlabel.c2-seite--s, :where([data-design="siebdruck"]) .huelle.c2-seite--s { --label: var(--sd-gelb); --label-text: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-seitenlabel--single { --label: var(--sd-rot); } :where([data-design="siebdruck"]) .huelle { background: var(--sd-weiss) url(/c2/sd/raster-ocker.webp) right top / 170px no-repeat; border: 2.5px solid var(--sd-schwarz); border-radius: 0; transition: transform .3s var(--sd-ease), box-shadow .3s var(--sd-ease); } :where([data-design="siebdruck"]) .huelle::before { width: 6px; border-radius: 0; } :where([data-design="siebdruck"]) .huelle:hover, :where([data-design="siebdruck"]) .huelle:focus-within { border-color: var(--sd-schwarz); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .huelle:target { border-color: var(--sd-rot); } :where([data-design="siebdruck"]) .huelle__cover { background: var(--sd-schwarz); border: 2px solid var(--sd-schwarz); box-shadow: 5px 5px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .huelle__cover--typo { background: var(--sd-papier); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .huelle__typo-titel { font-family: var(--sd-anton); font-weight: 400; border-top: 4px solid var(--sd-rot); } :where([data-design="siebdruck"]) .huelle__typo-jahr { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .platte, :where([data-design="siebdruck"]) a.weiter__karte .platte { background: radial-gradient(circle, var(--sd-papier) 0 2.5px, transparent 3px), radial-gradient(circle, var(--label) 0 29%, var(--sd-schwarz) 29.5% 31%, transparent 31.5%), conic-gradient(from 20deg, transparent 0 8%, rgba(241,232,211,.12) 13%, transparent 19% 55%, rgba(241,232,211,.08) 61%, transparent 67%), repeating-radial-gradient(circle, #181412 0 1.4px, #2e2621 1.4px 2.8px); box-shadow: 0 0 0 1px var(--sd-schwarz); } :where([data-design="siebdruck"]) .platte__label { font-family: var(--sd-anton); font-weight: 400; } :where([data-design="siebdruck"]) .huelle__text h3 { font-size: 1.3rem; } :where([data-design="siebdruck"]) .huelle__text h3 a:hover { color: var(--sd-rot); } :where([data-design="siebdruck"]) .huelle__zusatz, :where([data-design="siebdruck"]) .huelle__label { color: var(--color-stahl); } :where([data-design="siebdruck"]) .huelle__zusatz { font-weight: 700; } :where([data-design="siebdruck"]) .huelle__werte div { border: 1.5px solid var(--sd-schwarz); border-radius: 0; background: var(--sd-papier); } :where([data-design="siebdruck"]) .huelle__werte dt { color: #54493e; font-weight: 700; } :where([data-design="siebdruck"]) .huelle__werte dd { font-family: var(--sd-kond); font-weight: 800; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .tracklist { border-top: 3px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .tracklist li, :where([data-design="siebdruck"]) .spuren li { border-bottom: 1.5px solid #ddd0b0; } :where([data-design="siebdruck"]) .track__titel, :where([data-design="siebdruck"]) .spur__titel { font-family: var(--sd-kond); font-weight: 600; } :where([data-design="siebdruck"]) .bu--dear .bu__bild { background: var(--sd-ocker); } :where([data-design="siebdruck"]) .bu--dear .bu__bild img { filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; border: 3px solid var(--sd-schwarz); } /* ── 8. Shootings: das Riss-Band als schwarzer Bogen ───────────────────── */ :where([data-design="siebdruck"]) .riss { border: 0; border-block: 6px solid var(--sd-rot); } :where([data-design="siebdruck"]) .riss__zeile { font-family: var(--sd-anton); font-weight: 400; color: var(--sd-papier); text-shadow: none; letter-spacing: .005em; } :where([data-design="siebdruck"]) .riss__ort { font-family: var(--sd-kond); font-weight: 800; color: var(--sd-ocker); } :where([data-design="siebdruck"]) .riss__quelle { font-weight: 700; color: #c4b597; } :where([data-design="siebdruck"]) .riss__linie { filter: none; } :where([data-design="siebdruck"]) .riss__glut { stroke: var(--sd-ocker); stroke-width: 9; stroke-opacity: .95; transform: translate(0, 4px); } :where([data-design="siebdruck"]) .riss__kern { stroke: var(--sd-rot); stroke-width: 4; } :where([data-design="siebdruck"]) .riss__zweig { stroke: var(--sd-rot); stroke-width: 1.6; } :where([data-design="siebdruck"]) .riss__hand { color: var(--sd-schwarz); background: var(--sd-ocker); padding: .3rem .6rem .22rem; font-size: clamp(1.1rem, 1.6vw, 1.45rem); box-shadow: 4px 4px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .c2-fall__h { font-family: var(--sd-anton); font-weight: 400; text-transform: uppercase; border-top: 2.5px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-fall__h::before { height: 6px; width: 3.5rem; box-shadow: 4px 3px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .c2-zeitcode { border-top: 4px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-zeitcode div { border-bottom: 1.5px solid var(--color-anthrazit-hell); } :where([data-design="siebdruck"]) .c2-zeitcode dt { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .c2-zeitcode dd { color: var(--sd-schwarz); font-family: var(--font-lesen); } :where([data-design="siebdruck"]) .c2-zeitcode strong { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .c2-hinweis { background: var(--sd-weiss); border: 2.5px solid var(--sd-schwarz); border-left: 8px solid var(--sd-rot); color: var(--sd-schwarz); box-shadow: 6px 6px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .c2-hinweis b { color: var(--sd-rot-tief); } /* ── 9. Album-Seiten ───────────────────────────────────────────────────── */ :where([data-design="siebdruck"]) .album-kopf { border-bottom: 6px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-kopf .brotkrumen a:hover, :where([data-design="siebdruck"]) .leiste-kopf__link:hover { color: var(--sd-schwarz); text-decoration: underline; } :where([data-design="siebdruck"]) .leiste-kopf__link { color: var(--sd-schwarz); font-weight: 700; } :where([data-design="siebdruck"]) .leiste-kopf__link::after { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .leiste-rahmen { background: rgba(24,20,18,.08); border: 2.5px solid var(--sd-schwarz); border-bottom: 0; border-radius: 0; } :where([data-design="siebdruck"]) .leiste { border-bottom: 9px solid var(--sd-schwarz); box-shadow: 0 5px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .leiste__fach { border-left-color: rgba(24,20,18,.35); } :where([data-design="siebdruck"]) .leiste__fach span { color: var(--sd-schwarz); font-weight: 700; } :where([data-design="siebdruck"]) .leiste__ruecken { --r-grund: var(--sd-schwarz); --r-rand: var(--sd-schwarz); --r-text: var(--sd-papier); } :where([data-design="siebdruck"]) .leiste__ruecken--b { --r-grund: var(--sd-weiss); --r-rand: var(--sd-schwarz); --r-text: var(--sd-schwarz); } :where([data-design="siebdruck"]) .leiste__ruecken--c { --r-grund: var(--sd-rot); --r-rand: var(--sd-schwarz); --r-text: var(--sd-papier); } :where([data-design="siebdruck"]) .leiste__ruecken--d { --r-grund: var(--sd-rot-tief); --r-rand: var(--sd-schwarz); --r-text: var(--sd-papier); } :where([data-design="siebdruck"]) .leiste__ruecken a, :where([data-design="siebdruck"]) .leiste__geist { background: var(--r-grund); border-radius: 0; } :where([data-design="siebdruck"]) .leiste__ruecken a:hover, :where([data-design="siebdruck"]) .leiste__ruecken a:focus-visible { border-top-color: var(--sd-rot); } :where([data-design="siebdruck"]) .leiste__titel { font-family: var(--sd-anton); font-weight: 400; letter-spacing: .06em; font-size: .7rem; } :where([data-design="siebdruck"]) .leiste__luecke { border: 2px dashed var(--sd-schwarz); border-bottom: 0; border-radius: 0; background: repeating-linear-gradient(135deg, rgba(24,20,18,.28) 0 4px, transparent 4px 9px); box-shadow: none; } :where([data-design="siebdruck"]) .leiste__luecke::before { border-top-color: var(--sd-rot); filter: none; } :where([data-design="siebdruck"]) .hg { --hg-grund: var(--sd-schwarz); --hg-text: var(--sd-papier); --hg-akzent: var(--sd-ocker); --hg-linie: rgba(241,232,211,.25); background: url(/c2/sd/poren.webp) 0 0 / 420px, var(--hg-grund); border-radius: 0; box-shadow: 0 0 0 2px var(--sd-schwarz), 2.4cqi 2.4cqi 0 var(--sd-rot); } :where([data-design="siebdruck"]) .hg::before { background: radial-gradient(circle at 50% 50%, transparent 0 44.5%, rgba(241,232,211,.08) 45.3%, transparent 46.6%); } :where([data-design="siebdruck"]) .hg--b { --hg-grund: var(--sd-weiss); --hg-text: var(--sd-schwarz); --hg-akzent: var(--sd-rot); } :where([data-design="siebdruck"]) .hg--c { --hg-grund: var(--sd-rot); --hg-text: var(--sd-papier); --hg-akzent: var(--sd-schwarz); } :where([data-design="siebdruck"]) .hg--d { --hg-grund: var(--sd-rot-tief); --hg-text: var(--sd-papier); --hg-akzent: var(--sd-ocker); } :where([data-design="siebdruck"]) .hg--b::before, :where([data-design="siebdruck"]) .hg--d::before { background: radial-gradient(circle at 50% 50%, transparent 0 44.5%, rgba(24,20,18,.08) 45.3%, transparent 46.6%); } :where([data-design="siebdruck"]) .hg--b, :where([data-design="siebdruck"]) .hg--c { box-shadow: 0 0 0 2px var(--sd-schwarz), 2.4cqi 2.4cqi 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .hg__nr { background: var(--sd-rot); color: var(--sd-papier); font-family: var(--sd-anton); font-weight: 400; } :where([data-design="siebdruck"]) .hg--c .hg__nr, :where([data-design="siebdruck"]) .hg--d .hg__nr { background: var(--sd-schwarz); } :where([data-design="siebdruck"]) .hg--d { box-shadow: 0 0 0 2px var(--sd-schwarz), 2.4cqi 2.4cqi 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .hg__jahr, :where([data-design="siebdruck"]) .hg__unter, :where([data-design="siebdruck"]) .hg__fuss { font-family: var(--font-mono); font-weight: 700; } :where([data-design="siebdruck"]) .hg__kuenstler { font-family: var(--sd-schablone); font-weight: 900; letter-spacing: .2em; } :where([data-design="siebdruck"]) .hg__titel { font-family: var(--sd-anton); font-weight: 400; line-height: .92; } :where([data-design="siebdruck"]) .hg__nr-gross { font-family: var(--sd-anton); font-weight: 400; opacity: .7; } :where([data-design="siebdruck"]) .hg__sticker { background: var(--sd-weiss); box-shadow: 1.2cqi 1.2cqi 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .hg__sticker::after { background: rgba(241,232,211,.8); box-shadow: none; } :where([data-design="siebdruck"]) .vinyl { box-shadow: 0 0 0 2px var(--sd-schwarz), 2cqi 2cqi 0 rgba(24,20,18,.35); } :where([data-design="siebdruck"]) .vinyl__dreh { background: radial-gradient(circle closest-side, transparent 0 34.5%, #3a302a 35% 36.4%, transparent 36.8% 63%, rgba(0,0,0,.5) 63.4% 64.2%, transparent 64.6% 98%, #3a302a 99%), repeating-radial-gradient(circle closest-side, #181412 0 .7%, #2a231f .7% 1.3%), #181412; } :where([data-design="siebdruck"]) .vinyl__bogen, :where([data-design="siebdruck"]) .vinyl__nr, :where([data-design="siebdruck"]) .vinyl__klein { font-family: var(--sd-anton); font-weight: 400; } :where([data-design="siebdruck"]) .vinyl__ritz { fill: #8b7d68; } :where([data-design="siebdruck"]) .album-hand { color: var(--sd-schwarz); background: var(--sd-papier); padding: .25rem .5rem .2rem; box-shadow: 3px 3px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .album-titelblock h1 { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-doppel { color: var(--sd-schwarz); border: 2px solid var(--sd-schwarz); border-radius: 0; font-weight: 700; } :where([data-design="siebdruck"]) .album-untertitel { color: #3d2d18; font-weight: 700; } :where([data-design="siebdruck"]) .album-titelblock .lead { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-kopf .huelle__werte div { background: var(--sd-weiss); } :where([data-design="siebdruck"]) .album-kopf .bu__zeile { color: #3d2d18; } :where([data-design="siebdruck"]) .album-kopf .reiter { background: var(--sd-weiss); } :where([data-design="siebdruck"]) .album-kopf .reiter--rot { background: var(--sd-rot); } :where([data-design="siebdruck"]) .album-innen { box-shadow: 10px 10px 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-rueck { box-shadow: 10px 10px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .album-rueck__kopf { border-bottom: 5px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-steckbrief { background-image: url(/c2/sd/raster-rot.webp); } :where([data-design="siebdruck"]) .album-steckbrief:hover { border-color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-steckbrief__zahl { font-family: var(--sd-slab); font-weight: 400; font-size: 1.25rem; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-steckbrief dl > div { border-top: 1.5px solid #d6c7a4; } :where([data-design="siebdruck"]) .album-steckbrief dt { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .album-steckbrief dd { color: var(--sd-schwarz); font-family: var(--font-lesen); } :where([data-design="siebdruck"]) .album-steckbrief dd strong, :where([data-design="siebdruck"]) .album-steckbrief dd em, :where([data-design="siebdruck"]) .album-steckbrief dd a { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .album-platte__stempel { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .album-platte__kopf h3 { font-family: var(--sd-slab); } :where([data-design="siebdruck"]) .spuren { border-top: 3px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .spur__meta b { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .album-stand { color: var(--color-stahl); font-weight: 700; } :where([data-design="siebdruck"]) .weiter__karte { background: var(--sd-weiss); border: 2.5px solid var(--sd-schwarz); border-radius: 0; transition: transform .3s var(--sd-ease), box-shadow .3s var(--sd-ease); } :where([data-design="siebdruck"]) a.weiter__karte:hover, :where([data-design="siebdruck"]) a.weiter__karte:focus-visible { border-color: var(--sd-schwarz); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .weiter__titel { font-family: var(--sd-slab); font-weight: 400; font-size: 1.2rem; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .weiter__meta { color: var(--color-stahl); font-weight: 700; } :where([data-design="siebdruck"]) .weiter__karte--leer { background: transparent; border-style: dashed; } :where([data-design="siebdruck"]) .weiter__regal { border: 2.5px dashed var(--sd-schwarz); border-radius: 0; font-family: var(--sd-anton); font-weight: 400; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .weiter__regal:hover { border-color: var(--sd-rot); } :where([data-design="siebdruck"]) .weiter__regal-symbol { border-bottom-color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .weiter__regal-symbol i { background: var(--sd-schwarz); border-top-color: var(--sd-rot); } :where([data-design="siebdruck"]) .weiter__regal-symbol i:nth-child(3), :where([data-design="siebdruck"]) .weiter__regal-symbol i:nth-child(4) { background: var(--sd-weiss); border: 1.5px solid var(--sd-schwarz); } /* ── 10. Rosen-Timeline: Linolschnitt in Druckfarben ───────────────────── */ :where([data-design="siebdruck"]) .rose-buehne::before { content: none; } :where([data-design="siebdruck"]) .rose-kopf h1 { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose-kopf__phasen .reiter { background: var(--sd-weiss); } :where([data-design="siebdruck"]) .rose-kopf__intro { color: #3b3229; } :where([data-design="siebdruck"]) .rose-kopf__intro a, :where([data-design="siebdruck"]) .rose-kopf__wegweiser a { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose-kopf__wegweiser a { border-bottom: 2.5px solid var(--sd-rot); font-weight: 700; } :where([data-design="siebdruck"]) .rose-kopf__bluete::before { background: none; } :where([data-design="siebdruck"]) .bluete ellipse { fill: var(--sd-ocker); transform: translate(10px, -8px); transform-box: fill-box; } :where([data-design="siebdruck"]) .bluete .bl-blatt > path:first-child { fill: var(--sd-schwarz); } :where([data-design="siebdruck"]) .bluete .bl-blatt > path:nth-child(2) { fill: var(--sd-rot); opacity: .5; } :where([data-design="siebdruck"]) .bluete .bl-blatt:nth-of-type(n+17) > path:first-child { fill: var(--sd-rot); } :where([data-design="siebdruck"]) .bluete .bl-blatt:nth-of-type(n+17) > path:nth-child(2) { fill: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .bluete [stroke="#d01e1c"] { stroke: var(--sd-rot); } :where([data-design="siebdruck"]) .bluete .bl-blatt:nth-of-type(n+17) [stroke], :where([data-design="siebdruck"]) .bluete [stroke="#f84c41"] { stroke: var(--sd-papier); } :where([data-design="siebdruck"]) .bluete .bl-kelch { fill: var(--sd-schwarz); } :where([data-design="siebdruck"]) .bluete .bl-hals { stroke: var(--sd-rot); stroke-width: 8; stroke-opacity: .85; } :where([data-design="siebdruck"]) .bluete .bl-hals + path { stroke: var(--sd-schwarz); stroke-width: 3; opacity: 1; transform: translateX(-1px); } :where([data-design="siebdruck"]) .rose__karte { background: var(--sd-weiss) url(/c2/sd/raster-ocker.webp) right top / 170px no-repeat; border: 2.5px solid var(--sd-schwarz); border-radius: 0; box-shadow: 7px 7px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .rose__jahr--wurzel .rose__karte { background-color: var(--sd-papier-tief); border-color: var(--sd-schwarz); box-shadow: 7px 7px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .rose__kopf .c2-tag { font-size: 1.1rem; } :where([data-design="siebdruck"]) .rose__anzahl { color: var(--color-stahl); font-weight: 700; } :where([data-design="siebdruck"]) .rose__e { border-top: 1.5px solid #ddd0b0; } :where([data-design="siebdruck"]) .rose__e time { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .rose__e time.rose__ohne { color: var(--color-stahl); } :where([data-design="siebdruck"]) .rose__e p { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__e p a, :where([data-design="siebdruck"]) .rose__moment-text a, :where([data-design="siebdruck"]) .rose__recht a { color: var(--sd-schwarz); text-decoration-color: var(--sd-rot); text-decoration-thickness: 1.5px; } :where([data-design="siebdruck"]) .rose__e p a:hover { color: var(--sd-rot); } :where([data-design="siebdruck"]) .rose__e--wichtig { background: linear-gradient(90deg, rgba(227,161,43,.38), transparent 80%); box-shadow: inset 6px 0 0 var(--sd-rot); } :where([data-design="siebdruck"]) .rose__e--wichtig p { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__mehr { border-top: 1.5px dashed var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__mehr summary { color: var(--sd-schwarz); font-weight: 700; } :where([data-design="siebdruck"]) .rose__mehr summary::before { border: 2px solid var(--sd-rot); color: var(--sd-rot); } :where([data-design="siebdruck"]) .rose__recht { background: var(--sd-papier); border: 2px solid var(--sd-schwarz); border-left: 7px solid var(--sd-rot); color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__recht b { color: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .rose__phase h2 { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__phase-anzahl { color: var(--color-stahl); font-weight: 700; } :where([data-design="siebdruck"]) .rose__gross { font-family: var(--sd-anton); font-weight: 400; color: var(--sd-schwarz); text-shadow: .045em .035em 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .rose__moment--still .rose__gross { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__moment--geburt .rose__gross { color: var(--sd-rot); text-shadow: .045em .035em 0 var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__moment-zeit { color: var(--sd-rot-tief); font-weight: 700; } :where([data-design="siebdruck"]) .rose__moment-text { color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__moment--still .rose__moment-links, :where([data-design="siebdruck"]) .rose__moment--still .rose__moment-rechts { border-top: 4px solid var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose__platte::before { background: url(/c2/sd/poren.webp) 0 0 / 512px, var(--sd-schwarz); box-shadow: 0 -6px 0 var(--sd-rot) inset, 0 6px 0 var(--sd-ocker); } :where([data-design="siebdruck"]) .rose__riss { background-image: url("/c2/sd/riss.svg"); } :where([data-design="siebdruck"]) .rose-marke { font-family: var(--sd-anton); font-weight: 400; font-size: 1.25rem; color: var(--sd-schwarz); } :where([data-design="siebdruck"]) .rose-marke--wurzel { color: var(--sd-rot-tief); } html:where([data-design="siebdruck"]):not(.rose-bereit) .rose__liste::before { background: var(--sd-schwarz); } /* ── 11. Fuß ───────────────────────────────────────────────────────────── */ :where([data-design="siebdruck"]) .c-fuss { border-top: 7px solid var(--sd-rot); color: var(--color-stahl); } :where([data-design="siebdruck"]) .c-fuss a:hover { color: var(--sd-ocker); } :where([data-design="siebdruck"]) .c-fuss .c-marke { color: var(--sd-papier); text-shadow: 2px 2px 0 var(--sd-rot); } :where([data-design="siebdruck"]) .c-fuss .c-mega__titel { color: var(--sd-ocker); } :where([data-design="siebdruck"]) .c-fuss .linie { border-top: 2px solid var(--sd-papier); } :where([data-design="siebdruck"]) .c-fuss li a { font-family: var(--sd-kond); font-weight: 600; font-size: 1rem; color: var(--color-stahl-hell); } :where([data-design="siebdruck"]) .sd-fussmarke { padding: 2.6rem clamp(16px, 3vw, 40px) 0; overflow: hidden; text-align: center; white-space: nowrap; font: 400 clamp(54px, 14.2vw, 220px)/.82 var(--sd-anton); text-transform: uppercase; letter-spacing: .005em; color: var(--sd-papier); position: relative; isolation: isolate; } :where([data-design="siebdruck"]) .sd-fussmarke span { position: relative; display: inline-block; isolation: isolate; } :where([data-design="siebdruck"]) .sd-fussmarke span::after { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--sd-rot); transform: translate(.035em, .03em); } :where([data-design="siebdruck"]) .sd-kontrolle { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding-bottom: 2rem; font: 400 12.5px/1.4 var(--font-mono); color: #c4b597; } :where([data-design="siebdruck"]) .sd-kontrolle__farben { display: inline-flex; } :where([data-design="siebdruck"]) .sd-kontrolle__farben i { display: inline-block; width: 24px; height: 16px; } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(1) { background: var(--sd-papier); } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(2) { background: var(--sd-rot); } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(3) { background: var(--sd-rot-tief); } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(4) { background: var(--sd-orange); } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(5) { background: var(--sd-ocker); } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(6) { background: var(--sd-gelb); } :where([data-design="siebdruck"]) .sd-kontrolle__farben i:nth-child(7) { background: radial-gradient(circle, var(--sd-papier) 0 1.6px, transparent 2px) 0 0 / 6px 6px; outline: 1px solid var(--sd-papier); outline-offset: -1px; } :where([data-design="siebdruck"]) .sd-kontrolle .sd-wahl { margin-left: auto; color: var(--sd-papier); } @media (max-width: 640px) { :where([data-design="siebdruck"]) .sd-kontrolle .sd-wahl { margin-left: 0; } } /* ── 12. Druckvorgang (nur mit Bewegung: html.sd-bewegt) ───────────────── */ html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat__ocker { clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--sd-ease) .1s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat__band { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--sd-ease) .45s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat__raster { opacity: 0; transition: opacity 1s ease .9s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat__name { opacity: 0; transition: opacity .5s ease 1.2s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-ebene-bild--papier { opacity: 0; transform: scale(.97); transition: opacity .5s ease .5s, transform .8s var(--sd-ease) .5s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-ebene-bild--rot { opacity: 0; transform: translate(46px, -30px); transition: opacity .35s ease .8s, transform 1s var(--sd-ease) .8s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-ebene-bild--schwarz { opacity: 0; transform: translate(-36px, 24px); transition: opacity .35s ease 1.15s, transform 1s var(--sd-ease) 1.15s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-zeile { clip-path: inset(-20% 100% -30% -3%); transition: clip-path .8s var(--sd-ease); } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-zeile:nth-child(1) { transition-delay: .25s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-zeile:nth-child(2) { transition-delay: .45s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-zeile:nth-child(3) { transition-delay: .65s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-versatz::after { transform: translate(.4em, -.2em); opacity: 0; transition: transform 1s var(--sd-ease) 1.3s, opacity .4s ease 1.3s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat :is(.sd-kicker, .sd-plakat__lede, .sd-jahre, .sd-plakat__suche) { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--sd-ease); } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-kicker { transition-delay: .1s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-plakat__lede { transition-delay: .9s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-jahre { transition-delay: 1.05s; } html:where([data-design="siebdruck"]).sd-bewegt .sd-plakat .sd-plakat__suche { transition-delay: 1.2s; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-plakat__ocker { clip-path: inset(0); } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-plakat__band { transform: none; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-plakat__raster { opacity: .85; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-plakat__name { opacity: 1; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-ebene-bild--papier { opacity: 1; transform: none; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-ebene-bild--rot { opacity: 1; transform: translate(var(--vx), var(--vy)); } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt .sd-ebene-bild--schwarz { opacity: 1; transform: none; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt.sd-plakat .sd-zeile { clip-path: inset(-20% -6% -30% -3%); } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt.sd-plakat .sd-versatz::after { transform: translate(.05em, .04em); opacity: 1; } html:where([data-design="siebdruck"]).sd-bewegt .gedruckt.sd-plakat :is(.sd-kicker, .sd-plakat__lede, .sd-jahre, .sd-plakat__suche) { opacity: 1; transform: none; } :where([data-design="siebdruck"]) .sd-ruhig .sd-ebene-bild--rot { transition: transform .5s var(--sd-ease); } /* Überschriften auf den Unterseiten: zweite Farbe rakelt nach */ html:where([data-design="siebdruck"]).sd-bewegt .sd-ebenen:not(.sd-gedruckt) > .sd-ebene { transform: translate(.32em, -.14em); opacity: 0; } /* Bögen beim Scrollen: Abzüge kommen nacheinander aufs Papier */ html:where([data-design="siebdruck"]).sd-bewegt [data-sd-druck] > * { opacity: 0; transform: translate(16px, 12px); transition: opacity .6s ease, transform .8s var(--sd-ease); transition-delay: calc(var(--i, 0) * 70ms); } html:where([data-design="siebdruck"]).sd-bewegt [data-sd-druck].gedruckt > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :where([data-design="siebdruck"]) .sd-ebene, :where([data-design="siebdruck"]) .sd-plakat *, :where([data-design="siebdruck"]) [data-sd-druck] > * { transition: none !important; } } /* schmale Handys: Kopf ohne Stempel, damit der Menüknopf Platz hat */ @media (max-width: 460px) { :where([data-design="siebdruck"]) .c-marke__reiter { display: none; } :where([data-design="siebdruck"]) .c-marke { font-size: 1.3rem; } }