/* ═══════════════════════════════════════════════════════════════ ATELIER MÖRTH — STACHEL (Neuaufbau v2, Stand 2026-09-08) Quelle Texte : Trello "Website Content Papa" → Liste "Stachel" (6 Karten, Beschreibungen 1:1 übernommen) Quelle Bilder: Google Drive "Stachel" (Unterordner = Überschrift) WICHTIG — Abgrenzung zur Startseite: Die Startseite verwendet ausschliesslich .banner-* (AM Banner) und .quote-* (AM Zitat). Hier wird KEINE dieser Klassen und kein Startseiten-Widget verwendet. Alles ist st- praefixiert. LAYOUT-ENTSCHEIDUNG (08.09.): Die Produktfotos sind Freisteller auf schwarzem Samt mit sehr viel Negativraum. Gemessen (3x3-Raster, Helligkeit + Standardabweichung) hat mindestens ein Drittel der Flaeche kein Motiv. Deshalb liegt der Text bei diesen Bildern DARAUF (.st-stage) statt darunter, und die Vergleichsbilder ueberlappen als Inset (.st-stage-inset), statt in einer Spalte gestapelt zu werden. Positionsklasse je Bild aus der Messung abgeleitet: --right Motiv links (1_1 Stab, 4_1 Abschluss, 6 Gewinde, 3_1 Henkelsaite) --left Motiv mittig (2_1 Spitze) --top Motiv unten (2_3 Schutzkappe, 2_1 Auflageflaeche) --bottom Motiv oben (Stachelbirne 1) Helle Bilder (7 Sattelflaeche) bekommen KEIN Overlay, sondern .st-split — dort waere weisser Text nicht lesbar. Jede der 6 SECTIONS wird spaeter genau EIN Elementor-Widget: 1 am_stachel_hero Intro 2 am_stachel_stab Der Stachelstab 3 am_stachel_birne Die Stachelbirne 4 am_stachel_reibahle Die Reibahle 5 am_stachel_ausstattung Pro · Individual · Exquisite 6 am_stachel_garantie Leistungsgarantie ═══════════════════════════════════════════════════════════════ */ /* ═══ GEKAPSELT FUER WORDPRESS ══════════════════════════════════ Im Mockup lagen Reset und Variablen global auf *, :root, html, body und img. In WordPress wuerde das Theme, Header, Footer und jedes andere Widget mitreissen. Alles haengt deshalb an .am-stachel — dem Wrapper, den jedes Stachel-Widget um seine Ausgabe legt. html/body-Regeln (scroll-behavior, overflow-x, Seitenhintergrund) sind ersatzlos entfallen: die gehoeren dem Theme. */ .am-stachel *, .am-stachel *::before, .am-stachel *::after { box-sizing: border-box; margin: 0; padding: 0; } .am-stachel { --black: #000000; --dark-grey: #1E1E1E; --panel-grey: #141414; /* Seitentoene: warmes Fast-Schwarz statt #000 (weniger Loch), warmes Off-White statt #FFF (weniger Blendung). */ --ink: #040405; /* Seitenschwarz, unveraendert wie vor dem 25.09. Nur der Stachelstab-Auftakt bekommt reines Schwarz, siehe --ink-0. */ --ink-2: #060608; --ink-0: #000000; /* Pitch black — ausschliesslich fuer den Grund "Reines Schwarz" (Kundenvorgabe 25.09. fuer die Stachelstab-Sektion). */ --paper: #F2F1EE; --paper-2: #E9E7E3; --corp-grey: #949494; --light-grey: #C0C0C0; --white-grey: #F6F6F6; --white: #FFFFFF; --accent: #009EED; --corp-blue: #9BC8E6; --font-hand: 'Kalam', 'Bradley Hand', cursive; --font-serif: 'Georgia', 'Times New Roman', serif; --font-sans: 'Helvetica Neue', Arial, sans-serif; --shell: 1280px; --measure: 66ch; /* Die gemeinsame Textspalte MUSS in px stehen, nicht in ch: ch misst in der Schrift des jeweiligen Elements. 66ch sind beim Fliesstext (1rem sans) 587px, bei .st-block-title (2.1rem Georgia) aber ueber 1100px — also breiter als der 980px-Block, womit die Begrenzung dort wirkungslos war und die Ueberschrift links stehen blieb, waehrend der Text mittig sass. */ --text-col: 980px; /* = Blockbreite. Text UND Medien stehen auf dieser einen Breite: gleiche Kante links UND rechts, ohne dass der Inhalt schmaeler wird. 587px war zu schmal. */ } .am-stachel { font-family: var(--font-sans); font-size: 1rem; /* hebt font-size:0 des Containers wieder auf */ -webkit-font-smoothing: antialiased; } .am-stachel img { max-width: 100%; display: block; } .st-shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; } /* ── Section-Huellen ──────────────────────────────────────────── */ .st-section { padding: 112px 0; scroll-margin-top: 7rem; } .st-section--black { --sec-bg: var(--ink); background: var(--sec-bg); color: var(--white); } .st-section--panel { --sec-bg: var(--ink-2); background: var(--sec-bg); color: var(--white); } /* ══ HELLE SECTION ════════════════════════════════════════════ Die Seite ist durchgehend schwarz — ueber 30.000px Hoehe wird das erdrueckend. Die Reibahle-Section ist der richtige Ort zum Aufhellen: rein technischer Text, keine Produktfotos auf schwarzem Samt, die dagegen arbeiten wuerden. Rhythmus dadurch: schwarz → anthrazit → schwarz → HELL → schwarz → anthrazit. Umgestellt werden nicht nur Hintergrund und Textfarbe, sondern jedes Element, das auf Weiss-auf-Schwarz ausgelegt war. */ .st-section--light { background: var(--paper); color: #16181A; } /* Zweiter Hellton — erzeugt den Wechsel zwischen den hellen Sections, ohne dass es unruhig wird. */ .st-section--light.st-section--paper { background: var(--paper-2); } /* ══ HELLE FELDER IN DER DUNKLEN STRECKE ══════════════════════ Die Seite kippte bisher genau EINMAL: 16.230px dunkel, dann 8.450px hell. Das zerfaellt in zwei Haelften — hell kam erst nach zwei Dritteln der Seite. Deshalb bekommen jetzt auch einzelne Bloecke innerhalb der dunklen Sections den hellen Grund. Bedingung, nach der ausgewaehlt wurde: NUR Bloecke ohne randloses Bild. Ein .st-stage--bleed liegt fensterbreit und bringt sein eigenes Fotoschwarz mit — auf hellem Grund entstuende oben und unten die harte Rechteckkante, die im ganzen Entwurf vermieden wird. Eingebettete Bilder (Vergleiche, Beschriftungsbilder) haben Rahmen und Radius und stehen auch auf hell sauber. Rhythmus danach (Hoehen in px): 4842 dunkel · 504 hell · 2159 dunkel · 2504 hell · 2434 dunkel · 914 hell · 1456 dunkel · 8890 hell */ .st-block.st-field--light { position: relative; isolation: isolate; /* damit ::before ueber dem Section-Grund liegt */ background: none; /* der Grund kommt aus ::before, fensterbreit */ border-top: none; padding: 104px 0; margin-top: 0; } .st-block.st-field--light::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw; /* Oben und unten weich aus dem Dunkel auftauchen. Viele Stuetzstellen aus demselben Grund wie beim grossen Uebergang: wenige erzeugen auf der Strecke zwischen Fast-Schwarz und Off-White sichtbares Banding. */ background: linear-gradient(to bottom, rgba(242,241,238,0) 0px, rgba(242,241,238,.10) calc(var(--fade) * .16), rgba(242,241,238,.28) calc(var(--fade) * .32), rgba(242,241,238,.52) calc(var(--fade) * .50), rgba(242,241,238,.76) calc(var(--fade) * .68), rgba(242,241,238,.92) calc(var(--fade) * .84), rgba(242,241,238,1) var(--fade), rgba(242,241,238,1) calc(100% - var(--fade)), rgba(242,241,238,.92) calc(100% - var(--fade) * .84), rgba(242,241,238,.76) calc(100% - var(--fade) * .68), rgba(242,241,238,.52) calc(100% - var(--fade) * .50), rgba(242,241,238,.28) calc(100% - var(--fade) * .32), rgba(242,241,238,.10) calc(100% - var(--fade) * .16), rgba(242,241,238,0) 100%); } /* Der Block IST hier das .st-section--light-Element, nicht sein Nachfahre — die Trennlinie muss deshalb eigens gesetzt werden. */ .st-block.st-field--light + .st-block { border-top-color: rgba(255,255,255,.08); } /* ══ DER EINE UEBERGANG ═══════════════════════════════════════ Die Seite wechselt genau einmal von dunkel nach hell: nach der Stachelbirne, wo das letzte Foto endet. Ein harter Schnitt wirkt dort wie ein Fehler, deshalb taucht die helle Haelfte ueber eine lange Strecke aus dem Dunkel auf. Zwei Verlaeufe uebereinander statt einem: der erste bringt die Farbe, der zweite (mit weicherer Kurve) nimmt die sichtbare Kante in der Mitte weg, die ein einzelner linearer Verlauf zwischen so weit auseinanderliegenden Toenen immer erzeugt. */ .st-section.st-section--enter { padding-top: 420px; /* EIN Verlauf mit vielen Stuetzstellen (S-Kurve) statt zweier uebereinander. Zwei Ebenen hatten direkt unter der Kante zusaetzlich abgedunkelt und so eine sichtbare Stufe erzeugt; wenige Stuetzstellen wiederum erzeugen Banding auf der langen Strecke zwischen Fast-Schwarz und Off-White. */ background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,.97) 40px, rgba(0,0,0,.90) 80px, rgba(0,0,0,.78) 120px, rgba(0,0,0,.62) 160px, rgba(0,0,0,.45) 200px, rgba(0,0,0,.29) 240px, rgba(0,0,0,.16) 280px, rgba(0,0,0,.06) 320px, rgba(0,0,0,0) 365px); background-repeat: no-repeat; } @media (max-width: 900px) { .st-section.st-section--enter { padding-top: 300px; } } .st-section--light .st-lead-title, .st-section--light .st-block-title { color: #101214; } .st-section--light .st-lead-body, .st-section--light .st-copy p, .st-section--light .st-copy li { color: #43484D; } .st-section--light .st-copy strong, .st-section--light .st-lead-body strong, .st-section--light .st-guarantee-card p strong { color: #101214; } .st-section--light .st-kicker, .st-section--light .st-block-kicker { color: #005E8C; } .st-section--light .st-block { border-top-color: rgba(0,0,0,.11); } .st-section--light .st-num { color: rgba(0,0,0,.20); } .st-section--light .st-note { border-left-color: rgba(0,0,0,.22); } .st-section--light .st-note-head { color: #5A6066; } .st-section--light .st-note p { color: #5A6066; } .st-section--light .st-alt { border-bottom-color: rgba(0,119,179,.65); } .st-section--light .st-variant { background: #FFFFFF; border-color: rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0,0,0,.05); } .st-section--light .st-variant--active { border-color: rgba(0,119,179,.4); background: #FFFFFF; box-shadow: 0 2px 14px rgba(0,119,179,.13); } .st-section--light .st-variant-head { color: #6B7075; } .st-section--light .st-variant--active .st-variant-head { color: #0077B3; } .st-section--light .st-missing { border-color: rgba(0,119,179,.4); background: rgba(0,119,179,.05); } .st-section--light .st-missing-head { color: #016096; } .st-section--light .st-missing-file { color: #0F6E9E; } .st-section--light .st-missing-hint { color: #5E646A; } /* WICHTIG: Text, der AUF einem Bild liegt, bleibt hell — auch in einer hellen Section. Die Buehnenfotos sind dunkel, die Hell-Regeln oben duerfen dort nicht durchschlagen. */ .st-section--light .st-stage-text .st-block-title { color: var(--white); } .st-section--light .st-stage-text .st-block-kicker { color: var(--corp-blue); } .st-section--light .st-stage-text p, .st-section--light .st-stage-text .st-copy p { color: var(--light-grey); } .st-section--light .st-stage-text .st-copy strong, .st-section--light .st-stage-text strong { color: var(--white); } .st-section--light .st-stage-text .st-alt { border-bottom-color: rgba(0,158,237,.6); } /* Labels an Vergleichs- und Panoramabildern */ .st-section--light .st-compare-item--good .st-compare-label { color: #005E8C; } .st-section--light .st-compare-item--bad .st-compare-label { color: #63696F; } .st-section--light .st-compare-item--bad .st-compare-label::before { background: #9AA0A6; } .st-section--light .st-compare-item img { border-color: rgba(0,0,0,.12); } .st-section--light .st-compare-item--good img { border-color: rgba(0,119,179,.35); } .st-section--light .st-band-label { color: #005E8C; } /* Bildnachweis */ .st-section--light .st-sources { border-top-color: rgba(0,0,0,.11); } .st-section--light .st-sources summary { color: #6B7075; } .st-section--light .st-sources summary:hover { color: #43484D; } .st-section--light .st-sources li { color: #6B7075; } /* Garantie-Karten */ .st-section--light .st-guarantee-card { background: #FFFFFF; border-color: rgba(0,0,0,.09); box-shadow: 0 1px 3px rgba(0,0,0,.05); } .st-section--light .st-guarantee-num { color: #0077B3; } .st-section--light .st-guarantee-card h3 { color: #101214; } .st-section--light .st-guarantee-card p { color: #43484D; } /* ── Section-Kopf ─────────────────────────────────────────────── */ .st-lead { max-width: 820px; margin: 0 auto 76px; text-align: center; } /* Section-Auftakt: ein einzelner kleiner Kicker im Schwarz wirkte unfertig. Eine feine, nach unten auslaufende Haarlinie gibt dem Einstieg Praesenz und wiederholt sich als Motiv in jeder Section. */ .st-lead::before { content: ''; display: block; width: 1px; height: 58px; margin: 0 auto 26px; background: linear-gradient(to bottom, transparent, var(--accent)); } .st-section--light .st-lead::before { background: linear-gradient(to bottom, transparent, #0077B3); } .st-kicker { display: inline-block; font-size: .95rem; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 18px; } /* Steht der Kicker allein (ohne Ueberschrift), darf er nicht wie ein vergessenes Label wirken — etwas mehr Gewicht und Luft. */ .st-lead > .st-kicker:only-child { font-size: .82rem; letter-spacing: 7px; margin-bottom: 0; } .st-lead-title { font-family: var(--font-serif); font-weight: normal; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.18; letter-spacing: -.012em; /* grosse Serifen wirken enger gesetzt ruhiger */ color: var(--white); /* NICHT vom body erben — der ist jetzt hell */ } .st-lead-title--chapter { font-family: var(--font-sans); font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.05; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 18px; } .st-lead-title--chapter + .st-lead-title--sub { margin-top: 10px; } .st-lead-title--sub { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .st-section--light .st-lead-title--chapter { color: #0077B3; } .st-lead-body { margin-top: 28px; font-size: 1.05rem; line-height: 1.8; color: var(--light-grey); } .st-lead-body p + p { margin-top: 18px; } /* ── Hero (Section 1) ─────────────────────────────────────────── */ /* Kundenvorgabe 2026-09-10: Titel UND Einleitung liegen AUF dem Bild. Vorher standen sie in zwei schwarzen Baendern (263px oben, 528px unten) ueber und unter dem Foto — das las sich wie drei getrennte Bloecke statt wie ein Auftakt. Die Trello-Regieanweisung ("Foto zwischen Ueberschrift und Text") ist damit bewusst ueberstimmt; das Motiv hat rechts genug freie schwarze Flaeche fuer beides. Aufbau bewusst identisch zu .st-stage, damit das Hero-Widget spaeter dieselben Felder bekommt wie die anderen Buehnen. */ .st-hero { position: relative; padding: 0; background: var(--ink); --gutter: max(7%, calc((100% - 1232px) / 2)); } .st-hero-figure { position: relative; margin: 0; isolation: isolate; } .st-hero-media img { width: 100%; height: auto; display: block; /* Banner gedeckelt (Kundenwunsch 25.09.: "kann man etwas kuerzen"). Der Textcontainer zieht Kopf und Fliesstext per space-between auseinander, passt sich also von selbst an. */ max-height: 74vh; object-fit: cover; object-position: center 46%; } /* Abdunkelung jetzt von OBEN (dort sitzt der Text) statt von rechts, plus schmale Blende oben/unten, damit die Bildkante nicht als Rechteck sichtbar wird. */ .st-hero-figure::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 24%, rgba(0,0,0,0) 42%), linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.40) 22%, rgba(0,0,0,0) 40%), linear-gradient(to bottom, var(--ink) 0, rgba(0,0,0,0) 7%), /* Fussblende deutlich laenger (25.09.): seit das Banner gedeckelt ist, schneidet object-fit mitten durchs Motiv statt an der vom Foto selbst mitgebrachten dunklen Kante. Ueber 6% blieb dadurch ein sichtbarer Absatz zum folgenden Abschnitt. */ linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,.94) 5%, rgba(0,0,0,.72) 10%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.18) 19%, rgba(0,0,0,0) 23%); } /* Der Text steht auf DERSELBEN 980er-Spalte wie der Rest der Seite, mittig — nicht in einer schmalen rechten Spalte (die war bei 1288px Fensterbreite nur ~300px breit). Gemessen im Motiv (Raster 20x14 ueber Stachel_Intro_desktop.webp): Cello sitzt in den linken 20%, der Stachelstab liegt auf einer Zeile bei y=42%. Alles rechts von x=22% und oberhalb von y=38% hat Helligkeitswerte von 1-6 (von 255), also praktisch reines Schwarz. Die Spalte (24%-75%) liegt vollstaendig darin; top:8% haelt den Textblock ueber dem Stab. */ .st-hero-text { position: absolute; z-index: 2; left: 0; right: 0; margin-inline: auto; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding-block: 7% 6%; width: min(var(--text-col), calc(100% - 48px)); } .st-hero-title { font-family: var(--font-serif); font-weight: normal; font-size: clamp(2.1rem, 3.4vw, 3.3rem); line-height: 1.12; letter-spacing: -.018em; color: var(--white); margin: 0 0 22px; } .st-hero-text p { font-size: 1.02rem; line-height: 1.8; color: var(--light-grey); /* Absatz schmaler als der Titel: zentrierter Satz ueber die volle 980er-Spalte waere sehr breit, und die langen Zeilen wuerden bei Fensterbreiten unter ~1750px links in die Cello-Zarge laufen (Zarge = linke 20% des Motivs). 640px halten den Satz frei. */ max-width: 700px; margin: 0 auto; text-align: center; } .st-hero-text .st-hero-lead p { font-size: clamp(1.05rem, 1.35vw, 1.28rem); } /* Schwarze Blende an der Bildkante — oben, unten oder beides. Blendet auf var(--ink), also exakt den Seitengrund, damit das Bild in den Hintergrund laeuft statt mit harter Linie zu enden. Beide Kanten teilen sich EIN ::after (zwei Hintergrundlagen), sonst wuerde die zweite Regel die erste ueberschreiben. */ .st-stage--blende-o .st-stage-media, .st-stage--blende-u .st-stage-media { position: relative; } .st-stage--blende-o .st-stage-media::after, .st-stage--blende-u .st-stage-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-repeat: no-repeat; } .st-stage--blende-o .st-stage-media::after { background-image: linear-gradient(to bottom, var(--ink) 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.70) 30%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%); background-size: 100% 44%; background-position: top; } .st-stage--blende-u .st-stage-media::after { background-image: linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.70) 30%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%); background-size: 100% 44%; background-position: bottom; } .st-stage--blende-o.st-stage--blende-u .st-stage-media::after { background-image: linear-gradient(to bottom, var(--ink) 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.70) 30%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%), linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.70) 30%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%); background-size: 100% 44%, 100% 44%; background-position: top, bottom; } /* Rahmen um die Buehne: feiner Rand plus weicher Schatten, damit das Bild vom Grund abhebt. Der bestehende Radius bleibt unangetastet — der wurde vom Kunden ausdruecklich gelobt. */ .st-stage--rahmen .st-stage-media img { border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.45); } .st-section--light .st-stage--rahmen .st-stage-media img { border-color: rgba(0,0,0,.12); box-shadow: 0 18px 50px rgba(0,0,0,.18); } .st-hero-text .st-hero-badge { max-width: none; display: flex; justify-content: center; align-items: baseline; gap: .7em; flex-wrap: wrap; margin: 16px auto 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--white-grey); } .st-hero-badge-wort { font-size: .82rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--accent); } /* Seit der WYSIWYG-Umstellung kann die Einleitung mehrere Absaetze und Auszeichnung enthalten — beides braucht hier eigene Regeln. */ .st-hero-text p + p { margin-top: 18px; } .st-hero-text strong { color: var(--white); font-weight: 700; } /* ── Block: Ueberschrift + Fliesstext ─────────────────────────── */ .st-block { max-width: 980px; margin: 0 auto; padding-top: 80px; border-top: 1px solid rgba(255,255,255,.08); } .st-block:first-of-type { padding-top: 0; border-top: none; } .st-block + .st-block { margin-top: 80px; } .st-block--plain { border-top: none; padding-top: 0; } .st-block-kicker { display: block; font-size: .9rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px; } .st-block-title { font-family: var(--font-serif); font-weight: normal; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -.012em; margin-bottom: 24px; color: var(--white); } .st-copy { max-width: var(--measure); } /* EINE Spalte fuer alles (Kundenentscheidung 2026-09-10): Text UND Medien stehen auf --text-col, links und rechts exakt buendig. Vorher lag der Text auf 587px und die Bilder auf 980px — nirgends dieselbe Kante, und ein mittig sitzender Textblock neben einem breiteren Bild liest sich wie zwei konkurrierende Raster. Ausgenommen bleibt NUR .st-stage--bleed: randlose Buehnen laufen bewusst ueber die volle Fensterbreite. */ .st-block > .st-block-kicker, .st-block > .st-block-title, .st-block > .st-copy, .st-block > .st-note, .st-block > .st-band, .st-block > .st-compare, .st-block > .st-annofig, .st-block > .st-missing, .st-block > .st-split, .st-block > .st-stage:not(.st-stage--bleed) { max-width: var(--text-col); margin-inline: auto; } .st-band-label { max-width: var(--text-col); margin-inline: auto; } /* ── Satzausrichtung folgt der Komposition des Blocks ──────────── Kundenvorgabe 2026-09-10: NICHT pauschal zentriert und NICHT pauschal linksbuendig, sondern passend zum jeweiligen Block. ZENTRIERT, wo der Block selbst zentriert und symmetrisch steht: .st-lead Section-Auftakt (Kicker + Titel + Einleitung) .st-hero-text Auftakt der Seite, steht allein auf dem Bild .st-missing Platzhalter-Kaesten (eigene Regel weiter unten) LINKSBUENDIG, wo Text an einer Kante haengt oder als Lesestrecke laeuft — das ist der Normalfall und braucht keine Regel: .st-block-* Ueberschrift + Fliesstext der Bloecke .st-stage-text Text auf den Buehnen, an einer Bildseite verankert .st-block--side Kopfspalte links + Text rechts .st-band-label / .st-compare-label Bildbeschriftungen an der linken Kante ihres Bildes */ .st-hero-text { text-align: center; } /* Section-Auftakt: gleiche Spaltenbreite wie alles andere. Der Text bleibt hier zentriert — ein zentrierter Block bekommt zentrierten Satz, ein linksbuendiger linksbuendigen. */ .st-lead { max-width: var(--text-col); } /* Zweispaltig geht auf 587px nicht mehr auf (2 x 265px = Zeilen mit ~7 Woertern). In der einen Spalte also einspaltig. */ /* .st-copy--two: siehe Originalregel weiter unten — auf der einen Spalte einspaltig. */ /* Die Kopfspalte-Bloecke (sticky Kopf links + Text rechts) waren ein drittes und viertes Raster (290px @463 + 626px @817). In der einen Spalte stehen Kopf und Text uebereinander. */ .st-block.st-block--side { max-width: var(--text-col); margin-inline: auto; } .st-copy p { font-size: 1rem; line-height: 1.8; color: var(--light-grey); } .st-copy p + p { margin-top: 18px; } .st-copy ul { margin: 18px 0 0 1.1rem; } .st-copy li { font-size: 1rem; line-height: 1.75; color: var(--light-grey); margin-bottom: 8px; } .st-copy strong, .st-lead-body strong, .st-guarantee-card p strong { color: var(--white); font-weight: 700; } /* Lange Textstrecken ohne Bild zweispaltig — bricht die Bleiwueste in der Reibahle-Section auf. */ .st-copy--two { max-width: none; columns: 2; column-gap: 56px; } .st-copy--two p + p { margin-top: 18px; } @media (max-width: 900px) { .st-copy--two { columns: 1; } } /* ── Seitenlayout: Ueberschrift links, Text rechts ──────────── Fuer bildlose Bloecke. Bricht den Rhythmus "Ueberschrift ueber voller Textbreite", der bei vielen Bloecken hintereinander sehr monoton wird, und nutzt die sonst leere rechte Haelfte. Die Kopfspalte bleibt beim Scrollen stehen. */ .st-block--side { display: grid; grid-template-columns: minmax(200px, 290px) 1fr; gap: 64px; align-items: start; } /* 120px lagen hinter dem fixierten Menue (83px hoch, endet bei 83 bzw. 115px mit Admin-Leiste). */ .st-block--side .st-block-head { position: sticky; top: 132px; } .admin-bar .st-block--side .st-block-head { top: 164px; } .st-block--side .st-block-title { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 0; } .st-block--side .st-copy { max-width: 62ch; } /* Die Kopfspalte verschmaelert den Textbereich bereits — zusaetzlich noch zweispaltig ergibt Zeilen mit 7 Woertern. Also hier aufheben. */ .st-block--side .st-copy--two { columns: 1; } /* Grosse, zurueckhaltende Ziffer als Taktgeber */ .st-num { display: block; font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; color: rgba(255,255,255,.13); margin-bottom: 14px; } @media (max-width: 900px) { .st-block--side { grid-template-columns: 1fr; gap: 20px; } .st-block--side .st-block-head { position: static; } .st-num { font-size: 2rem; margin-bottom: 10px; } } /* ══ BUEHNE: Bild mit Text darauf ═════════════════════════════ */ /* Der Rahmen umschliesst Bild + Text. Auf Desktop ist er wirkungslos (display:contents), mobil traegt er das Bild — siehe Mobil-Block. */ .st-stage-frame { display: contents; } .st-stage { position: relative; margin-top: 56px; overflow: hidden; border-radius: 4px; isolation: isolate; } /* Randlos ueber die volle Breite. In Elementor sitzt der Baustein in einem Container mit content_width:full — der spannt bereits die Fensterbreite OHNE Scrollbar auf. 100vw waere hier falsch: es zaehlt die Scrollbar mit und erzeugt ~7px seitlichen Ueberstand. */ .st-stage--bleed { border-radius: 0; width: 100%; margin-left: 0; margin-right: 0; } /* Der Regler "Hoehe der Buehne" wirkt am Rahmen: das Bild darin steht auf height:100% und fuellt ihn per cover. */ .st-stage-media img { width: 100%; height: auto; } /* Motiv horizontal verschieben, ohne die Hoehe zu beschneiden: Bild wird um --bild-x breiter und um denselben Betrag nach links gezogen. Weg faellt damit nur der linke (leere) Rand. */ .st-stage--shift .st-stage-media { overflow: hidden; } .st-stage--shift .st-stage-media img { width: calc(100% + var(--bild-x, 0%)); margin-left: calc(var(--bild-x, 0%) * -1); max-width: none; } /* Randlos + quadratisches Bild waere sonst fensterbreit HOCH (bei 1440px Viewport ~1440px). Deshalb Hoehe deckeln und beschneiden. Welcher Ausschnitt stehen bleibt, steuert --focus je Buehne. */ .st-stage--bleed .st-stage-media { /* Obergrenze kommt aus dem Regler "Hoehe der Buehne". */ height: clamp(520px, 78vh, var(--stage-h, 780px)); position: relative; } /* Schmale Blende an Ober-/Unterkante: bei dunklen Motiven unsichtbar, bei hell angeschnittenen (Zargenholz) nimmt sie die harte Linie weg, ohne in die Bildkomposition zu greifen. */ .st-stage--bleed.st-stage--blende .st-stage-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--sec-bg, #000000) 0, rgba(0,0,0,0) 9%), linear-gradient(to top, var(--sec-bg, #000000) 0, rgba(0,0,0,0) 7%); } /* Nur unten bzw. nur oben — z. B. wenn die obere Blende die Spitze des Motivs verschluckt. */ .st-stage--bleed.st-stage--blende-u .st-stage-media::after, .st-stage--bleed.st-stage--blende-o2 .st-stage-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .st-stage--bleed.st-stage--blende-u .st-stage-media::after { background: linear-gradient(to top, var(--sec-bg, #000000) 0, rgba(0,0,0,0) 7%); } .st-stage--bleed.st-stage--blende-o2 .st-stage-media::after { background: linear-gradient(to bottom, var(--sec-bg, #000000) 0, rgba(0,0,0,0) 9%); } .st-stage--bleed .st-stage-media img { height: 100%; object-fit: cover; object-position: var(--focus, center); } /* Abdunkelung genau von der Seite, auf der der Text sitzt. Ohne das ist weisser Text auf den helleren Stellen grenzwertig. */ .st-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .st-stage--right::before { background: linear-gradient(to left, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 62%); } .st-stage--left::before { background: linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 62%); } .st-stage--top::before { background: linear-gradient(to bottom,rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,0) 68%); } .st-stage--bottom::before { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,0) 68%); } /* Regler "Abdunkelung hinter dem Text" aus. */ .st-stage--kein-verlauf::before { background: none; } .st-stage-text { position: absolute; z-index: 2; /* --text-breite kommt aus dem Regler am Baustein */ max-width: none; width: var(--text-breite, min(42ch, 44%)); } .st-stage--bleed .st-stage-text { width: var(--text-breite, min(42ch, 34%)); } /* Der Text einer RANDLOSEN Buehne muss trotzdem im Satzspiegel der Seite stehen — sonst haengt er bei breiten Fenstern sichtbar ausserhalb der Inhaltsspalte (bei 1600px waren es 48px daneben). --gutter rechnet den Seitenrand aus: auf breiten Fenstern die Kante der 1280er-Inhaltsspalte, auf schmalen 7%. */ .st-stage { --gutter: var(--text-rand, 7%); } .st-stage--bleed { --gutter: var(--text-rand, max(7%, calc((100% - 1232px) / 2))); } .st-stage--right .st-stage-text { right: var(--gutter); top: 50%; transform: translateY(-50%); } .st-stage--left .st-stage-text { left: var(--gutter); top: 50%; transform: translateY(-50%); } .st-stage--top .st-stage-text { left: var(--gutter); top: 7%; width: min(60ch, 66%); max-width: none; } .st-stage--bottom .st-stage-text { left: var(--gutter); bottom: 9%; width: min(46ch, 52%); } /* ── Zwei Anordnungen OHNE Overlay ──────────────────────────────── Die uebrigen Positionen legen den Text auf das Bild. Diese beiden stellen ihn daneben bzw. darueber, damit das Motiv unangetastet bleibt — Kundenwunsch 25.09.: "der komplette Stachel muss sichtbar sein" und "das Bild direkt unter dem Text". */ .st-stage--neben, .st-stage--stapel { overflow: visible; } .st-stage--neben::before, .st-stage--haelfte::before, .st-stage--stapel::before { display: none; } .st-stage--neben .st-stage-frame, .st-stage--stapel .st-stage-frame { display: contents; } .st-stage--neben .st-stage-text, .st-stage--stapel .st-stage-text { position: static; transform: none; inset: auto; width: auto; max-width: none; } /* Bild links, Text rechts */ .st-stage--neben { display: flex; /* Oben buendig statt mittig: bei viel Text stand das Bild sonst auf halber Hoehe und der Text lief oben und unten heraus. */ align-items: flex-start; gap: 48px; } .st-stage--neben .st-stage-media { flex: 0 0 var(--neben-links, 62%); min-width: 0; } .st-stage--neben .st-stage-media img { border-radius: 4px; } .st-stage--neben .st-stage-text { flex: 1 1 auto; min-width: 0; } /* Text oben, Bild darunter */ .st-stage--stapel { display: flex; flex-direction: column; gap: 30px; } .st-stage--stapel .st-stage-text { order: 0; max-width: var(--measure); } .st-stage--stapel .st-stage-media { order: 1; } .st-stage--stapel .st-stage-media img { border-radius: 4px; } @media (max-width: 860px) { .st-stage--neben { flex-direction: column; gap: 28px; } .st-stage--neben .st-stage-media, .st-stage--neben .st-stage-text { flex: 0 0 auto; width: 100%; } } /* "Das ist keine eigene Sektion" — Block haengt direkt am vorigen. */ .am-stachel .st-w--anschluss .st-stage { margin-top: 0; } .am-stachel .st-w--anschluss { padding-top: 0; } /* ── Zwei Spalten (am_stachel_duo) ──────────────────────────────── Das linke Bild ist der HINTERGRUND des ganzen Blocks, nicht ein Spaltenbild. Gemessen: der Stab nimmt nur 9% der Bildbreite ein, aber 96% der Hoehe — als Spaltenbild wird er winzig. Ueber die volle Blockhoehe mit object-fit:contain wird er gross UND bleibt garantiert unbeschnitten. Die leeren schwarzen Bildraender fallen auf dem schwarzen Grund nicht auf. */ .st-duo { position: relative; max-width: var(--shell); margin-inline: auto; min-height: 620px; } .st-duo-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .st-duo-media img { width: 100%; height: 100%; display: block; object-fit: contain; /* nie beschneiden */ object-position: var(--stab-x, -300px) center; } .st-duo-col { position: relative; z-index: 1; /* Der Regler "Breite linke Spalte" schreibt --links. Das hier las frueher --textspalte und war deshalb wirkungslos. */ width: calc(100% - var(--links, 44%)); margin-left: auto; min-width: 0; padding: 24px 0 24px 40px; } .st-duo-col .st-copy { max-width: none; margin-bottom: 56px; } .st-duo-zweit { position: relative; border-radius: 4px; overflow: hidden; } /* Nur ein AUSSCHNITT des Hochformats — vollstaendig waere der Block 1543px hoch. Gemessen liegen die hellen Bohrungen im Band 50-70% der Bildhoehe; 58% als Fokus zeigt sie mittig mit Luft nach oben und unten. */ .st-duo-zweit { height: var(--zweit-hoehe, 620px); } .st-duo-zweit img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center var(--zweit-fokus, 48%); border-radius: 4px; } .st-duo-zweit--rahmen { border: 1px solid rgba(255,255,255,.20); box-shadow: 0 18px 50px rgba(0,0,0,.45); } /* Text liegt oben auf dem Bild. */ .st-duo-zweit-text { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 26px 28px 46px; background: linear-gradient(to bottom, rgba(0,0,0,.90) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.30) 78%, rgba(0,0,0,0) 100%); } .st-duo-zweit-text p { font-size: .94rem; line-height: 1.65; color: var(--light-grey); } .st-duo-zweit-text p + p { margin-top: 12px; } .st-duo-zweit-text strong { color: var(--white); font-weight: 700; } @media (max-width: 980px) { .st-duo { min-height: 0; } .st-duo-media { position: relative; inset: auto; } .st-duo-media img { height: auto; object-fit: fill; } .st-duo-col { width: 100%; margin-left: 0; padding: 30px 0 0; } } .st-stage-text .st-block-title { margin-bottom: 18px; } .st-stage-text p { font-size: 1rem; line-height: 1.75; color: var(--light-grey); } .st-stage-text p + p { margin-top: 16px; } /* Ueberlappendes Detail-/Vergleichsbild in der Buehne */ .st-stage-inset { position: absolute; z-index: 3; /* --inset-w und --inset-ar kommen aus den Reglern am Baustein */ width: var(--inset-w, 30%); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 26px 70px rgba(0,0,0,.85); } .st-stage-inset img { width: 100%; aspect-ratio: var(--inset-ar, auto); object-fit: cover; object-position: center; } .st-stage-inset--br { right: 5%; bottom: 7%; } .st-stage-inset--bl { left: 5%; bottom: 7%; } .st-stage-inset--tr { right: 5%; top: 9%; } /* FEHLTE: Widget bietet "Oben links" an, ohne Regel verschwand das Bild. */ .st-stage-inset--tl { left: 5%; top: 9%; } .st-inset-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 12px 8px; font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--corp-blue); background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0)); } /* ── Gegenueberstellung: Atelier Moerth ↔ herkoemmlich ────────── */ .st-compare { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .st-compare-item { min-width: 0; } .st-compare-label { display: flex; align-items: center; gap: 9px; font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; } .st-compare-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .st-compare-item--good .st-compare-label { color: var(--corp-blue); } .st-compare-item--good .st-compare-label::before { background: var(--accent); } .st-compare-item--bad .st-compare-label { color: var(--corp-grey); } .st-compare-item--bad .st-compare-label::before { background: var(--corp-grey); } /* Gleiche Hoehe trotz verschiedener Seitenverhaeltnisse, ohne dass etwas vom Produkt abgeschnitten wird. */ .st-compare-item img { width: 100%; aspect-ratio: 4 / 3; /* contain liess bei hochformatigen Fotos schwarze Balken links und rechts stehen. cover fuellt den Kasten; die Motive sitzen mittig, es geht nichts Wesentliches verloren. */ object-fit: cover; object-position: center; background: transparent; border-radius: 4px; border: 1px solid rgba(255,255,255,.07); } .st-compare-item--good img { border-color: rgba(0,158,237,.35); } /* ══ Bildbeschriftung als ECHTER TEXT ═════════════════════════ Mehrere Vergleichsbilder gibt es in Drive doppelt: einmal mit eingebrannter Beschriftung (_Text_de / _de) und einmal neutral. Wir nehmen die NEUTRALE Fassung und legen die Beschriftung als HTML darueber — dann ist sie editierbar, uebersetzbar (statt einer zweiten Bilddatei pro Sprache) und fuer Screenreader lesbar. Position je Label ueber --x/--y, Farbe ueber --c. Die Werte stammen aus den Originalen: Farbflaechen der _de-Datei per Pixelanalyse lokalisiert, nicht geschaetzt. → Im Widget wird das ein Repeater: Text · Farbe · X · Y. */ .st-annofig { position: relative; container-type: inline-size; margin-top: 44px; } .st-annofig img { width: 100%; border-radius: 4px; display: block; } .st-anno { position: absolute; left: var(--x); top: var(--y); z-index: 2; /* nie ueber den rechten Bildrand hinaus */ max-width: min(20cqw, calc(97cqw - var(--x, 0%))); /* 30->20: lange Beschriftungen brechen zweizeilig um */ display: flex; align-items: baseline; flex-wrap: wrap; gap: .55em; font-family: var(--font-hand); font-size: clamp(.8rem, 1.8cqw, 1.25rem); line-height: 1.35; letter-spacing: .5px; text-transform: none; font-weight: 700; color: var(--c, var(--corp-blue)); text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9); } .st-anno::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: 0 0 auto; transform: translateY(-.15em); } /* Der Zusatz ist ein eigenes Flex-Item — ohne eigene Zeile schiebt er das Label auf schmalen Screens aus dem Bild. */ .st-anno small { flex: 1 0 100%; margin-top: -.2em; font-size: .82em; letter-spacing: 1px; opacity: .75; text-transform: none; font-weight: 500; } /* ── Referenzlinie vom Label zum Objekt ────────────────────── viewBox 0 0 100 100 + preserveAspectRatio="none": die Endpunkte sind damit direkt Prozentwerte des Bildes und sitzen bei jeder Groesse richtig. vector-effect haelt die Linie trotz der Verzerrung 1px duenn. Desktop- und Mobilfassung eines Bildes haben unterschiedliche Motivlagen (gemessen), deshalb zwei getrennte Liniensaetze. */ .st-anno-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; } .st-anno-lines line { stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .9; } /* Einheitliche Vergleichsfarben (Kundenwunsch 26.09.): ueberall Blau/Weiss wie bei den Schutzkappen, kein Gruen/Rot mehr. */ .st-anno-lines .l-good { stroke: #9BC8E6; } .st-anno-lines .l-bad { stroke: #D8D8D8; } .st-anno-lines .l-us { stroke: #9BC8E6; } .st-anno-lines .l-them { stroke: #D8D8D8; } .st-anno-lines--m { display: none; } @media (max-width: 980px) { .st-anno-lines--d { display: none; } .st-anno-lines--m { display: block; } } /* Rechts stehende Labels an der RECHTEN Kante verankern — sonst laufen sie auf schmalen Screens aus dem Bild. */ .st-anno--r { left: auto; right: var(--rx); max-width: min(22cqw, calc(97cqw - var(--rx))); } /* ══ ANNO-VEREINHEITLICHUNG (28.09.) ═══════════════════════════ Zwei Ursachen fuer den unruhigen Eindruck: 1. Der Punkt sass IMMER links vom Text. Bei rechts verankerten Beschriftungen kommt die Linie aber von rechts — der Punkt lag dann auf der abgewandten Seite. Punkt faellt daher ganz weg, die Linie ist der Anschluss. 2. Der Textkasten war breiter als der sichtbare Text, weil der Zusatz (small) mit flex-basis 100% die volle max-width erzwang. Die Linie endete dadurch an der Kastenkante statt am Wort. Rechts verankerte Beschriftungen stehen jetzt rechtsbuendig, damit Text und Linienende zusammenfallen. */ .st-anno::before { display: none !important; } .st-anno { gap: 0; } /* Ausrichtung folgt der Seite, an der die Linie ankommt: Text links vom Strich wird RECHTSBUENDIG, damit alle Zeilen buendig am Linienende stehen. Linksbuendig liess laengere Zusatzzeilen nach rechts ausbrechen — der Text stand dann "irgendwo". */ .st-anno:not(.st-anno--r), .st-anno:not(.st-anno--r) small { text-align: left; } .st-anno--r, .st-anno--r small { text-align: right; } /* Die Hauptzeile ist ein Flex-Element, das sich auf seinen Inhalt verkuerzt — text-align wirkt darin nicht. Erst justify-content schiebt sie an die rechte Kante, sodass Hauptzeile und Zusatz buendig untereinander enden. */ .st-anno--r { justify-content: flex-end; } /* Luft zwischen Linienende und Text — vorher klebte der Text am Strich. Das Polster liegt INNEN, die Kastenkante (und damit das Linienende) bleibt an ihrer Stelle. */ .st-anno:not(.st-anno--r) { padding-left: 15px; } .st-anno--r { padding-right: 15px; } /* Zusatzzeile enger an die Hauptzeile */ .st-anno small { margin-top: .1em; } .st-anno--good { --c: #9BC8E6; } .st-anno--bad { --c: #D8D8D8; } .st-anno--us { --c: var(--corp-blue); } .st-anno--them { --c: #D8D8D8; } /* ── Breites Panorama-Vergleichsbild (Ratio ~1.85) ───────────── */ .st-band { margin-top: 44px; } .st-band + .st-band { margin-top: 20px; } .st-band img { width: 100%; border-radius: 4px; } .st-band-label { margin-bottom: 10px; font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--corp-blue); } /* ── Split: helles Bild neben Text (kein Overlay moeglich) ───── */ .st-split { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .st-split--flip .st-split-media { order: -1; } .st-split-media img { width: 100%; border-radius: 4px; } .st-split .st-copy { max-width: none; } /* ── Einzelbild ohne Overlay ─────────────────────────────────── */ .st-figure { margin-top: 44px; } .st-figure img { width: 100%; border-radius: 4px; } /* ── Platzhalter fuer noch fehlende Bilder ───────────────────── */ .st-missing { max-width: var(--text-col); /* eine Spalte fuer alles */ margin-inline: auto; margin-top: 44px; border: 1px dashed rgba(0,158,237,.45); border-radius: 6px; padding: 44px 28px; text-align: center; background: rgba(0,158,237,.03); } .st-missing-head { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px; } .st-missing-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--corp-blue); line-height: 1.9; overflow-wrap: anywhere; } .st-missing-hint { margin-top: 14px; font-size: .85rem; color: var(--corp-grey); line-height: 1.6; } /* ── Regieanweisung aus Trello (Briefing, KEIN Seitentext) ───── */ .st-note { margin-top: 28px; border-left: 2px solid rgba(148,148,148,.4); padding: 4px 0 4px 18px; } .st-note-head { font-size: .64rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--corp-grey); font-weight: 600; margin-bottom: 8px; } .st-note p { font-size: .88rem; line-height: 1.7; color: var(--corp-grey); font-style: italic; } /* ── Offene Formulierung (Schraegstrich-Alternative aus Trello) ─ */ .st-alt { border-bottom: 1px dotted rgba(0,158,237,.6); cursor: help; } /* ── Textvarianten ENTWEDER / ODER ───────────────────────────── */ .st-variants { margin-top: 32px; display: grid; gap: 20px; } .st-variant { border: 1px solid rgba(255,255,255,.09); border-radius: 6px; padding: 26px 28px; background: rgba(255,255,255,.015); } .st-variant--active { border-color: rgba(0,158,237,.45); background: rgba(0,158,237,.04); } .st-variant-head { display: flex; align-items: baseline; gap: 12px; font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--corp-grey); margin-bottom: 16px; } .st-variant--active .st-variant-head { color: var(--accent); } .st-variant-flag { font-size: .6rem; letter-spacing: 1.5px; border: 1px solid currentColor; border-radius: 20px; padding: 2px 9px; } /* ── Bildnachweis am Section-Ende ────────────────────────────── */ .st-sources { max-width: var(--text-col); /* eine Spalte fuer alles */ margin: 72px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); } .st-sources summary { cursor: pointer; list-style: none; font-size: .64rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.52); font-weight: 600; } .st-sources summary::-webkit-details-marker { display: none; } .st-sources summary:hover { color: var(--corp-grey); } .st-sources ul { margin-top: 14px; list-style: none; } .st-sources li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; line-height: 1.85; color: rgba(255,255,255,.55); overflow-wrap: anywhere; } /* ── Garantie-Karten (Section 6) ─────────────────────────────── */ .st-guarantee-grid { margin: 64px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--text-col); /* eine Spalte fuer alles */ } .st-guarantee-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 34px 26px; text-align: center; } .st-guarantee-num { font-family: var(--font-serif); font-size: 2.6rem; color: var(--accent); line-height: 1; margin-bottom: 14px; } .st-guarantee-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: var(--white); } .st-guarantee-card p { font-size: .9rem; line-height: 1.65; color: var(--light-grey); } /* ══ Responsive ═══════════════════════════════════════════════ */ /* Grosse Schirme: mehr Weissraum zwischen den Sections — der Seite fehlte auf 1600px+ die Ruhe zwischen den Kapiteln. */ @media (min-width: 1400px) { .st-section { padding: 148px 0; } .st-lead { margin-bottom: 92px; } } /* Tablet: Overlay bleibt, wird aber breiter und rutscht nach unten */ @media (max-width: 1100px) { .st-stage-text, .st-stage--bleed .st-stage-text { width: min(46ch, 56%); } } /* Hero unter 1160px: dort passt der mittig gesetzte Textblock nicht mehr ueber die Zarge (linke 20% des Motivs) — bei 1101px ragte der Absatz 16px hinein. Deshalb ab hier auf den UNTEREN freien Bildbereich, Verlauf von unten statt von oben. WICHTIG: absolut am unteren Bildrand verankern, NICHT per negativem margin-top wie bei .st-stage. Dort deckelt overflow:hidden die Buehne — hier wuerde derselbe Trick die Figure-Hoehe kollabieren lassen (bei 1024px: Figure 494px, Bild 672px), das Bild liefe unter die folgende Notiz. Bottom-Anker haelt Bildhoehe und Text zusammen. */ @media (max-width: 767px) { .st-hero-figure::after { background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 26%, rgba(0,0,0,.25) 58%, rgba(0,0,0,0) 86%); } .st-hero-text { position: absolute; top: auto; left: 0; right: 0; bottom: 5%; transform: none; width: auto; max-width: none; padding: 0 24px; } .st-hero-text p { max-width: 640px; } .st-hero-title { font-size: clamp(1.9rem, 4.2vw, 2.6rem); } } @media (max-width: 1160px) { } /* Mobil: Die Hochformat-Varianten der Bilder haben oben bzw. unten freie Flaeche. Der Text sitzt deshalb IMMER unten mit kraeftigem Verlauf — so bleibt der Effekt erhalten und der Text lesbar. */ @media (max-width: 767px) { /* Hero mobil: bei 373px Lesebreite wird die Einleitung ~500px hoch — auf dem Bild wuerde sie bis in die helle Zarge hinauflaufen. Hier laeuft der Text deshalb im Fluss unter das Bild; der Verlauf des ::after zieht die Bildkante ins Dunkle, sodass Bild und Text trotzdem als ein Block lesen und kein schwarzes Band entsteht. */ /* Hero mobil: Bild deckeln, Titel und Einleitung DARAUF. Vorher stand beides unter dem Bild — ganz oben sah man keinen Text. */ /* Hero mobil: Bild gedeckelt, Titel im unteren Bilddrittel, der Einleitungstext laeuft darunter weiter. Ohne Deckel lief das Hochformat 562px, und ganz oben war ueberhaupt kein Text zu sehen. */ /* Hero mobil: gleiches Prinzip — Bild als Ebene hinter dem ganzen Auftakt, Titel und Einleitung vollstaendig darauf. */ .st-hero-figure { position: relative; overflow: hidden; } .st-hero-media { position: absolute; inset: 0; height: auto; } .st-hero-media img { width: 100%; height: 100%; max-height: none; /* Desktop-Deckel hier aufheben */ object-fit: cover; object-position: center 26%; } /* Der Verlauf dunkelt jetzt OBEN ab (dort liegt die helle Zarge, gemessen 67-110 von 255) und laesst UNTEN das Motiv frei — der Stachel laeuft im Foto von 20% bis ganz unten durch. */ .st-hero-figure::after { background: linear-gradient(to bottom, rgba(0,0,0,.24) 0%, rgba(0,0,0,.15) 18%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.14) 54%, rgba(0,0,0,.10) 76%, rgba(0,0,0,.04) 100%) !important; } /* Text mittig im Bild: die Figur bekommt eine Mindesthoehe und zentriert ihren Inhalt. Vorher schob 34vh Innenabstand den Text an den unteren Rand, wo er das Motiv verdeckte. */ .st-hero-figure { display: flex; align-items: center; min-height: 112svh; } .st-hero-text { position: relative; inset: auto; width: 100%; max-width: none; margin-top: 0; padding: 40px 28px; z-index: 2; } .st-hero-text p { max-width: none; } } @media (max-width: 980px) { /* KAPITEL-AUFTAKT KOMPAKTER (nur mobil) Zwischen Ueberschrift und erstem Foto standen 285px schwarze Flaeche. Kundenvorgabe: man soll das Produkt sehen, nicht Leerraum. Die senkrechte Kapitelmarke wird kuerzer, der Block schliesst enger ab und der folgende Block ruckt nach oben. */ .st-lead--chapter::before { height: 22px; margin-bottom: 10px; } .st-w--kapitel { padding-top: 30px; padding-bottom: 4px; } .st-w--kapitel .st-lead { margin-bottom: 6px; } .st-w--kapitel .st-lead-title { margin-bottom: 8px; } .elementor-element:has(.st-w--kapitel) + .elementor-element .st-w { padding-top: 18px; } /* ZWEITES DUO-FOTO: BOHRUNGEN TIEFER SETZEN Rahmen und Foto hatten fast dasselbe Format (0.585 zu 0.56), also kaum Spielraum — das Motiv sass direkt unter dem Text. 4:5 schafft Spielraum, der Ausschnitt gibt dem Motiv oben Luft. */ /* Das Foto zeigt den Stab ueber die ganze Bildhoehe — es wird mobil NICHT beschnitten, sonst fehlen Anfang und Ende. */ .st-duo-zweit img { height: auto; aspect-ratio: auto; object-fit: contain; } .st-duo-zweit--rahmen { height: auto; } /* DAS ERSTE DUO-FOTO ENTFAELLT MOBIL Es zeigt denselben Stachelstab wie der Hero direkt darueber. Das Motiv ist nur 19% der Bildbreite (gemessen x 34-53%), der Block war dadurch 728-853px hoch und fast nur schwarze Flaeche. Auf Desktop bleibt das Foto unveraendert. */ .st-duo-media { display: none; } /* BLOCKFOTOS MOBIL ZUSCHNEIDEN Die Hochformat-Motive (z. B. 1152x2560) liefen bei 390px Breite 742px hoch — pro Bild fast ein ganzer Bildschirm. Zuschnitt und sichtbarer Ausschnitt kommen aus den Reglern am Baustein. */ .st-copy-fig img { aspect-ratio: var(--bild-ar-m, auto); object-fit: cover; object-position: 50% var(--bild-fokus-m, 50%); width: 100%; height: auto; } /* TEXT AUF DEM BILD LESBAR HALTEN (nur mobil) Der Schatten ersetzt die fruehere flaechige Abdunkelung: das Motiv bleibt sichtbar, die Schrift steht trotzdem frei. */ .st-stage-text .st-block-title, .st-stage-text .st-block-kicker, .st-stage-text p { text-shadow: 0 2px 14px rgba(0,0,0,.92), 0 0 5px rgba(0,0,0,.85); } } @media (max-width: 767px) { .st-hero-title, .st-hero-lead p, .st-hero-badge { text-shadow: 0 2px 14px rgba(0,0,0,.92), 0 0 5px rgba(0,0,0,.85); } } @media (max-width: 980px) { .st-section { padding: 72px 0; } .st-lead { margin-bottom: 48px; } .st-block { padding-top: 56px; } .st-block + .st-block { margin-top: 56px; } /* Nur Buehnen hatten 40px Vorsprung, alle anderen Bloecke 0 — dadurch waren die Abstaende zwischen den Sektionen mobil unterschiedlich. Die Bloecke bringen ihren Abstand selbst mit. */ .st-stage { margin-top: 0; } /* MOBIL: Das Bild liegt als Ebene HINTER dem gesamten Block, der Text steht vollstaendig DARAUF — nicht darunter, auch nicht nur mit dem Anfang darauf. Konstruktion: .st-stage-media absolut auf inset:0, das Bild deckt per object-fit:cover die ganze Blockhoehe. Die Blockhoehe ergibt sich aus dem Text plus einem Vorlauf (padding-top), der das Motiv freistellt. Dadurch ist der Text IMMER auf dem Bild, egal wie lang er ist — ein am Bildboden verankerter Text lief bei 400-500 Zeichen ueber die Kante. */ .st-stage { position: relative; } .st-stage-frame { display: block; position: relative; overflow: hidden; } .st-stage .st-stage-media, .st-stage--bleed .st-stage-media { position: absolute; inset: 0; height: auto; z-index: 0; } .st-stage .st-stage-media img, .st-stage--bleed .st-stage-media img { width: 100%; height: 100%; object-fit: cover; /* eigener Ausschnitt fuer mobil, sonst wie Desktop */ object-position: var(--focus-m, var(--focus, center)); } /* Verlauf ueber das ganze Bild: oben frei, unten dunkel genug fuer weissen Text. */ /* Verlauf nur ueber dem Rahmen, nicht ueber dem Vergleichsbild. */ .st-stage::before { display: none; } .st-stage-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Deutlich zurueckgenommen: die Motive sind selbst fast schwarz, weisser Text braucht keine 94%. So bleibt das Produkt auch hinter dem Text erkennbar. */ background: linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.24) 52%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.02) 88%, rgba(0,0,0,0) 100%); } /* Text OBEN: Verlauf entsprechend von oben. */ .st-stage--m-oben .st-stage-frame::before { background: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.24) 52%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.02) 88%, rgba(0,0,0,0) 100%); } .st-stage-text, .st-stage--bleed .st-stage-text, .st-stage--top .st-stage-text, .st-stage--bottom .st-stage-text, .st-stage--left .st-stage-text, .st-stage--right .st-stage-text { position: relative; z-index: 2; transform: none; width: auto; max-width: none; inset: auto; margin-top: 0; /* Vorlauf: so viel Bild ist ueber dem Text zu sehen. Bewusst knapp gehalten — jeder zusaetzliche vh bedeutet Scrollen durch Bild ohne Text. 32vh zeigt das Motiv und bringt den Text innerhalb des ersten Screens. */ padding: var(--vorlauf-m, 38vh) 28px 18px; } /* Text oben: Nachlauf statt Vorlauf, damit das Motiv darunter frei bleibt (z. B. der senkrechte Stachelstab). */ .st-stage--m-oben .st-stage-text { padding: 34px 28px 38vh; } /* Vergleichsbild mobil: eigener Block UNTER dem Rahmen. Vorher lag es hinter dem absolut gesetzten Bild und war unsichtbar — und es blaehte die Buehne auf, wodurch das Motiv per object-fit auf die Gesamthoehe beschnitten wurde (gemessen: 1435px statt ~700px). */ /* Vergleichsbild bleibt auch mobil ein kleiner Ausschnitt auf dem Bild — wie auf Desktop. Es liegt in der freien Bildhaelfte: bei Text unten oben rechts, bei Text oben unten rechts. Absolut gesetzt, damit es die Buehne nicht aufblaeht (sonst wird das Motiv per object-fit auf die Gesamthoehe beschnitten). */ .st-stage .st-stage-inset, .st-stage .st-stage-inset--br, .st-stage .st-stage-inset--bl, .st-stage .st-stage-inset--tr, .st-stage .st-stage-inset--tl { /* relative statt static: das Bild steht im Fluss, die Beschriftung behaelt aber das Bild als Bezugspunkt. Mit static richtete sie sich an der ganzen Buehne aus und ragte 29px links und rechts ueber das Foto hinaus. */ position: relative; z-index: 3; /* unter dem Text, aber deutlich kleiner als die Buehne */ width: 62%; max-height: none; overflow: hidden; inset: auto; margin: 4px auto 34px; box-shadow: 0 16px 40px rgba(0,0,0,.82); } .st-stage .st-stage-inset img { width: 100%; height: auto; /* gleiches Querformat wie auf Desktop (385x217) */ aspect-ratio: var(--inset-ar-m, 16 / 9); object-fit: cover; /* bei 16:9 sind nur ~30% der Bildhoehe sichtbar */ object-position: 50% var(--inset-fokus-m, 30%); } /* Text oben -> Ausschnitt unten. */ .st-stage--m-oben .st-stage-inset, .st-stage--m-oben .st-stage-inset--br, .st-stage--m-oben .st-stage-inset--bl, .st-stage--m-oben .st-stage-inset--tr, .st-stage--m-oben .st-stage-inset--tl { top: auto; bottom: 5%; } .st-inset-label { font-size: 1.05rem; padding: 18px 14px 10px; letter-spacing: .5px; } /* Beschriftung bleibt auch mobil auf dem Bild: die Hochformat- Varianten haben im unteren Bereich bewusst freie Flaeche, genau dafuer. Ueberlauf ist konstruktiv ausgeschlossen (rechts verankerte Labels + flex-wrap + max-width-Deckel). */ /* Optionale Mobil-Position je Label: --xm / --ym / --rxm. Nicht gesetzt → es gilt der Desktop-Wert. */ /* Der Punkt sass mobil UEBER dem Text statt daneben: .st-anno ist ein Flex-Element mit max-width 30cqw — mobil rund 96px. Der Text brach um, und der Punkt blieb als eigenes Flex-Element allein in der ersten Zeile. Deshalb hier als Block mit absolut gesetztem Punkt und deutlich mehr Breite. */ .st-anno, .st-anno--r { display: block; padding-left: 1.05em; max-width: min(58cqw, calc(96cqw - var(--x, 0%))); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.75); font-size: .7rem; letter-spacing: 1.2px; left: var(--xm, var(--x)); top: var(--ym, var(--y)); } .st-anno--r { left: auto; right: var(--rxm, var(--rx)); max-width: min(58cqw, calc(96cqw - var(--rx, 0%))); } .st-anno::before { position: absolute; left: 0; top: .42em; transform: none; } .st-anno small { display: block; } .st-compare { grid-template-columns: 1fr; gap: 28px; } .st-split { grid-template-columns: 1fr; gap: 28px; } .st-split--flip .st-split-media { order: 0; } .st-guarantee-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .st-hero-title { padding: 104px 20px 44px; } .st-hero-body { padding: 44px 20px 88px; } } @media (max-width: 980px) { } /* ── Platzhalter-Kennzeichnung ──────────────────────────────────── Fuer Bild-Slots, deren endgueltiges Motiv noch fehlt. Dezent genug, dass die Vorschau nicht unfertig wirkt, deutlich genug, dass beim Durchsehen auffaellt, was noch getauscht werden muss. */ .am-stachel .st-platzhalter-marke { position: absolute; z-index: 3; right: 14px; bottom: 12px; padding: 5px 10px; border-radius: 3px; font-family: var(--font-sans); font-size: .58rem; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; color: #0B0B0C; background: rgba(0,158,237,.82); pointer-events: none; } /* ══ BAUSTEIN-HUELLE ══════════════════════════════════════════════ Im Mockup lag der Grund auf der Section. In Elementor ist jeder Block ein eigenes Widget, deshalb traegt jeder Baustein seinen Grund selbst — fensterbreit ueber ::before, damit er unabhaengig von der Containerbreite bis an die Fensterkante laeuft. */ /* Grundfarbe auch am Widget-Wrapper — so blendet ein heller Block an seiner weichen Kante garantiert gegen Dunkel aus, unabhaengig davon, was der Container darunter macht. */ .am-stachel { background-color: var(--ink, #000000); } /* Laenge der weichen Kante. Mobil laenger, weil dort der flache Rest des dunklen Blocks davor sonst als schwarzer Streifen liest. */ .am-stachel .st-w { --fade: 56px; } .am-stachel .st-w { position: relative; isolation: isolate; } /* Ebenfalls ohne 100vw — siehe .st-stage--bleed. */ .am-stachel .st-w::before { content: ''; position: absolute; z-index: -1; inset: 0; } /* WICHTIG: .st-section--light setzt einen MASSIVEN hellen Hintergrund auf dasselbe Element. Der Verlauf im ::before liegt bei z-index:-1 dahinter und waere damit unsichtbar — die weichen Kanten sahen wie harte Schnitte aus. Der Grund kommt AUSSCHLIESSLICH aus dem ::before. */ .am-stachel .st-w.st-section--light { background: none; } .am-stachel .st-w--ink::before { background: var(--ink); } /* Reines Schwarz — nur dort, wo es ausdruecklich verlangt ist. Kundenvorgabe 25.09. fuer die Stachelstab-Sektion mit der blauen Kapitelmarke. Der uebrige Seitengrund bleibt auf --ink. */ .am-stachel .st-w--black::before { background: var(--ink-0); } .am-stachel .st-w--ink2::before { background: var(--ink-2); } .am-stachel .st-w--paper::before { background: var(--paper); } /* Weiche Kanten — SEITENWEISE. Liegen zwei helle Bloecke direkt uebereinander (Reibahle: acht Stueck), darf die Kante dazwischen NICHT ausblenden, sonst zeigt sich dort eine Naht. Nur die Kante, die an einen dunklen Block grenzt, laeuft weich aus. Viele Stuetzstellen, weil wenige auf der Strecke zwischen Fast-Schwarz und Off-White sichtbares Banding erzeugen. */ .am-stachel .st-w--paper.st-w--weich-o::before { background: linear-gradient(to bottom, rgba(242,241,238,0) 0px, rgba(242,241,238,.10) calc(var(--fade) * .16), rgba(242,241,238,.28) calc(var(--fade) * .32), rgba(242,241,238,.52) calc(var(--fade) * .50), rgba(242,241,238,.76) calc(var(--fade) * .68), rgba(242,241,238,.92) calc(var(--fade) * .84), rgba(242,241,238,1) var(--fade)); } .am-stachel .st-w--paper.st-w--weich-u::before { background: linear-gradient(to top, rgba(242,241,238,0) 0px, rgba(242,241,238,.10) calc(var(--fade) * .16), rgba(242,241,238,.28) calc(var(--fade) * .32), rgba(242,241,238,.52) calc(var(--fade) * .50), rgba(242,241,238,.76) calc(var(--fade) * .68), rgba(242,241,238,.92) calc(var(--fade) * .84), rgba(242,241,238,1) var(--fade)); } .am-stachel .st-w--paper.st-w--weich-o.st-w--weich-u::before { background: linear-gradient(to bottom, rgba(242,241,238,0) 0px, rgba(242,241,238,.10) calc(var(--fade) * .16), rgba(242,241,238,.28) calc(var(--fade) * .32), rgba(242,241,238,.52) calc(var(--fade) * .50), rgba(242,241,238,.76) calc(var(--fade) * .68), rgba(242,241,238,.92) calc(var(--fade) * .84), rgba(242,241,238,1) var(--fade), rgba(242,241,238,1) calc(100% - var(--fade)), rgba(242,241,238,.92) calc(100% - var(--fade) * .84), rgba(242,241,238,.76) calc(100% - var(--fade) * .68), rgba(242,241,238,.52) calc(100% - var(--fade) * .50), rgba(242,241,238,.28) calc(100% - var(--fade) * .32), rgba(242,241,238,.10) calc(100% - var(--fade) * .16), rgba(242,241,238,0) 100%); } /* Wo eine weiche Kante liegt, braucht der Block mehr Luft: der Verlauf ist 152px lang: saesse der Text schon bei 104px, stuende er auf halbdunklem Grund. 184px stellen sicher, dass Inhalt immer auf vollem Hellton beginnt. */ .am-stachel .st-w--weich-o { padding-top: 112px !important; } .am-stachel .st-w--weich-u { padding-bottom: 112px !important; } /* Innenabstaende grosszuegiger: 48px zwischen zwei hellen Bloecken (2x48 = 96px) wirkten gedraengt, und ueberall dort, wo Schwarz an etwas anderes stoesst, braucht es Luft. */ /* Helle Bloecke brauchen mehr Luft als dunkle: auf hellem Grund wirkt derselbe Abstand optisch kleiner. */ @media (max-width: 980px) { /* 24px Seitenrand waren auf 375px zu knapp — der Text stiess fast an die Kante. */ .am-stachel .st-shell { padding: 0 28px; } /* Blockpaare, die zusammengehoeren (Ueberschrift + ihr Bild), bekommen mobil keinen doppelten Abstand. */ .am-stachel .st-w--anschluss { padding-top: 0 !important; } /* Weiche Kanten mobil LAENGER, nicht kuerzer: der dunkle Block davor endet sonst mit flachem Schwarz, das als Streifen liest, bevor der Verlauf ueberhaupt beginnt. */ /* Verlauf wie zuvor (340px war zu lang und wirkte grau-matschig), dafuer mehr Abstand: der Text beginnt erst, wenn der Uebergang abgeschlossen ist. */ .am-stachel .st-w { --fade: 210px; } .am-stachel .st-w--weich-o { padding-top: 264px !important; } .am-stachel .st-w--weich-u { padding-bottom: 264px !important; } /* Dunkler Block vor einer weichen Kante: weniger flaches Schwarz. */ .am-stachel .st-w--ink.st-w--pad-klein, .am-stachel .st-w--ink2.st-w--pad-klein { padding-bottom: 28px; } } /* Der Block innerhalb einer Huelle braucht die Trennlinie nicht mehr — der Grundwechsel uebernimmt die Gliederung. */ .am-stachel .st-w > .st-shell > .st-block { border-top: none; padding-top: 0; margin-top: 0; } /* ══ CONTAINER DER STACHEL-SEITE ══════════════════════════════════ Das Elementor-Kit dieser Installation setzt 3rem Abstand zwischen Widgets und 5rem Container-Innenabstand, und es ist KEIN Seitenhintergrund definiert. Zwischen den 47 Bausteinen wurde dadurch 47-mal der helle Theme-Hintergrund als Streifen sichtbar. Zwei Massnahmen, absichtlich doppelt abgesichert: 1. Abstaende auf 0 — die Bausteine bringen ihre eigenen Innenabstaende (.st-w--pad-*) mit. 2. Dunkler Grund am Container. Selbst wenn irgendwo doch ein Spalt bleibt, ist er dunkel und nicht weiss. Die hellen Felder blenden an ihren weichen Kanten gegen genau diesen Grund aus. */ .am-stachel-con { /* URSACHE DER HELLEN STREIFEN: Elementor gibt diesen Containern kein gueltiges --display, sie rendern als INLINE. Zwischen inline-Boxen entsteht der Zeilenabstand (~56px), durch den der Untergrund durchscheint. Achtung bei der Fehlersuche: bei inline-Elementen misst getBoundingClientRect die Zeilenboxen, eine Lueckenmessung meldet dann faelschlich 0. */ /* flow-root, nicht inline/flex/block — alle drei anderen sind hier falsch: inline → Zeilenboxen-Abstand von ~56px zwischen den Bausteinen, durch den der Untergrund als heller Streifen durchscheint flex → die Widgets werden Flex-Elemente und unter ihre Inhaltshoehe gestaucht (gemessen: Container 634px, Inhalt 846px, Rest lief ueber den naechsten Block) block → Kind-Margins kollabieren aus dem Container heraus und reissen wieder Luecken auf (gemessen: 11 Stueck) flow-root erzeugt einen eigenen Block-Formatierungskontext: kein Margin-Kollaps, keine Stauchung, keine Zeilenboxen. */ display: flow-root; /* Elementors Template laesst zwischen Container und Widget einen Leerzeichen-Textknoten stehen. Der bildet eine Zeilenbox mit der Zeilenhoehe des Containers — gemessen 48px, in denen der dunkle Grund zwischen zwei hellen Bloecken durchschien. font-size:0 macht die Zeilenbox hoehenlos; .am-stachel setzt die Schriftgroesse fuer den Inhalt wieder. */ font-size: 0; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; --container-default-padding-top: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; --container-default-padding-right: 0px; gap: 0 !important; margin-block: 0 !important; background-color: var(--ink, #000000); } /* Heller Container: fuer Bausteine mitten in einer hellen Strecke. Sonst schien der rund 40px hohe Rest des Containers, den der Baustein nicht ausfuellt, als dunkler Streifen zwischen zwei hellen Bloecken durch. Bloecke MIT weicher Kante oben behalten den dunklen Container — dort blendet der Verlauf genau dagegen aus. */ .am-stachel-con--paper { background-color: #F2F1EE; } /* Auch der Seitenrahmen selbst, falls das Theme dort etwas Helles zeichnet. */ .elementor-widget-am_stachel_hero, .elementor-widget-am_stachel_lead, .elementor-widget-am_stachel_stage, .elementor-widget-am_stachel_copy, .elementor-widget-am_stachel_annofig, .elementor-widget-am_stachel_compare, .elementor-widget-am_stachel_split, .elementor-widget-am_stachel_guarantee { margin-block: 0 !important; } /* ══ Kapitelmarke: Abstand nach unten ══════════════════════════════ MUSS am Dateiende stehen und hoehere Spezifitaet tragen. Erster Versuch (25.09.) stand weiter oben mit gleicher Spezifitaet und wurde von `.am-stachel .st-w--pad-normal { padding: 128px 0 }` (Zeile ~1439) sowie von `@media (min-width:1400px) .st-lead { margin-bottom: 92px }` ueberschrieben — wirkungslos. Die Kapitelmarke gehoert zu dem, was FOLGT. Vorher standen 76px Eigenabstand + 128px Huellen-Padding = gut 200px darunter, wodurch sie wie ein eigener Abschnitt wirkte. */ .am-stachel .st-w.st-w--kapitel { padding-bottom: 30px; } .st-lead.st-lead--chapter { margin-bottom: 22px; } @media (max-width: 980px) { .am-stachel .st-w.st-w--kapitel { padding-bottom: 20px; } .st-lead.st-lead--chapter { margin-bottom: 16px; } } /* ══ ANSCHLUSS (28.09.) ════════════════════════════════════════ "Haengt am vorigen Block" hatte bisher dieselbe Spezifitaet wie die Polster-Regeln und verlor — markierte Bloecke behielten ihr volles Kopfpolster. Gemessen 232px Luecke zwischen Ueberschrift und zugehoerigem Bild, obwohl der Anschluss gesetzt war. Auch die weiche Kante (padding-top !important) muss weichen. */ .am-stachel .st-w.st-w--anschluss { padding-top: 12px !important; } .am-stachel .st-w.st-w--anschluss .st-stage { margin-top: 0; } @media (max-width: 980px) { .am-stachel .st-w.st-w--anschluss { padding-top: 8px !important; } } /* ══ ZWEI EBENEN (28.09.) ══════════════════════════════════════ Die Seite bestand aus 46 gleichrangigen Bloecken, jeder mit eigenem Polster — es gab keine Ebene "gehoert zusammen". Jede Luecke war eine Sektionsluecke, darum wirkte alles gleich weit auseinander. Jetzt: unteres Polster fix und klein, die Luecke haengt allein am OBEREN Polster des folgenden Blocks. Nur der erste Block einer Gruppe bekommt das grosse Polster. keiner 32px innerhalb der Gruppe klein 56px normal 88px gross 120px neue Ueberschrift = Gruppenanfang kapitel 180px neues Kapitel */ .am-stachel .st-w { padding-bottom: 24px; } .am-stachel .st-w.st-w--pad-keiner { padding-top: 32px; } .am-stachel .st-w.st-w--pad-klein { padding-top: 56px; } .am-stachel .st-w.st-w--pad-normal { padding-top: 88px; } .am-stachel .st-w.st-w--pad-gross { padding-top: 120px; } .am-stachel .st-w.st-w--pad-kapitel { padding-top: 180px; } /* Weiche Kanten heben den Wert nur auf ihr Minimum an, statt ihn pauschal zu ueberschreiben — sonst verliert der Gruppenanfang seinen groesseren Abstand. */ .am-stachel .st-w.st-w--weich-o.st-w--pad-keiner, .am-stachel .st-w.st-w--weich-o.st-w--pad-klein { padding-top: 76px !important; } .am-stachel .st-w.st-w--weich-o.st-w--pad-normal { padding-top: 88px !important; } .am-stachel .st-w.st-w--weich-o.st-w--pad-gross { padding-top: 120px !important; } .am-stachel .st-w.st-w--weich-o.st-w--pad-kapitel { padding-top: 180px !important; } .am-stachel .st-w.st-w--weich-u { padding-bottom: 76px !important; } /* KORREKTUR: :last-of-type traf jeden Block, weil jeder der einzige .am-stachel in seinem Container ist. Jetzt der letzte Container. */ .elementor > .e-con:last-child .am-stachel .st-w { padding-bottom: 120px; } @media (max-width: 980px) { .am-stachel .st-w { padding-bottom: 18px; } .am-stachel .st-w.st-w--pad-keiner { padding-top: 24px; } .am-stachel .st-w.st-w--pad-klein { padding-top: 40px; } .am-stachel .st-w.st-w--pad-normal { padding-top: 64px; } .am-stachel .st-w.st-w--pad-gross { padding-top: 88px; } .am-stachel .st-w.st-w--pad-kapitel { padding-top: 124px; } } /* FADE-AUSGLEICH */ /* 76px Verlauf + X = Sollstufe. Nur wo :has() unterstuetzt wird; sonst bleibt es beim bisherigen Verhalten. */ .elementor .e-con:has(.st-w--weich-u) + .e-con .am-stachel .st-w.st-w--pad-gross { padding-top: 68px; } .elementor .e-con:has(.st-w--weich-u) + .e-con .am-stachel .st-w.st-w--pad-normal { padding-top: 36px; } .elementor .e-con:has(.st-w--weich-u) + .e-con .am-stachel .st-w.st-w--pad-kapitel { padding-top: 128px; } /* COPY-BILD */ /* Bild im Textbaustein. Der Radius ist derselbe wie bei der Buehne — Kundenlob 21.09.: "nicht zu viel, nicht zu wenig". */ .am-stachel .st-copy-fig { margin: 28px 0 0; } .am-stachel .st-copy-fig img { display: block; width: 100%; height: auto; } .am-stachel .st-copy-fig--rund img { border-radius: 10px; } /* Bild ueber der Ueberschrift: der Abstand gehoert dann nach unten. */ .am-stachel .st-block--bild-oben > .st-copy-fig { margin: 0 0 30px; } /* Nebeneinander erst, wenn zwei Spalten auch wirklich lesbar sind. Darunter faellt das Bild automatisch unter den Text, weil der Grid-Aufbau entfaellt. */ @media (min-width: 900px) { .am-stachel .st-block--bild-rechts, .am-stachel .st-block--bild-links { display: grid; grid-template-columns: 1fr minmax(0, 42%); gap: 48px; align-items: start; } .am-stachel .st-block--bild-links { grid-template-columns: minmax(0, 42%) 1fr; } .am-stachel .st-block--bild-links > .st-block-spalte { order: 2; } .am-stachel .st-block--bild-links > .st-copy-fig { order: 1; } /* Oben buendig mit der ersten Textzeile, nicht mit dem Blockrand. */ .am-stachel .st-block--bild-rechts > .st-copy-fig, .am-stachel .st-block--bild-links > .st-copy-fig { margin-top: 6px; } } /* KOPFSPALTE + SEITENBILD */ /* .st-block-head ist sticky. Das funktioniert, solange der Kopf eine EIGENE Rasterspalte hat — er wandert dann durch leeren Raum. Steht daneben ein Bild, teilen sich Kopf und Text eine Spalte, und der klebende Kopf schiebt sich beim Scrollen ueber den Fliesstext. In dieser Kombination also nicht kleben. */ .am-stachel .st-block--bild-rechts .st-block-head, .am-stachel .st-block--bild-links .st-block-head { position: static; } /* Der Kopf steht jetzt UEBER dem Text statt daneben — er braucht den Abstand, den ihm die Rasterluecke vorher gegeben hat. */ .am-stachel .st-block--bild-rechts .st-block-body, .am-stachel .st-block--bild-links .st-block-body { margin-top: 20px; } /* Zwei Textspalten in einer halbierten Spalte ergeben Zeilen mit ~5 Woertern. Neben einem Bild also immer einspaltig. */ .am-stachel .st-block--bild-rechts .st-copy--two, .am-stachel .st-block--bild-links .st-copy--two { columns: 1; } /* BILD UNTER DER UEBERSCHRIFT */ /* Ziffer, Kicker und Ueberschrift laufen ueber die volle Breite, darunter links das Bild und rechts der Fliesstext. Drei Felder, deshalb duerfen Kopf und Text nicht in einer Spalte stecken — siehe $dreiteilig im Baustein. */ .am-stachel .st-block--bild-untertitel > .st-copy-fig { margin: 0; } @media (min-width: 900px) { .am-stachel .st-block--bild-untertitel { display: grid; grid-template-columns: minmax(0, 42%) 1fr; grid-template-areas: "kopf kopf" "bild text"; column-gap: 48px; row-gap: 30px; align-items: start; } .am-stachel .st-block--bild-untertitel > .st-block-head { grid-area: kopf; /* Die Ueberschrift steht jetzt OBEN, nicht in einer eigenen Spalte — kleben wuerde sie ueber den Text schieben. */ position: static; } .am-stachel .st-block--bild-untertitel > .st-copy-fig { grid-area: bild; } .am-stachel .st-block--bild-untertitel > .st-block-body { grid-area: text; margin: 0; } /* Der Kopf hat jetzt die volle Breite — die schmale Spaltentypografie der Kopfspalte passt dazu nicht mehr. */ .am-stachel .st-block--bild-untertitel .st-block-title { font-size: clamp(1.5rem, 2.4vw, 2rem); } .am-stachel .st-block--bild-untertitel .st-copy--two { columns: 1; } } /* Mobil: Ueberschrift, Bild, Text — genau in dieser Reihenfolge, ohne Sonderregel, weil das Raster erst ab 900px greift. */ @media (max-width: 899px) { .am-stachel .st-block--bild-untertitel > .st-copy-fig { margin: 22px 0; } } /* BILD IN DER KOPFSPALTE */ /* Das Bild steht INNERHALB von .st-block-head und bleibt damit zusammen mit der Ueberschrift stehen, waehrend rechts der Text durchlaeuft. Hier also KEIN position:static — das Kleben ist genau der Zweck. */ .am-stachel .st-block--bild-kopf .st-block-head > .st-copy-fig { margin: 22px 0 0; } @media (min-width: 900px) { /* 290px reichen fuer eine Ueberschrift, nicht fuer ein Bild. Die Kopfspalte wird breiter, der Text behaelt genug Zeilenlaenge. */ .am-stachel .st-block--bild-kopf { grid-template-columns: minmax(240px, 360px) 1fr; } /* Kopf plus Bild sind hoeher als eine Ueberschrift allein — der Klebepunkt muss weiter nach oben, sonst schiebt sich die Spalte am unteren Blockrand ueber den folgenden Abschnitt. */ /* Das Menue ist fixiert und 83px hoch. Bei 96px lag die klebende Ueberschrift dahinter. 132px setzen sie darunter — mit eingeblendeter Admin-Leiste (+32px) entsprechend tiefer. */ .am-stachel .st-block--bild-kopf .st-block-head { top: 132px; } .admin-bar .am-stachel .st-block--bild-kopf .st-block-head { top: 164px; } } @media (max-width: 899px) { /* Einspaltig: Ueberschrift, Bild, Text. Kleben ergibt hier keinen Sinn, weil nichts danebensteht, was durchlaufen koennte. */ .am-stachel .st-block--bild-kopf .st-block-head { position: static; } .am-stachel .st-block--bild-kopf .st-block-head > .st-copy-fig { margin: 20px 0 4px; } } /* KONTAKT-LINK */ /* Die Trello-Karte sieht bei INDIVIDUAL und EXQUISITE einen Button zur Terminvereinbarung vor. Bewusst zurueckhaltend: die Seite hat sonst keine Flaechen-Buttons, ein lauter Knopf waere ein Fremdkoerper. */ .am-stachel .st-cta { display: inline-block; margin-top: 6px; padding: 13px 26px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: .92rem; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: background-color .18s ease, color .18s ease; } .am-stachel .st-cta:hover, .am-stachel .st-cta:focus-visible { background: var(--accent); color: #FFFFFF; } /* SYMBOL IN DER KOPFSPALTE */ /* Steht an derselben Stelle wie das Kopfbild der Reibahle-Punkte, damit Abschnitte ohne Foto denselben Rhythmus haben. Strich statt Flaeche — die Seite kennt sonst keine flaechigen Elemente. */ /* Sitzt direkt unter der laufenden Ziffer, oberhalb des Kickers. */ .am-stachel .st-icon { margin: 12px 0 22px; color: var(--accent); opacity: .85; } .am-stachel .st-icon svg { width: 64px; height: 64px; display: block; } .am-stachel .st-section--light .st-icon { color: #0077B3; } @media (max-width: 899px) { /* Einspaltig sitzt das Symbol ueber dem Text, nicht darunter. */ .am-stachel .st-icon { margin: 10px 0 16px; } .am-stachel .st-icon svg { width: 52px; height: 52px; } } /* UNTERUEBERSCHRIFTEN GROESSER */ /* 0.9rem = 14.4px war als Label gedacht, liest sich aber zu klein fuer eine Gliederungsebene. 1.12rem = ~18px. Die Sperrung waechst nicht mit, sonst zerfaellt das Wort bei langen Begriffen wie ULTRAFEINSTKORNHARTMETALL. */ .am-stachel .st-block-kicker { font-size: 1.12rem; letter-spacing: 2.2px; margin-bottom: 16px; } .am-stachel .st-kicker { font-size: 1.12rem; letter-spacing: 3.4px; } /* Der allein stehende Kicker im Section-Auftakt bleibt klein — dort ist er eine Marke, keine Ueberschrift. */ .am-stachel .st-lead > .st-kicker:only-child { font-size: .82rem; letter-spacing: 7px; } @media (max-width: 980px) { .am-stachel .st-block-kicker { font-size: 1.02rem; letter-spacing: 1.8px; } .am-stachel .st-kicker { font-size: 1.02rem; letter-spacing: 2.6px; } } /* NOCHMAL GROESSER */ /* Kundenwunsch 29.09.: Unterueberschriften noch eine Stufe groesser, und die Beschriftungen an den Vergleichsbildern waren mit 11px deutlich zu klein zum Lesen. */ .am-stachel .st-block-kicker { font-size: 1.32rem; letter-spacing: 2px; margin-bottom: 18px; } .am-stachel .st-kicker { font-size: 1.32rem; letter-spacing: 3px; } .am-stachel .st-lead > .st-kicker:only-child { font-size: .82rem; letter-spacing: 7px; } .am-stachel .st-compare-label { font-size: .95rem; letter-spacing: 1.8px; } .am-stachel .st-band-label { font-size: .92rem; letter-spacing: 1.8px; } @media (max-width: 980px) { .am-stachel .st-block-kicker { font-size: 1.14rem; letter-spacing: 1.6px; } .am-stachel .st-kicker { font-size: 1.14rem; letter-spacing: 2.2px; } .am-stachel .st-compare-label { font-size: .86rem; } .am-stachel .st-band-label { font-size: .84rem; } } /* HALBE/HALBE */ /* Links die ganze Bildhaelfte, rechts der Text auf Grund. Braucht "Randlos", dann gibt es keine Inhaltsspalte und die Haelften reichen bis an die Fensterkanten. Das Bild wird NICHT in eine Spalte gequetscht — es fuellt seine Haelfte und behaelt seinen Ausschnitt. */ .am-stachel .st-stage--haelfte { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; } .am-stachel .st-stage--haelfte .st-stage-frame { display: contents; } .am-stachel .st-stage--haelfte .st-stage-media { height: 100%; min-height: clamp(460px, 62vh, 680px); } .am-stachel .st-stage--haelfte .st-stage-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); border-radius: 0; } .am-stachel .st-stage--haelfte .st-stage-text { position: static; transform: none; inset: auto; width: auto; max-width: none; align-self: center; /* Innen so viel Luft wie die Inhaltsspalte sonst am Rand hat. */ padding: 48px max(7%, calc((100vw - 1232px) / 2)) 48px 56px; } @media (max-width: 860px) { /* Untereinander: erst das Bild, dann der Text. */ .am-stachel .st-stage--haelfte { grid-template-columns: 1fr; } .am-stachel .st-stage--haelfte .st-stage-media { min-height: 52vh; } .am-stachel .st-stage--haelfte .st-stage-text { padding: 34px 28px 40px; } } /* Erster Absatz links, das Motiv frei in der Mitte, zweiter Absatz rechts. Kundenvorgabe 29.09.: "Die Stachelbirne darf da kein Hintergrund sein und nicht von etwas davor ueberschattet werden." Deshalb hier KEIN Verlauf, KEINE Abdunkelung, kein Element darueber. */ .am-stachel .st-stage--mitte { display: grid; /* Aus der 980px-Inhaltsspalte ausbrechen: drei Spalten darin ergeben je ~300px, also Zeilen mit sieben Woertern, und das Motiv bliebe briefmarkengross. */ grid-template-columns: 1fr minmax(320px, 38%) 1fr; grid-template-areas: "kopf kopf kopf" "links bild rechts"; column-gap: 44px; row-gap: 30px; align-items: start; } .am-stachel .st-stage--mitte::before, .am-stachel .st-stage--mitte::after { display: none; } .am-stachel .st-stage--mitte .st-stage-kopf { grid-area: kopf; } .am-stachel .st-stage--mitte .st-stage-links { grid-area: links; } .am-stachel .st-stage--mitte .st-stage-mitte { grid-area: bild; } .am-stachel .st-stage--mitte .st-stage-rechts { grid-area: rechts; } .am-stachel .st-stage--mitte .st-stage-title { font-family: var(--font-sans); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.18; color: var(--white); margin-bottom: 4px; } .am-stachel .st-section--light .st-stage--mitte .st-stage-title { color: #111315; } /* Das Bild steht frei. Voll sichtbar, nicht beschnitten. */ .am-stachel .st-stage--mitte .st-stage-mitte img { display: block; width: 100%; height: auto; border-radius: 4px; } /* Optisch mittig zu den beiden Textspalten, nicht an der Oberkante. */ .am-stachel .st-stage--mitte .st-stage-mitte { align-self: center; } @media (max-width: 900px) { /* Untereinander: Ueberschrift, erster Absatz, Bild, zweiter Absatz. */ .am-stachel .st-stage--mitte { grid-template-columns: 1fr; grid-template-areas: "kopf" "links" "bild" "rechts"; row-gap: 24px; } } /* Drei Spalten in 980px ergeben je ~300px — Zeilen mit sieben Woertern und ein briefmarkengrosses Motiv. Also beidseitig herausziehen, aber erst ab einer Fensterbreite, wo das auch Platz hat. */ @media (min-width: 1240px) { .am-stachel .st-stage--mitte { margin-inline: 0 !important; max-width: none !important; } } @media (min-width: 1500px) { .am-stachel .st-stage--mitte { margin-inline: 0 !important; max-width: none !important; } } /* MOTIV IN DER MITTE FREI */ /* Foto ueber die komplette Breite als Hintergrund. Links Ueberschrift und erster Absatz, rechts der zweite — und die MITTE bleibt frei. Kundenvorgabe 29.09.: "Das Bild muss ueber die komplette Breite gehen … in der Mitte sieht man die Spitze, weil das ja im kompletten Hintergrund ist." */ .am-stachel .st-stage--mitte { position: relative; min-height: clamp(560px, 82vh, 880px); max-width: none !important; display: block; } .am-stachel .st-stage--mitte .st-stage-media { position: absolute; inset: 0; z-index: 0; } .am-stachel .st-stage--mitte .st-stage-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); border-radius: 0; } /* Abdunkelung NUR unter den beiden Textspalten. Zwischen 38% und 62% liegt das Motiv voellig frei — kein Schleier, kein Verlauf. */ .am-stachel .st-stage--mitte::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block; background: linear-gradient(to right, rgba(0,0,0,.90) 0%, rgba(0,0,0,.78) 16%, rgba(0,0,0,.30) 29%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 71%, rgba(0,0,0,.78) 84%, rgba(0,0,0,.90) 100%); } .am-stachel .st-stage--mitte::after { display: none; } .am-stachel .st-stage--mitte .st-stage-raster { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: inherit; gap: 0; padding: 64px max(4%, calc((100vw - 1640px) / 2)); } .am-stachel .st-stage--mitte .st-stage-links { padding-right: 34px; } .am-stachel .st-stage--mitte .st-stage-rechts { padding-left: 34px; } .am-stachel .st-stage--mitte .st-stage-title { font-family: var(--font-sans); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.18; color: var(--white); margin-bottom: 18px; } @media (max-width: 900px) { /* Mobil hat eine freie Mitte keinen Sinn: Bild oben, darunter beide Absaetze. Der Verlauf laeuft dann von unten statt von den Seiten. */ .am-stachel .st-stage--mitte { min-height: 0; } .am-stachel .st-stage--mitte .st-stage-media { position: relative; height: 54vh; } .am-stachel .st-stage--mitte::before { display: none; } .am-stachel .st-stage--mitte .st-stage-raster { grid-template-columns: 1fr; padding: 30px 28px 36px; row-gap: 22px; } .am-stachel .st-stage--mitte .st-stage-frei { display: none; } .am-stachel .st-stage--mitte .st-stage-links, .am-stachel .st-stage--mitte .st-stage-rechts { padding: 0; } } /* RASTER-RESET */ /* Aus einer frueheren Fassung stammen grid-area-Namen (kopf/links/ bild/rechts). Ohne passende grid-template-areas legt der Browser sie als Linienamen aus und erzeugt zusaetzliche, leere Spalten — gemessen: fuenf Spalten statt drei. Also ausdruecklich aufheben. */ .am-stachel .st-stage--mitte .st-stage-links, .am-stachel .st-stage--mitte .st-stage-frei, .am-stachel .st-stage--mitte .st-stage-rechts { grid-area: auto !important; } .am-stachel .st-stage--mitte .st-stage-raster { grid-template-areas: none !important; } /* EIN BLAU FUER ALLE UNTERUEBERSCHRIFTEN */ /* Auf hellem Grund lief der Kicker auf #005E8C, auf dunklem auf #009EED. Zwei Blautoene fuer dieselbe Gliederungsebene. Es gilt ueberall die Akzentfarbe der Seite. */ .am-stachel .st-section--light .st-kicker, .am-stachel .st-section--light .st-block-kicker, .am-stachel .st-section--light .st-stage-text .st-block-kicker, .am-stachel .st-block-kicker, .am-stachel .st-kicker { color: var(--accent); } /* Kapitelmarken ebenfalls — auf hellem Grund standen sie auf #0077B3. */ .am-stachel .st-section--light .st-lead-title--chapter { color: var(--accent); } /* TEXT AUF DEM ANNO-FOTO */ /* Gemessen (Helligkeit 0-255): die Erklaerfotos der Stachelbirne sind oben praktisch schwarz (5-12), die Motive sitzen unten. Deshalb liegt der Text oben — ohne jede zusaetzliche Abdunkelung, die wuerde das Motiv ueberschatten. */ .am-stachel .st-block--randlos { max-width: none !important; } .am-stachel .st-block--randlos .st-annofig { max-width: none !important; width: 100% !important; margin-inline: 0 !important; } .am-stachel .st-annofig { position: relative; } .am-stachel .st-block--randlos .st-annofig img { width: 100%; height: auto; display: block; border-radius: 0; } .am-stachel .st-annofig-text { position: absolute; z-index: 4; top: 0; padding: 58px 0 0; max-width: 54%; } /* Ueber die Breite: in der Inhaltsspalte zentriert. */ .am-stachel .st-annofig-text--oben { left: 50%; transform: translateX(-50%); width: min(1100px, 86vw); max-width: none; } .am-stachel .st-annofig-text--oben-links { left: max(4%, calc((100% - 1560px) / 2)); } .am-stachel .st-annofig-text--oben-rechts { right: max(4%, calc((100% - 1560px) / 2)); text-align: right; } .am-stachel .st-annofig-text--oben-rechts .st-copy { margin-left: auto; } .am-stachel .st-annofig-title { font-family: var(--font-sans); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.16; color: var(--white); margin-bottom: 20px; } .am-stachel .st-annofig-text .st-copy p { max-width: 62ch; } .am-stachel .st-annofig-text--oben-rechts .st-copy p { margin-left: auto; } /* Die Beschriftungen am Motiv duerfen nicht mit dem Text kollidieren — sie liegen ohnehin unten, aber sicherheitshalber darunter. */ .am-stachel .st-annofig .st-anno { z-index: 3; } @media (max-width: 900px) { /* Mobil hat das Foto keine freie Flaeche fuer so viel Text: Text wieder unter das Bild. */ .am-stachel .st-annofig-text { position: static; transform: none; width: auto; max-width: none; padding: 26px 28px 0; text-align: left; } .am-stachel .st-annofig-text--oben-rechts { text-align: left; } .am-stachel .st-annofig-text--oben-rechts .st-copy, .am-stachel .st-annofig-text--oben-rechts .st-copy p { margin-left: 0; } } /* PAAR: FOTO LINKS, TEXT RECHTS */ /* Erklaerfoto und sein Absatz gehoeren zusammen — nebeneinander statt gestapelt. Das Foto behaelt seine volle Hoehe und wird nicht beschnitten; die eingezeichneten Klammern bleiben vollstaendig. */ @media (min-width: 900px) { .am-stachel .st-block--paar { display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); column-gap: 52px; align-items: start; } .am-stachel .st-block--paar > .st-band-label { grid-column: 1 / -1; } .am-stachel .st-block--paar > .st-annofig { margin: 0; } .am-stachel .st-block--paar > .st-annofig-text { position: static; transform: none; width: auto; max-width: none; padding: 0; } } /* Die Textebene liegt bei "neben" AUSSERHALB der Figur. */ .am-stachel .st-block--paar > .st-annofig-text { text-align: left; } .am-stachel .st-block--paar .st-annofig-title { margin-bottom: 18px; } @media (max-width: 899px) { .am-stachel .st-block--paar > .st-annofig-text { padding: 24px 0 0; } } /* KOPFSPALTE: LANGE KICKER */ /* Seit die Unterueberschriften 21px gross sind, passt ein Wort wie SCHWINGUNGSUEBERTRAGUNG nicht mehr in die 290px-Kopfspalte und lief in den Fliesstext daneben. Spalte etwas breiter, und das Wort darf umbrechen statt zu ueberlaufen. */ @media (min-width: 900px) { .am-stachel .st-block--side { grid-template-columns: minmax(220px, 340px) 1fr; } } .am-stachel .st-block--side .st-block-head .st-block-kicker { overflow-wrap: anywhere; hyphens: auto; letter-spacing: 1.4px; line-height: 1.25; } /* PAAR-VARIANTEN */ /* "links": Text in der linken Spalte, Foto rechts. Die Reihenfolge im Quelltext bleibt Foto-dann-Text; die Spalten tauschen per order. */ @media (min-width: 900px) { .am-stachel .st-block--paar-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%); column-gap: 52px; align-items: start; } .am-stachel .st-block--paar-links > .st-annofig { order: 2; margin: 0; } .am-stachel .st-block--paar-links > .st-annofig-text { order: 1; } .am-stachel .st-block--paar-links > .st-band-label { grid-column: 1 / -1; order: 0; } } /* In der halben Spalte waren die Beschriftungen auf 20cqw gedeckelt — bei ~520px sind das 104px, also dreizeiliger Umbruch und Ueberlagerung. In dieser Anordnung duerfen sie breiter werden. */ .am-stachel .st-block--paar .st-anno { max-width: min(42cqw, calc(97cqw - var(--x, 0%))); font-size: clamp(.72rem, 2.6cqw, 1.05rem); } /* VORHER-NACHHER-SCHIEBER */ /* Beide Bilder uebereinander, das obere per clip-path freigegeben. --schnitt steuert die Kante; der unsichtbare Regler darueber macht es bedienbar, auch per Tastatur. */ .am-stachel .st-schieber { position: relative; overflow: hidden; border-radius: 4px; --schnitt: 50%; touch-action: pan-y; } .am-stachel .st-schieber img { display: block; width: 100%; height: auto; } .am-stachel .st-schieber-oben { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--schnitt)) 0 0); } .am-stachel .st-schieber-oben img { height: 100%; object-fit: cover; object-position: left center; } /* Trennkante mit Griff. */ .am-stachel .st-schieber-griff { position: absolute; top: 0; bottom: 0; left: var(--schnitt); width: 2px; margin-left: -1px; background: rgba(255,255,255,.85); box-shadow: 0 0 12px rgba(0,0,0,.55); pointer-events: none; } .am-stachel .st-schieber-griff span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); } /* Zwei Pfeilspitzen im Griff. */ .am-stachel .st-schieber-griff span::before, .am-stachel .st-schieber-griff span::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid #fff; border-right: 2px solid #fff; } .am-stachel .st-schieber-griff span::before { left: 11px; transform: rotate(-135deg); } .am-stachel .st-schieber-griff span::after { right: 11px; transform: rotate(45deg); } /* Der Regler liegt unsichtbar ueber der ganzen Flaeche. */ .am-stachel .st-schieber-regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; } .am-stachel .st-schieber-regler:focus-visible + .st-schieber-griff, .am-stachel .st-schieber-regler:focus-visible ~ .st-schieber-griff span { outline: 2px solid var(--accent); outline-offset: 3px; } /* Marken in derselben Handschrift wie auf den anderen Fotos. */ .am-stachel .st-schieber-marke { position: absolute; top: 22px; z-index: 3; font-family: var(--font-hand); font-weight: 700; font-size: clamp(.9rem, 1.6cqw, 1.2rem); letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9); pointer-events: none; } .am-stachel .st-schieber-marke--gut { left: 26px; color: var(--corp-blue); } .am-stachel .st-schieber-marke--schlecht { right: 26px; color: #FFFFFF; } @media (max-width: 980px) { .am-stachel .st-schieber-griff span { width: 38px; height: 38px; margin: -19px 0 0 -19px; } .am-stachel .st-schieber-marke { top: 14px; font-size: .88rem; } .am-stachel .st-schieber-marke--gut { left: 16px; } .am-stachel .st-schieber-marke--schlecht { right: 16px; } } /* KEIN WEISS ZWISCHEN DEN BLOECKEN */ /* Reihenfolge ist Absicht: erst der dunkle Grundfall, dann die helleren Sonderfaelle, damit der spezifischere Ton gewinnt. */ .elementor .e-con:has(.am-stachel) { background-color: #040405; } .elementor .e-con:has(.st-w--ink2) { background-color: #060608; } .elementor .e-con:has(.st-w--black) { background-color: #000000; } .elementor .e-con:has(.st-w--paper) { background-color: #F2F1EE; } /* AUCH DIE HANDGEBAUTEN CONTAINER */ .elementor-element:has(.st-w--ink) { background-color: #040405; } .elementor-element:has(.st-w--ink2) { background-color: #060608; } .elementor-element:has(.st-w--black) { background-color: #000000; } .elementor-element:has(.st-w--paper) { background-color: #F2F1EE; } /* VERGLEICHSMARKEN IN KALAM */ .am-stachel .st-compare-label, .am-stachel .st-inset-label, .am-stachel .st-band-label { font-family: var(--font-hand); font-weight: 700; text-transform: none; letter-spacing: .5px; font-size: 1.05rem; } @media (max-width: 980px) { .am-stachel .st-compare-label, .am-stachel .st-inset-label, .am-stachel .st-band-label { font-size: .95rem; } } /* KEIN WEISSER KOERPER */ /* Nur auf Seiten mit Stachel-Bloecken. Der Seitenton statt Weiss — sichtbar wird er ohnehin nur in Luecken, die es nicht geben sollte. */ /* Die Textspalte neben dem Bild etwas schmaler, Bild 60%. */ @media (min-width: 900px) { .am-stachel .st-block--paar-links { grid-template-columns: minmax(0, 1fr) minmax(0, 60%); } } /* CONTAINER-ABSTAENDE AUF NULL */ /* Handgebaute Container bekommen Elementors Container-CSS nicht und stehen auf display:inline — dadurch sind sie hoeher als ihr Inhalt und es bleibt eine Luecke. */ .elementor-element:has(> .elementor-element > .elementor-widget-container > .am-stachel), .elementor-element:has(> .elementor-widget-container > .am-stachel) { display: block; margin: 0; padding: 0; font-size: 0; line-height: 0; } .am-stachel { font-size: 1rem; line-height: 1.6; } /* INLINE-CONTAINER GERADEZIEHEN */ /* Per Skript angelegte Container bekommen Elementors Container-CSS nicht: .e-con-inner bleibt display:inline mit 80px Innenabstand, der Kasten wird hoeher als sein Inhalt (gemessen 451 zu 400px) und die Differenz bleibt als Streifen stehen. Nur dort geradeziehen, wo ein Block sitzt. */ .e-con-inner:has(.am-stachel) { display: block; padding-block: 0; } .elementor-element:has(> .e-con-inner .am-stachel) { display: block; } /* SEITENINHALT TRAEGT DEN SEITENTON */ /* Nur auf Seiten mit Stachel-Bloecken, und nur der Inhalts- wrapper — nicht der Koerper, sonst faerbt es Kopf und Fuss der Seite mit. */ body:has(.am-stachel) { background-color: #040405; } /* PAAR OBEN BUENDIG */ /* Text und Bild beginnen auf derselben Hoehe. Mittige Ausrichtung laesst den kuerzeren Teil schweben. */ @media (min-width: 900px) { .am-stachel .st-block--paar, .am-stachel .st-block--paar-links { align-items: start; } .am-stachel .st-block--paar > .st-annofig-text { padding-top: 0; } } /* ZWEI VERGLEICHE NEBENEINANDER */ /* Ein Container mit zwei Bloecken wird zur Zweierreihe. Mobil untereinander, weil halbierte Fotos dort nichts mehr zeigen. */ @media (min-width: 900px) { .e-con-inner:has(> * + * .am-stachel) { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } } /* Schmaler Rahmen um die Vergleichsfotos. */ .am-stachel .st-annofig img { border-radius: 4px; } .e-con-inner:has(> * + * .am-stachel) .st-annofig img { border: 1px solid rgba(255,255,255,.14); border-radius: 4px; } /* ZWEIERREIHE: RILLE - TEXT - KRAGEN Im Quelltext stehen die drei Bausteine in genau dieser Reihenfolge, damit MOBIL zuerst "Die Rille im Vergleich", dann der Absatz "Wir loesen das Problem...", dann "Der Kragen im Vergleich" kommt. Ab 900px hebt das Raster den Text wieder als volle Zeile nach oben und stellt die beiden Fotos nebeneinander darunter. */ @media (min-width: 900px) { .elementor-element.am-stachel-con.am-zweier { display: grid !important; grid-template-columns: 1fr 1fr; /* .am-stachel-con setzt gap:0 !important (gegen die hellen Streifen) — nur die SPALTE zurueckholen, die Zeile bleibt 0. */ column-gap: 28px !important; row-gap: 0 !important; align-items: start; /* exakt so breit wie der Textblock */ max-width: 980px; margin-inline: auto !important; padding-inline: 0; box-sizing: border-box; } .am-zweier > :nth-child(2) { grid-row: 1; grid-column: 1 / -1; } /* Text */ .am-zweier > :nth-child(1) { grid-row: 2; grid-column: 1; } /* Rille */ .am-zweier > :nth-child(3) { grid-row: 2; grid-column: 2; } /* Kragen*/ /* ohne das stehen die Fotos 24px innerhalb der Textkante */ .am-zweier .st-shell { max-width: none; padding-inline: 0; } /* gleiches Format: quadratisch beschnitten, beide gleich gross */ .am-zweier .st-annofig img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; width: 100%; height: auto; } } /* Schmaler Rahmen um die beiden Vergleichsfotos. */ .am-zweier .st-annofig img { border: 1px solid rgba(255,255,255,.14); border-radius: 4px; } /* BUEHNE MIT BREITER TEXTSPALTE Zwischen 761 und 1100px verliert das Bild schneller Hoehe als der Text: bei 1100px waere das Motiv 556px hoch, der Text 606px. Fuer diese Buehnen wird das Motiv darum auf 6/5 gezogen und der Regler gilt auch hier weiter (sonst greift min(46ch, 56%)). */ @media (min-width: 981px) and (max-width: 1100px) { .st-stage--breit .st-stage-media { min-height: 660px; } .st-stage--breit .st-stage-text, .st-stage--breit.st-stage--bleed .st-stage-text { width: var(--text-breite, min(46ch, 56%)); } } /* Die Beschriftung im ueberlappenden Vergleichsbild ist kleiner als die freistehenden Marken — das Bild selbst ist nur rund ein Viertel der Buehne breit. */ .am-stachel .st-inset-label { font-size: .92rem; padding: 16px 12px 9px; } @media (max-width: 980px) { /* Das Vergleichsbild steht mobil gross unter dem Text — die Beschriftung darf dann nicht mehr winzig sein. */ .am-stachel .st-inset-label { font-size: 1.05rem; } } /* BESCHRIFTUNGEN AN DEN REFERENZLINIEN — MOBIL LESBAR Gemessen waren sie mobil 11.2px gegen 17.6px auf Desktop. */ @media (max-width: 980px) { .am-stachel .st-anno { font-size: .95rem; } .am-stachel .st-anno .st-anno-zusatz, .am-stachel .st-anno small { font-size: .82rem; } } /* MOBILER BILDAUSSCHNITT GILT FUER ALLE BAUFORMEN Muss nach den --mitte/--haelfte-Regeln stehen, sonst gewinnen die mit ihrem Desktop-Ausschnitt. --focus-m wird nur gesetzt, wenn am Baustein ein mobiler Ausschnitt eingetragen ist. */ @media (max-width: 980px) { .am-stachel .st-stage--mitte .st-stage-media img, .am-stachel .st-stage--haelfte .st-stage-media img, .am-stachel .st-stage--neben .st-stage-media img, .am-stachel .st-stage .st-stage-media img { object-position: var(--focus-m, var(--focus, center)); } } /* VERGLEICHSBILD MOBIL: QUERFORMAT, MITTIG */ @media (max-width: 980px) { .am-stachel .st-stage .st-stage-inset { /* genau so breit wie der Text darueber und buendig mit ihm — der Text hat 28px Innenabstand */ width: auto; margin-left: 28px !important; margin-right: 28px !important; } } /* BUEHNENHOEHE MOBIL (Regler am Baustein) */ @media (max-width: 980px) { .am-stachel .st-stage .st-stage-media[style], .am-stachel .st-stage .st-stage-media { height: var(--stage-h-m, auto); } } /* VERGLEICHSPAARE MOBIL WENIGER BESCHNEIDEN 4:3 schnitt 44-55% der Bildhoehe weg; das Motiv laeuft bei diesen Fotos aber ueber die gesamte Hoehe. */ @media (max-width: 980px) { .am-stachel .st-compare-bild img, .am-stachel .st-compare-item img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; height: auto; width: 100%; } } /* GROESSENDECKEL FUER DIE BREITEN ZWISCHEN HANDY UND DESKTOP */ @media (max-width: 980px) { .am-stachel .st-stage .st-stage-inset { max-width: 420px; } .am-stachel .st-compare-bild img, .am-stachel .st-compare-item img { max-width: 460px; } .am-stachel .st-compare-item { max-width: 460px; margin-inline: auto; } } /* ALLE VERGLEICHSFOTOS MOBIL GLEICH Gleicher seitlicher Rand wie Text und Vergleichsbild (28px), damit die Sektionen in einer Flucht stehen. */ @media (max-width: 980px) { .am-stachel .st-shell:has(.st-annofig) { padding-left: 28px; padding-right: 28px; } /* Beschriftungen an den Markierungen so gross wie der Fliesstext */ .am-stachel .st-anno { font-size: 1rem; } .am-stachel .st-anno .st-anno-zusatz, .am-stachel .st-anno small { font-size: .88rem; } } /* Abstand Ueberschrift zu Text, mobil (Regler am Baustein) */ @media (max-width: 980px) { .am-stachel .st-stage-text .st-block-title { margin-bottom: var(--titel-abstand-m, 18px); } } /* FOTO MOBIL GANZ ZEIGEN (Regler am Baustein) Querformat-Fotos wuerden in der hohen mobilen Buehne seitlich beschnitten. Eingepasst bleibt das ganze Produkt sichtbar. */ @media (max-width: 980px) { .am-stachel .st-stage--einpassen .st-stage-media img { object-fit: contain; /* Regler bleibt wirksam, sonst sitzt das Bild immer mittig */ object-position: var(--focus-m, center); } /* kein Verlauf ueber dem eingepassten Bild, sonst graut es aus */ .am-stachel .st-stage--einpassen .st-stage-frame::before { background: none; } } /* Vergleichsbild vollstaendig zeigen */ @media (max-width: 980px) { .am-stachel .st-stage--inset-ganz .st-stage-inset img { aspect-ratio: auto; object-fit: contain; height: auto; } } /* BESCHRIFTUNGEN MOBIL: EINHEITLICH GROSS, KEINE UEBERLAPPUNG */ @media (max-width: 980px) { /* gilt auch im Paar-Block, dort stand clamp(.72rem, 2.6cqw, …) und ergab bei 315px Breite nur 11.5px */ .am-stachel .st-anno, .am-stachel .st-anno--r, .am-stachel .st-block--paar .st-anno, .am-stachel .st-block--paar .st-anno--r { font-size: 1rem; /* schmaler gedeckelt: lange Beschriftungen brechen um, statt in die benachbarte zu laufen */ max-width: min(44cqw, calc(96cqw - var(--x, 0%))); } .am-stachel .st-anno--r, .am-stachel .st-block--paar .st-anno--r { max-width: min(44cqw, calc(96cqw - var(--rx, 0%))); } .am-stachel .st-anno small, .am-stachel .st-block--paar .st-anno small { font-size: .88rem; } } /* EIN EINZIGES SCHWARZ Vorher liefen #000000, #040405 und #060608 nebeneinander; an jeder Grenze war die Kante als Strich sichtbar. */ .am-stachel .st-w--black, .am-stachel .st-w--ink, .am-stachel .st-w--ink2, .am-stachel-con, .elementor .e-con:has(.am-stachel), .elementor .e-con:has(.st-w--ink2), .elementor .e-con:has(.st-w--black), .elementor-element:has(.st-w--ink), .elementor-element:has(.st-w--ink2), .elementor-element:has(.st-w--black) { background-color: #040405; } /* Helle Strecke bleibt hell — auch Container ohne eigene Farbe. */ .elementor .e-con:has(.st-w--paper), .elementor-element:has(.st-w--paper), .am-stachel-con--paper { background-color: #F2F1EE; } /* ABSTAND NACH DER WEICHEN KANTE (nur mobil) Der Verlauf ist 210px lang; der Text soll erst danach beginnen. */ @media (max-width: 980px) { .am-stachel .st-w.st-w--weich-o.st-w--pad-keiner, .am-stachel .st-w.st-w--weich-o.st-w--pad-klein, .am-stachel .st-w.st-w--weich-o.st-w--pad-normal, .am-stachel .st-w.st-w--weich-o.st-w--pad-gross, .am-stachel .st-w.st-w--weich-o.st-w--pad-kapitel { padding-top: 264px !important; } .am-stachel .st-w.st-w--weich-u.st-w--pad-keiner, .am-stachel .st-w.st-w--weich-u.st-w--pad-klein, .am-stachel .st-w.st-w--weich-u.st-w--pad-normal, .am-stachel .st-w.st-w--weich-u.st-w--pad-gross, .am-stachel .st-w.st-w--weich-u.st-w--pad-kapitel { padding-bottom: 264px !important; } } /* MOBIL: TEXT UNTER DEM FOTO (Regler am Baustein) Foto steht vollstaendig und in voller Breite oben, der Text darunter auf dem Blockgrund. Kein Verlauf noetig, weil nichts mehr uebereinander liegt. */ @media (max-width: 980px) { .am-stachel .st-stage--text-unter .st-stage-media { position: relative; inset: auto; height: auto; width: 100%; } .am-stachel .st-stage--text-unter .st-stage-media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } .am-stachel .st-stage--text-unter .st-stage-frame::before { background: none; } .am-stachel .st-stage--text-unter .st-stage-text { position: relative; padding: 28px 28px 8px; } .am-stachel .st-stage--text-unter .st-stage-text .st-block-title { margin-bottom: 18px; } } /* Verlauf-aus gilt auch mobil: dort liegt der Verlauf auf .st-stage-frame::before, nicht auf .st-stage::before. */ @media (max-width: 980px) { .am-stachel .st-stage--kein-verlauf .st-stage-frame::before { background: none; } } /* EIN BLAU AUF HELLEM GRUND Symbole, Garantie-Zahlen und Variantenkoepfe standen auf #0077B3, die Ueberschriften daneben auf #009EED. */ .am-stachel .st-section--light .st-icon, .am-stachel .st-icon, .am-stachel .st-section--light .st-guarantee-num, .am-stachel .st-section--light .st-variant--active .st-variant-head { color: var(--accent); } /* ── EIN SCHWARZ, ZWEITER ANLAUF (10.10.2026) ──────────────────── Kundenvorgabe: Der komplette dunkle Hintergrund ist reines Schwarz, nur die hellen Text-Sektionen bleiben hell. Bisher liefen drei Toene nebeneinander (#000000 im ::before von --black, #040405 auf Containern/Body, #060608 bei --ink2) — je nach Bildschirm als Grauschleier oder Kante sichtbar. Die Fotos sind an den Raendern ueberwiegend reines Schwarz (gemessen 0–2), #000000 passt also auch zu ihnen. */ .am-stachel { --ink: #000000; --ink-2: #000000; --ink-0: #000000; } body:has(.am-stachel), .am-stachel, .am-stachel .st-w--black, .am-stachel .st-w--ink, .am-stachel .st-w--ink2, .am-stachel-con, .elementor .e-con:has(.am-stachel), .elementor .e-con:has(.st-w--ink2), .elementor .e-con:has(.st-w--black), .elementor-element:has(.st-w--ink), .elementor-element:has(.st-w--ink2), .elementor-element:has(.st-w--black) { background-color: #000000; } .am-stachel .st-w--black::before, .am-stachel .st-w--ink::before, .am-stachel .st-w--ink2::before { background: #000000; } /* Helle Strecke bleibt hell. */ .elementor .e-con:has(.st-w--paper), .elementor-element:has(.st-w--paper), .am-stachel-con--paper { background-color: #F2F1EE; } /* ── FETT IST AUF DUNKLEM GRUND IMMER WEISS (10.10.2026) ───────── Text auf Fotos (.st-stage-text) hatte keine eigene Regel und erbte das Grau des Fliesstexts (gemessen 33 Stellen #C0C0C0). */ .am-stachel .st-stage-text strong, .am-stachel .st-stage-text b { color: var(--white); font-weight: 700; } /* ── HERO: „NEU – Jetzt für Cello erhältlich" GRÖSSER (10.10.2026) ── Kundenvorgabe: groesser als der Fliesstext darunter, aber kleiner als die Ueberschrift. Vorher 1.3rem = so gross wie der Fliesstext. Desktop ca. 30px (Titel 59px, Fliesstext 20px), mobil/Tablet ca. 22px. */ .st-hero-text .st-hero-badge { font-size: clamp(1.35rem, 2vw, 1.9rem); } .st-hero-badge-wort { font-size: .6em; } /* ── HERO MOBIL: „Jetzt für Cello" DIREKT UNTER DEN TITEL (10.10.2026) ── Kundenvorgabe: die Zeile steht fast direkt unter der Ueberschrift, Abstand kommt erst zum Fliesstext. Vorher umgekehrt: 44px Innen- + 22px Aussenabstand unter dem Titel, 0px vor dem Fliesstext. Gemessen 390px: Titel -> Zeile 13px, Zeile -> Fliesstext 49px. */ @media (max-width: 767px) { .am-stachel .st-hero-text .st-hero-title { padding-bottom: 0; margin-bottom: 10px; } .am-stachel .st-hero-text .st-hero-badge { margin-top: 0; } .am-stachel .st-hero-text .st-hero-lead { margin-top: 44px; } } @media (max-width: 980px) { } /* ── TABLET = DESKTOP IM HERO (10.10.2026) ─────────────────────── Kundenvorgabe: Der Hero sieht auf dem Tablet aus wie auf dem Desktop; Mobil und Desktop bleiben unveraendert. Dafuer gelten alle Hero-Regeln, die vorher bis 1160px bzw. 980px griffen, jetzt nur noch bis 767px (= Elementor-Grenze Mobil). Die uebrigen Regeln derselben Bloecke sind unberuehrt. */ /* ── HERO TABLET: TEXT DICHT UM DEN STACHEL (10.10.2026) ───────── Kundenvorgabe: zu viel Abstand zwischen Ueberschrift und Fliesstext. Auf Desktop deckelt max-height:74vh das Bild, auf dem Tablet nicht — space-between zog Kopf und Fliesstext dort 170–290px auseinander. Gemessen im Motiv (Stachel_Intro_desktop.webp, 2000x1334): Stab bei 40–50% der Bildhoehe, Cello in den linken 25% der Breite. Kopf endet 24px UEBER dem Stab, Fliesstext beginnt bei 53%, in der Mittelspalte 24–76% wie auf Desktop (frei vom Cello). N = natuerliche Bildhoehe (66.7vw), Beschnitt bei Hoehendeckel: 0.46 * (N - min(N, 74vh)) wegen object-position 46%. Ergebnis 768–1024px hoch/quer: Abstand Zeile→Fliesstext 96–118px. z-index: die letzte Zeile darf bei 768px knapp ueber die Bildkante laufen, der folgende schwarze Block lag sonst darueber. */ @media (min-width: 768px) and (max-width: 1160px) { .am-stachel .st-hero { z-index: 2; } .am-stachel .st-hero-text { justify-content: flex-start; } .am-stachel .st-hero-text .st-hero-head { position: absolute; left: 0; right: 0; bottom: calc(100% - (0.40 * 66.7vw - 0.46 * (66.7vw - min(66.7vw, 74vh))) + 24px); } .am-stachel .st-hero-text .st-hero-lead { position: absolute; left: 50%; transform: translateX(-50%); width: 52vw; top: calc(0.53 * 66.7vw - 0.46 * (66.7vw - min(66.7vw, 74vh))); } } /* ── DUO MOBIL: BILD RECHTS IM HINTERGRUND (10.10.2026) ────────── Nur Bloecke mit Schalter "Mobil: Bild rechts im Hintergrund" (.st-duo--m-rechts), nur bis 767px. Sonst ist das linke Bild mobil ausgeblendet. Kundenvorgabe fuer "Absolut einzigartig": der schmale Stab-Streifen steht ueber die volle Sektionshoehe am rechten Bildschirmrand, der Text haelt rechts Abstand (Regler "Mobil: Textabstand rechts", Standard 90px). Die Sektion (.st-w) ist der Bezugsrahmen, damit das Bild von Ober- bis Unterkante und bis an den Rand reicht. */ @media (max-width: 767px) { .am-stachel .st-w:has(.st-duo--m-rechts) { position: relative; } .am-stachel .st-w:has(.st-duo--m-rechts) .st-shell, .am-stachel .st-duo--m-rechts { position: static; } .am-stachel .st-duo--m-rechts .st-duo-media { display: block; position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; left: auto; width: auto; pointer-events: none; } .am-stachel .st-duo--m-rechts .st-duo-media picture { display: block; height: 100%; } .am-stachel .st-duo--m-rechts .st-duo-media img { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: right center; } .am-stachel .st-duo--m-rechts .st-duo-col { position: relative; z-index: 1; padding-right: var(--m-rechts, 90px); } } /* ── DUO MOBIL: BOHRUNGS-TEXT UEBER DEM FOTO (10.10.2026) ──────── Kundenvorgabe: mobil steht der Text NICHT mehr im Kasten auf dem Foto, sondern frei darueber; das Foto darunter in normaler Groesse (volle Spaltenbreite, ganzes Bild). Der Rahmen wandert vom Kasten auf das Foto. Nur Bloecke mit Schalter (st-duo--m-rechts), nur bis 767px — Tablet/Desktop behalten den Text auf dem Foto. */ @media (max-width: 767px) { .am-stachel .st-duo--m-rechts .st-duo-zweit { display: flex; flex-direction: column; height: auto; overflow: visible; border: 0; box-shadow: none; border-radius: 0; } .am-stachel .st-duo--m-rechts .st-duo-zweit-text { position: static; order: -1; padding: 0; margin-bottom: 24px; background: none; } .am-stachel .st-duo--m-rechts .st-duo-zweit picture { display: block; } .am-stachel .st-duo--m-rechts .st-duo-zweit img { width: 100%; height: auto; object-fit: contain; border: 1px solid rgba(255,255,255,.20); border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.45); } } /* ── DUO TABLET = DESKTOP (10.10.2026) ─────────────────────────── Kundenvorgabe fuer "Absolut einzigartig": Tablet (768-980px) sieht aus wie Desktop — Stab-Foto links als Hintergrund des Blocks, Text- spalte rechts, Bohrungs-Text auf dem Foto. Die allgemeinen Regeln unter max-width:980px (gestapelt, linkes Foto ausgeblendet) bleiben fuer alle anderen Duo-Bloecke bestehen; hier werden nur fuer Bloecke mit Schalter (st-duo--m-rechts) die Desktop-Werte zurueckgesetzt. Das Handyfoto greift bei diesen Bloecken erst ab 767px (Widget). */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel .st-duo--m-rechts { min-height: 620px; } .am-stachel .st-duo--m-rechts .st-duo-media { display: block; position: absolute; inset: 0; } .am-stachel .st-duo--m-rechts .st-duo-media img { height: 100%; object-fit: contain; } .am-stachel .st-duo--m-rechts .st-duo-col { width: calc(100% - var(--links, 44%)); margin-left: auto; padding: 24px 0 24px 40px; } .am-stachel .st-duo--m-rechts .st-duo-zweit { height: var(--zweit-hoehe, 620px); } .am-stachel .st-duo--m-rechts .st-duo-zweit img { height: 100%; object-fit: cover; } } /* ── BOX-UEBERSCHRIFTEN IN BLOCKBUCHSTABEN (10.10.2026) ────────── Kundenvorgabe: die Ueberschriften der Bild-Boxen ("Im Vergleich", "Guter Sitz", "Kragen — schlechter Sitz" ...) in der normalen Schrift und in Grossbuchstaben statt in Kalam. Betrifft nur .st-compare-label / .st-inset-label / .st-band-label — die Pfeil-Beschriftungen IN den Fotos (.st-anno) bleiben unveraendert. Farben bleiben wie sie sind. */ .am-stachel .st-compare-label, .am-stachel .st-inset-label, .am-stachel .st-band-label { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; font-size: .9rem; } @media (max-width: 980px) { .am-stachel .st-compare-label, .am-stachel .st-inset-label, .am-stachel .st-band-label { font-size: .84rem; } } /* ── BOX-UEBERSCHRIFTEN: NICHT FETT, NICHT KURSIV, AUSSERHALB ───── (10.10.2026, Kundenvorgabe, gilt fuer alle Box-Ueberschriften) - Nicht fett, nicht kursiv. Das Kursiv kam aus dem Theme-Reset (figcaption { font-style: italic }) und traf .st-inset-label. - "Im Vergleich" / "Mitbewerb" an den ueberlappenden Vergleichs- bildern lag IM Bild (absolut, mit Verlauf). Jetzt steht es wie die uebrigen Box-Ueberschriften UEBER dem Bild. Rahmen und Schatten wandern dafuer von der figure auf das Foto. */ .am-stachel .st-compare-label, .am-stachel .st-inset-label, .am-stachel .st-band-label { font-weight: 400; font-style: normal; } .am-stachel .st-stage-inset { display: flex; flex-direction: column; overflow: visible; border: 0; border-radius: 0; box-shadow: none; } .am-stachel .st-stage-inset > picture { display: block; order: 2; } .am-stachel .st-stage-inset img { display: block; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; box-shadow: 0 26px 70px rgba(0,0,0,.85); } .am-stachel .st-inset-label { position: static; order: 1; padding: 0 0 8px; background: none; text-shadow: 0 1px 6px rgba(0,0,0,.9); } @media (max-width: 980px) { .am-stachel .st-stage .st-stage-inset { overflow: visible; box-shadow: none; } .am-stachel .st-stage-inset img { box-shadow: 0 16px 40px rgba(0,0,0,.82); } } /* ── BOX-UEBERSCHRIFTEN: 600 UND EIN BLAU (10.10.2026) ──────────── Kundenvorgabe: Box-Ueberschriften halbfett (600). Auf der hellen Strecke ("Guter Sitz", "Kragen — schlechter Sitz") war das Blau #005E8C statt des Hellblaus #9BC8E6 der uebrigen — jetzt ueberall dasselbe. "Schlechter Sitz" bleibt grau. */ .am-stachel .st-compare-label, .am-stachel .st-inset-label, .am-stachel .st-band-label { font-weight: 600; } .am-stachel .st-section--light .st-compare-item--good .st-compare-label, .am-stachel .st-section--light .st-band-label { color: var(--accent); } /* Kundenentscheid gleicher Tag (final): auf SCHWARZ das Hellblau #9BC8E6, auf der HELLEN Strecke ("Guter Sitz", "Kragen — schlechter Sitz") das Akzentblau #009EED — Hellblau war auf hellem Grund nicht lesbar. Text und Punkt sind jeweils identisch. */ .am-stachel .st-compare-item--good .st-compare-label::before { background: #9BC8E6; } .am-stachel .st-section--light .st-compare-item--good .st-compare-label::before { background: var(--accent); } /* "KRAGEN — SCHLECHTER SITZ" BUENDIG MIT DEM BILD Im Paar "Bild rechts" lief die Ueberschrift ueber beide Spalten und stand per margin-inline:auto mittig — 33px links neben dem Bild. Jetzt steht sie in der Bildspalte, linksbuendig mit dem Foto. */ @media (min-width: 900px) { .am-stachel .st-block--paar-links > .st-band-label { grid-column: 2 / -1; margin-inline: 0; justify-self: start; max-width: none; } } /* ── ANNOFIG: TABLET WIE DESKTOP (10.10.2026) ───────────────────── Kundenvorgabe fuer "Schutzkappe im Vergleich": auf Tablet wie Desktop. Zwischen 768 und 980px galt bisher die Mobil-Fassung (Mobil-Linien, --xm/--ym, Block-Labels) — auf dem breiten Tablet- Foto trafen Linien und Beschriftungen nicht mehr. Nur Bloecke mit Schalter "Tablet wie Desktop" (.am-stachel--t-desktop); das Widget liefert dort das Mobilfoto erst bis 767px. Werte = Desktop-Regeln. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel--t-desktop .st-anno-lines--d { display: block; } .am-stachel--t-desktop .st-anno-lines--m { display: none; } .am-stachel.am-stachel--t-desktop .st-anno { display: flex; letter-spacing: .5px; left: var(--x); top: var(--y); padding-left: 15px; font-size: clamp(.8rem, 1.8cqw, 1.25rem); max-width: min(20cqw, calc(97cqw - var(--x, 0%))); text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9); } .am-stachel.am-stachel--t-desktop .st-anno--r { left: auto; right: var(--rx); padding-left: 0; max-width: min(22cqw, calc(97cqw - var(--rx, 0%))); } } /* ── VERGLEICHSBILD MOBIL: LUFT NACH UNTEN (10.10.2026) ─────────── Elementor setzt "figure { margin: 0 }" mit hoher Spezifitaet (.elementor .elementor-widget:not(...):not(...) figure). Dadurch schloss das Vergleichsbild bei 0650e77 und a28b8f6 buendig mit der Buehne ab, deren overflow:hidden schnitt den unteren Rahmen weg. Kundenvorgabe: mobil kleiner Abstand, damit der Rahmen sichtbar ist. */ @media (max-width: 767px) { .elementor .elementor-widget .am-stachel .st-stage figure.st-stage-inset { margin-bottom: 16px; } } /* ── BUEHNE: TABLET DESKTOP-BILD GANZ + MOBIL NACHLAUF (10.10.2026) ─ "Finde immer wieder deine gewohnte Position" (42f66c0): Zwischen 768 und 980px lief das Hochformat-Mobilbild (1212x2560) in einem Querformat-Rahmen mit object-fit:cover — das Produkt war fast ganz weggeschnitten. Mit Schalter "Tablet: Desktop-Bild ganz zeigen" (.am-stachel--t-desktop) liefert das Widget dort das Desktop-Bild, es steht unbeschnitten im Fluss, der Text darunter. Mobil: Regler "Abstand unter dem Text" schreibt --nachlauf-m; nur wenn gesetzt (Attribut-Selektor), sonst bleiben die 18px. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel--t-desktop .st-stage .st-stage-media, .am-stachel--t-desktop .st-stage .st-stage-media[style] { position: relative; inset: auto; height: auto; } .am-stachel--t-desktop .st-stage .st-stage-media img { height: auto; aspect-ratio: auto; object-fit: initial; } .am-stachel--t-desktop .st-stage .st-stage-frame::before { display: none; } .am-stachel.am-stachel--t-desktop .st-stage .st-stage-text { padding: 36px 28px 56px; } } @media (max-width: 767px) { .am-stachel .st-stage[style*="--nachlauf-m"]:not(.st-stage--m-oben) .st-stage-text { padding-bottom: var(--nachlauf-m); } } /* ── BUEHNE "MITTE": TABLET DESKTOP-BILD GANZ (10.10.2026) ────────── "Die Stachelbirne" (74a4e5d): 768–980px lief das Hochformat- Mobilbild in einem 300px-Streifen von oben angeschnitten — die Stachelbirne selbst war weg; 900–980px standen zudem die zwei Textspalten schon desktopartig uebers Bild. Mit dem Schalter "Tablet: Desktop-Bild ganz zeigen" kommt ab 768px das Desktop- Bild (quadratisch) unbeschnitten, Text einspaltig darunter. Nur Bausteine mit dem Schalter. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel--t-desktop .st-stage--mitte { min-height: 0; } .am-stachel--t-desktop .st-stage--mitte::before { display: none; } .am-stachel--t-desktop .st-stage--mitte .st-stage-raster { grid-template-columns: 1fr; min-height: 0; padding: 30px 28px 56px; row-gap: 22px; } .am-stachel--t-desktop .st-stage--mitte .st-stage-frei { display: none; } .am-stachel--t-desktop .st-stage--mitte .st-stage-links, .am-stachel--t-desktop .st-stage--mitte .st-stage-rechts { padding: 0; } } /* ── BUEHNE "MITTE": TABLET BILD UNTEN GEKUERZT (10.10.2026) ──────── Kundenwunsch: das quadratische Desktop-Bild auf dem Tablet unten kuerzen. 4:3, oben buendig — die Spitze endet bei ca. 58% der Bildhoehe, 75% bleiben stehen; weg ist nur schwarzer Samt. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel--t-desktop .st-stage--mitte .st-stage-media img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center top; } } /* ── BUEHNE "MITTE": DESKTOP BILD UEBER DIE GANZE HOEHE (10.10.2026) ─ "Die Stachelbirne" (74a4e5d, einzige --mitte der Seite/Website): .st-stage--bleed begrenzt das Bild auf 78vh (max 780px), der Block ist aber min. 82vh (max 880px) bzw. so hoch wie der Text — unten blieb ein schwarzer Streifen. Das Bild fuellt jetzt den Block (inset:0 aus der --mitte-Regel). */ @media (min-width: 981px) { .am-stachel .st-stage--mitte .st-stage-media { height: auto; } } /* ── BESCHRIFTUNG "SCHLECHT" ROT + KRAGEN-SCHRIFT WIE OBEN (10.10.2026) ─ Kundenwunsch: die Negativ-Beschriftungen in den Fotos ("Glanzstelle", "kein Kontakt!", "Schleifpapier beigelegt!!", "Kragen verhindert perfekten Sitz") in Rot #F20309 statt Grau. --bad gibt es nur in 60d3ae7 und 40cfbe2. Kragen-Bild (40cfbe2, Text links daneben): die Schrift skaliert mit der Bildbreite (1.8cqw); das Bild ist dort nur 60% so breit wie das Bild darueber -> 15.3 statt 17.6px. 3cqw = gleiche Groesse wie oben. Bis 980px haben beide ohnehin feste .95rem. */ .am-stachel .st-anno--bad { --c: #F20309; } @media (min-width: 981px) { .am-stachel .st-block--paar-links .st-anno { font-size: clamp(.8rem, 3cqw, 1.25rem); } } /* ── TABLET WIE DESKTOP: GUTER/SCHLECHTER SITZ + KRAGEN-SCHRIFT (10.10.2026) ─ Vergleichspaar (b8dd12e, Schalter "Tablet wie Desktop" -> .am-t-desktop an der Huelle): 768–980px die Desktop-Bilder nebeneinander in 4:3 statt untereinander quadratisch. Kragen (40cfbe2, Text links daneben ab 900px): Schrift im schmalen Bild wie am Desktop auf 3cqw, sonst waere sie nur 12.8px. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel .am-t-desktop .st-compare { grid-template-columns: 1fr 1fr; gap: 24px; } .am-stachel .am-t-desktop .st-compare-item { max-width: none; margin-inline: 0; } .am-stachel .am-t-desktop .st-compare-item img { max-width: none; aspect-ratio: 4 / 3; } } @media (min-width: 900px) and (max-width: 980px) { .am-stachel.am-stachel--t-desktop .st-block--paar-links .st-anno { font-size: clamp(.8rem, 3cqw, 1.25rem); } } /* ── "SCHLECHTER SITZ" ROT (10.10.2026) ──────────────────────────── Kundenwunsch: nur auf der Stachelseite die Ueberschrift "Schlechter Sitz" (Vergleichspaar b8dd12e) samt Punkt in Rot #F20309 statt Grau — wie die roten Beschriftungen in den Fotos. */ .page-id-22794 .am-stachel .st-compare-item--bad .st-compare-label { color: #F20309; } .page-id-22794 .am-stachel .st-compare-item--bad .st-compare-label::before { background: #F20309; } /* ── SPANNUNGSVERHAELTNISSE (e756ad1) + RILLE/KRAGEN: TABLET WIE DESKTOP, MOBIL BILD RECHTSBUENDIG (10.10.2026) ───────────────────────────── Tablet 768–980 (Schalter "Tablet: Desktop-Bild ganz zeigen" bzw. "Tablet wie Desktop"): Halb/halb wie am Desktop — Bild links, Text rechts; Rille + Kragen (.am-zweier) nebeneinander wie ab 900px. Mobil <=767 (nur Stachelseite, --haelfte gibt es nur hier): Kundenbild rechtsbuendig, etwas heller, Text rechts mit mehr Luft. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel.am-stachel--t-desktop .st-stage--haelfte { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; } .am-stachel.am-stachel--t-desktop .st-stage--haelfte .st-stage-frame { display: contents; } .am-stachel.am-stachel--t-desktop .st-stage--haelfte .st-stage-media, .am-stachel.am-stachel--t-desktop .st-stage--haelfte .st-stage-media[style] { position: relative; inset: auto; height: 100%; min-height: clamp(460px, 62vh, 680px); } .am-stachel.am-stachel--t-desktop .st-stage--haelfte .st-stage-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--focus, center); } .am-stachel.am-stachel--t-desktop .st-stage--haelfte .st-stage-text { position: static; transform: none; inset: auto; width: auto; max-width: none; align-self: center; padding: 40px 28px 40px 36px; } } @media (min-width: 768px) and (max-width: 899px) { .elementor-element.am-stachel-con.am-zweier { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 28px !important; row-gap: 0 !important; align-items: start; padding-inline: 28px; box-sizing: border-box; } .am-zweier > :nth-child(2) { grid-row: 1; grid-column: 1 / -1; } .am-zweier > :nth-child(1) { grid-row: 2; grid-column: 1; } .am-zweier > :nth-child(3) { grid-row: 2; grid-column: 2; } .am-zweier .st-shell { max-width: none; padding-inline: 0; } .am-zweier .st-annofig img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; width: 100%; height: auto; } } @media (max-width: 767px) { .page-id-22794 .am-stachel .st-stage--haelfte .st-stage-media img { object-position: right center; filter: brightness(1.3); } .page-id-22794 .am-stachel .st-stage--haelfte .st-stage-text { padding-right: 52px; } } /* Zweierreihe Tablet: der Absatz in der Mitte bekommt den Rand wie der uebrige Text (28px) — die Fotos haben ihn schon. */ @media (min-width: 768px) and (max-width: 980px) { .am-zweier > :nth-child(2) .st-shell { padding-inline: 28px; } } /* ── BUEHNE: DESKTOP VERGLEICHSBILD RECHTS UNTER DEM TEXT (10.10.2026) ─ "Nachhaltige Sicherung gegen verdrehen" (b4d19e2, Schalter "Desktop: Vergleichsbild rechts unter dem Text"): Das Mitbewerb-Bild verdeckte links unten den Stachelring. Ab 981px: Raster — das Hauptbild liegt ueber der ganzen Flaeche und behaelt seine volle Hoehe (Seitenverhaeltnis des Bildes), rechts eine Spalte mit Text und darunter das Vergleichsbild, gemeinsam senkrecht mittig. Waechst die Spalte hoeher als das Bild (schmalere Desktops), bleibt das Bild trotzdem ganz (nicht beschnitten, sonst faellt der Stachelring links heraus) und laeuft unten in den Grund aus. */ @media (min-width: 981px) { .am-stachel .st-stage.st-stage--inset-unter { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 440px) var(--text-rand, 7%); grid-template-rows: 1fr auto auto 1fr; height: auto; min-height: 0; } .am-stachel .st-stage--inset-unter .st-stage-media, .am-stachel .st-stage--inset-unter .st-stage-media[style] { grid-area: 1 / 1 / -1 / -1; position: relative; inset: auto; height: auto; min-height: 0; align-self: start; } .am-stachel .st-stage--inset-unter .st-stage-media img { width: 100%; height: auto; object-fit: initial; } .am-stachel .st-stage--inset-unter .st-stage-text { grid-area: 2 / 2; position: relative; inset: auto; transform: none; width: auto; max-width: none; margin: 0; padding: 56px 0 0; z-index: 2; } .am-stachel .st-stage--inset-unter .st-stage-inset { grid-area: 3 / 2; position: relative; inset: auto; width: 100%; max-width: none; margin: 30px 0 56px; z-index: 3; } } /* ── BUEHNE: HANDY BILD GANZ OBEN, TEXT DARUNTER (10.10.2026) ────── "Nachhaltige Sicherung gegen verdrehen" (b4d19e2, Schalter "Handy: Bild ganz oben, Text darunter"): bisher lag der Text ueber dem auf die Texthoehe beschnittenen Bild. Jetzt: Bild unbeschnitten in voller Breite, darunter der Text auf dem Grund, dann wie gehabt das Vergleichsbild. */ /* gilt seit Umbau mit Vorspann (gleicher Tag) auch auf dem Tablet: mit dem langen Text wurde das Bild dort auf ~1170px gestreckt. */ @media (max-width: 980px) { .am-stachel .st-stage--m-ganz .st-stage-media, .am-stachel .st-stage--m-ganz .st-stage-media[style] { position: relative; inset: auto; height: auto; min-height: 0; } .am-stachel .st-stage--m-ganz .st-stage-media img { height: auto; aspect-ratio: auto; object-fit: initial; } .am-stachel .st-stage--m-ganz .st-stage-frame::before { display: none; } .am-stachel.am-stachel .st-stage--m-ganz .st-stage-text { padding-top: 30px; } } /* ── BUEHNE: VORSPANN + VERGLEICHSBILD IM TEXT (10.10.2026) ───────── "Nachhaltige Sicherung gegen verdrehen" (b4d19e2): Kundenwunsch — eine Spalte: Langlebigkeit / Der einzigartige Stachelring (Vorspann, frueher eigener Block a1f4d83) -> Nachhaltige Sicherung ... -> 1. Absatz -> Mitbewerb + Foto in voller Groesse -> 2. Absatz. Gilt auf allen Geraeten. */ .am-stachel .st-stage-text .st-stage-vorspann { margin-bottom: 44px; } .elementor-widget .am-stachel .st-stage .st-stage-text figure.st-stage-inset--imtext { position: relative; inset: auto; transform: none; width: 100%; max-width: none; max-height: none; margin: 26px 0 30px !important; z-index: auto; display: flex; flex-direction: column; overflow: visible; box-shadow: none; } .elementor-widget .am-stachel .st-stage .st-stage-text figure.st-stage-inset--imtext img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; max-height: none; } /* ── REIBAHLE "EINPASSEN DER STACHELBIRNE" (eb67b00): KEIN STREIFEN UNTEN (10.10.2026) ─ Regler "Abstand unten" steht auf 0, 0 gilt im Baustein aber als "nicht gesetzt" -> Standard 24px schwarz unter dem Bild, als Strich vor der hellen Sektion sichtbar. Element-Klasse "am-ohne-nachlauf" (Elementor > Erweitert > CSS-Klassen) setzt ihn auf dem Desktop auf 0. */ @media (min-width: 981px) { .am-ohne-nachlauf .am-stachel .st-w { padding-bottom: 0; } } /* ── REIBAHLE 01–08: OHNE NUMMER, NICHT MITLAUFEND, BREITER (10.10.2026) ─ Kundenwunsch: die Kopfspalte (Kicker, Titel, Bild) laeuft nicht mehr mit, die Nummern sind weg (Feld "Ziffer" in den Daten geleert), und am Desktop nutzt der Abschnitt die volle Inhaltsbreite (1232 statt 980px) — der Zuwachs geht in die linke Spalte, damit die Bilder groesser werden; die Textspalte bleibt ~600px. Nur Elemente mit der CSS-Klasse "am-reibahle-liste" (623c7ff … 88dbe11). */ .am-reibahle-liste .am-stachel .st-block--side .st-block-head, .admin-bar .am-reibahle-liste .am-stachel .st-block--side .st-block-head { position: static; top: auto; } @media (min-width: 981px) { .am-reibahle-liste .am-stachel .st-block.st-block--side { max-width: 1232px; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: 72px; } } /* ── REIBAHLE 01–08: UEBERSCHRIFT KLAR GROESSER ALS DER KICKER (10.10.2026) ─ Kicker (Versalien, gesperrt) 21px wirkte so gross wie die Ueberschrift (27px, bei 1100px nur 22px). Ueberschrift hoch, Kicker eine Spur kleiner — nur .am-reibahle-liste. */ .am-reibahle-liste .am-stachel .st-block--side .st-block-head .st-block-kicker { font-size: 1.05rem; } .am-reibahle-liste .am-stachel .st-block--side .st-block-head .st-block-title { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.2; } /* ── REIBAHLE: ABSCHLUSS-TEXT ABGETRENNT (10.10.2026) ────────────── "Man wuerde meinen …" (edbfe11, Klasse am-reibahle-abschluss): gleiche Breite wie die Bild-Abschnitte darueber (1232px), oben ein feiner Strich in Inhaltsbreite, unten einer ueber die ganze Breite. */ .am-reibahle-abschluss .am-stachel .st-w { padding-top: 56px; padding-bottom: 64px; border-bottom: 1px solid rgba(22, 24, 26, .16); } .am-reibahle-abschluss .am-stachel .st-w > .st-shell > .st-block { border-top: 1px solid rgba(22, 24, 26, .16); padding-top: 48px; } @media (min-width: 981px) { .am-reibahle-abschluss .am-stachel .st-block, .am-reibahle-abschluss .am-stachel .st-copy { max-width: 1232px; } } /* ── LEISTUNG GARANTIERT: KARTEN + ZUGEHOERIGE ABSAETZE (10.10.2026) ─ Kundenwunsch: Handy — jede Karte steht ueber ihrem Absatz (14 / 30 / 60 Tage). Ab 768px die drei Karten nebeneinander oben, darunter alle Absaetze zweispaltig (frueher eigener Textblock 48c49c8 UEBER den Karten). Die Absaetze liegen im Karten-Feld "Absatz zur Karte" und werden je nach Breite einmal angezeigt. */ .am-stachel .st-w > .st-shell > .st-guarantee-text.st-block { margin-top: 56px; padding-top: 0; border-top: 0; } .am-stachel .st-guarantee-absatz { display: none; } @media (max-width: 767px) { .am-stachel .st-w > .st-shell > .st-guarantee-text.st-block { display: none; } .am-stachel .st-guarantee-absatz { display: block; margin: 4px 0 28px; } .am-stachel .st-guarantee-absatz:last-child { margin-bottom: 0; } } /* ── "EINE SPITZE …" (0650e77, --left): TABLET WIE DESKTOP (10.10.2026) ─ Schalter "Tablet: Desktop-Bild ganz zeigen" an; --left gibt es nur bei diesem Block. 768–980: Desktop-Bild als Flaeche, Text links darueber (Verlauf von links wie am Desktop), Vergleichsbild unten rechts auf dem Foto. Der Block waechst mit dem Text. */ @media (min-width: 768px) and (max-width: 980px) { .am-stachel.am-stachel--t-desktop .st-stage--left { position: relative; min-height: 0; display: block; } .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-frame { position: static; display: block; } .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-frame::before { display: none; } .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-media, .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-media[style] { position: absolute; inset: 0; height: auto; min-height: 0; z-index: 0; } .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--focus, center); } .am-stachel.am-stachel--t-desktop .st-stage--left::before { content: ''; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 70%); } .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-text { position: relative; inset: auto; transform: none; z-index: 2; width: 52%; max-width: 440px; margin-left: 5%; padding: 64px 0 72px; } .elementor-widget .am-stachel.am-stachel--t-desktop .st-stage--left figure.st-stage-inset { position: absolute; inset: auto; right: 5%; bottom: 8%; width: 36%; max-width: none; margin: 0 !important; z-index: 3; } .am-stachel.am-stachel--t-desktop .st-stage--left .st-stage-inset img { aspect-ratio: var(--inset-ar, 16 / 9); height: auto; } } /* ── SPANNUNGSVERHAELTNISSE (e756ad1) MOBIL: BILD BEGINNT --m-schwarz UNTER DER OBERKANTE (14.10.2026) ───────────────────────────────── Kevin: Kicker + erste Titelzeile auf Schwarz (Kevins Screenshot 15.10.), der restliche Text liegt auf dem Bild; das Bild rutscht nach unten, damit die Stachelbirne nicht vom Text verdeckt wird. Text und Bild liegen in derselben Rasterzelle, das Bild ist um --m-schwarz nach unten versetzt und in voller Höhe (nicht beschnitten). Nur <=767px, --haelfte gibt es nur hier. Tablet/Desktop unverändert. */ @media (max-width: 767px) { .page-id-22794 .am-stachel .st-stage--haelfte { --m-schwarz: 136px; } .page-id-22794 .am-stachel .st-stage--haelfte .st-stage-text { grid-area: 1 / 1; align-self: start; position: relative; z-index: 2; /* Grundregel --haelfte zentriert den Text (align-self:center) — in der gemeinsamen Zelle rutscht er dadurch nach unten auf die Stachelbirne. */ } .page-id-22794 .am-stachel .st-stage--haelfte .st-stage-media, .page-id-22794 .am-stachel .st-stage--haelfte .st-stage-media[style] { grid-area: 1 / 1; align-self: start; position: relative; z-index: 1; inset: auto; top: auto; height: auto; min-height: 0; margin-top: var(--m-schwarz); } .page-id-22794 .am-stachel .st-stage--haelfte .st-stage-media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } } /* ── REIBAHLE „EINPASSEN DER STACHELBIRNE" (eb67b00) MOBIL: TEXT AUF SCHWARZ, GRIFF MIT FESTEM ABSTAND DARUNTER (15.10.2026) ──────────── Vorher: Text-Unterabstand 38vh + Bild unten verankert (cover) → je nach Bildschirmhöhe lag der Griff auf den letzten Zeilen. Jetzt: Bild in natürlicher Größe unter dem Text, so hochgezogen, dass die Griff- Oberkante (50,5 % der Bildhöhe = 97,1 % der Breite, Bild 1331×2560) genau --griff-abstand unter dem Textende liegt. Nur <=767px. */ @media (max-width: 767px) { .page-id-22794 .elementor-element-eb67b00 .st-stage--m-oben { display: grid; --griff-abstand: 48px; } .page-id-22794 .elementor-element-eb67b00 .st-stage--m-oben .st-stage-frame { display: contents; } .page-id-22794 .elementor-element-eb67b00 .st-stage--m-oben .st-stage-text { grid-row: 1; grid-column: 1; position: relative; z-index: 2; padding-bottom: 0; } .page-id-22794 .elementor-element-eb67b00 .st-stage--m-oben .st-stage-media, .page-id-22794 .elementor-element-eb67b00 .st-stage--m-oben .st-stage-media[style] { grid-row: 2; grid-column: 1; position: relative; inset: auto; top: auto; bottom: auto; height: auto; z-index: 1; margin-top: calc(var(--griff-abstand) - 97.1%); } .page-id-22794 .elementor-element-eb67b00 .st-stage--m-oben .st-stage-media img { width: 100%; height: auto; object-fit: contain; } } /* ── ZWISCHENGROESSE 981–1300px: „Langlebigkeit / Nachhaltige Sicherung" (b4d19e2) + „Langlebiges Gewinde" (5f00035) WIE TABLET (15.10.2026) ─ Kevin: in diesem Bereich braucht der Text neben dem Bild zu viel Platz (b4d19e2) bzw. ist auf dem Foto schlecht lesbar (5f00035). Aufbau wie auf Handy/Tablet: Bild unbeschnitten in voller Breite, Text direkt darunter (Spalte max. 860px, mittig). Unter 981 und ab 1301 unverändert. */ @media (min-width: 981px) and (max-width: 1300px) { .page-id-22794 .elementor-element-b4d19e2 .am-stachel .st-stage.st-stage--inset-unter, .page-id-22794 .elementor-element-5f00035 .am-stachel .st-stage { display: block; height: auto; min-height: 0; } .page-id-22794 .elementor-element-b4d19e2 .st-stage::before, .page-id-22794 .elementor-element-b4d19e2 .st-stage::after, .page-id-22794 .elementor-element-5f00035 .st-stage::before, .page-id-22794 .elementor-element-5f00035 .st-stage::after, .page-id-22794 .elementor-element-b4d19e2 .st-stage-frame::before, .page-id-22794 .elementor-element-5f00035 .st-stage-frame::before { display: none; } .page-id-22794 .elementor-element-b4d19e2 .st-stage .st-stage-media, .page-id-22794 .elementor-element-b4d19e2 .st-stage .st-stage-media[style], .page-id-22794 .elementor-element-5f00035 .st-stage .st-stage-media, .page-id-22794 .elementor-element-5f00035 .st-stage .st-stage-media[style] { position: relative; inset: auto; height: auto; min-height: 0; width: 100%; } .page-id-22794 .elementor-element-b4d19e2 .st-stage .st-stage-media img, .page-id-22794 .elementor-element-5f00035 .st-stage .st-stage-media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; } .page-id-22794 .elementor-element-b4d19e2 .st-stage .st-stage-text, .page-id-22794 .elementor-element-5f00035 .st-stage .st-stage-text { position: relative; inset: auto; transform: none; width: auto; max-width: 860px; margin: 0 auto; padding: 40px 48px 24px; } }