/* ════════════════════════════════════════════════════════════════ AUFKLAPPER · Höhen-Animation (Ergänzung, kein neues Bauteil) Die Produktseiten haben ihr Aufklapper-System bereits vollständig: .aq-details aisq3.css · Vertiefung im Fließtext, Haarlinie, Mono-„+" rechts. Pro Rahmen- Variante anders gerahmt (aisq4--a rund 14px, aisq4--b randlos mit Oberkante). .aq-details--faq aisq5.css · FAQ-Karte, rund 11px, Rahmen blau bei hover und offen. .aq-mobacc aisq5.css · Headline-Aufklapper. Trigger ist die H2 selbst; Desktop offen, mobil zu. Diese Datei fügt NICHTS Gestalterisches hinzu — kein Rahmen, keine Farbe, kein Zeichen. Sie liefert nur das eine, was allen dreien fehlt: die Höhe fährt beim Öffnen, statt zu springen. WARUM DAS EINEN GUARD BRAUCHT (gemessen 2026-09-04, Playwright): Der naheliegende Weg — ::details-content mit block-size:auto — sieht in Chromium gut aus und SPRINGT in WebKit: Safari kennt ::details-content, aber nicht interpolate-size. Der übliche `@supports selector(...)`-Test greift deshalb zu früh. Die sonst empfohlene Grid-Lösung (0fr → 1fr) bricht auf ::details-content in beiden Engines — Chromium klappt danach nicht mehr zu. Getragen hat nur die Abfrage der Fähigkeit, auf die es wirklich ankommt: Chromium zu 37px · auf 84→123→136→141 · zu 37px Chromium reduced zu 37px · sofort 141 · zu 37px WebKit zu 37px · sofort 127 · zu 37px Safari öffnet also schlicht sofort statt zu ruckeln. Kein JS;
bleibt nativ bedienbar — Enter auf dem Trigger und der Fragment-Sprung (#id in einen geschlossenen Körper klappt ihn auf) sind in beiden Engines gegengeprüft. Lädt NACH aisq5.css. ════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ SEKTIONS-AUFKLAPPER · .aq-details--sektion (entschieden 2026-09-04) Der einzige Aufklapper-Typ im Fließtext der Produktseiten. Gliedert eine Sektion in wenige getönte Leisten — sowohl die Sektions-Blöcke als auch die Vertiefungen („Genauer: …", „Warum wir"). Eine eigene Rahmen-Karte dafür ist am 04.09. gestrichen worden: zwei Kartentypen nebeneinander waren nicht auseinanderzuhalten. Sitzt vollständig in der zweiten Spalte (.aq-split__body); die Überschrift bleibt links stehen und ist NICHT der Trigger — so bleibt die Sektion beim Scrollen auffindbar, auch wenn alles zu ist. Fläche statt Rahmen: unterscheidet sich damit deutlich von der FAQ-Karte, die als einzige gerahmt bleibt. ZWEI AUSPRÄGUNGEN (entschieden 04.09.): .aq-details--sektion getönte Leiste — wo KEIN Text direkt davorsteht (Rahmen-Sektion, Begleitung) + .aq-details.aq-details--marker Marker — wo direkt Fließtext vorausgeht („Genauer: …"). Keine Fläche, damit der Lesefluss nicht bricht. FALLE — Schriftgrößen im Trigger: .aisq6 .aq-split__body p setzt 17px mit Spezifität 0,2,1 und schlägt jede einfache Klasse. Deshalb steht im KEIN

, sondern , und die Größen kommen aus den Tokens von aisq6 (--fz-body, --fz-eyebrow), nicht aus freien Zahlen. ══════════════════════════════════════════════════════════════════ */ :root{ /* Neutrales Grau, ausdrücklich OHNE Rotstich — deshalb NICHT --bone (#EDEAE7), das ist ein warmes Grau und wirkt neben dem Blau rötlich. */ --aq-acc-grau:#F1F1F0; --aq-acc-grau-hover:#E7E7E5; --aq-acc-gelb-hover:#E4EC38; } /* Doppelte Klasse (0,2,0): .aisq4--b .aq-details setzt border-top plus margin:auto 26px 8px und wuerde sonst eine Haarlinie ueber jede Leiste legen und sie um 26px einruecken. */ .aq-details.aq-details--sektion{ border:0; margin:0 0 10px; padding:0; background:transparent; /* Auf Textbreite, nicht auf Spaltenbreite. Die rechte Spalte des .aq-split misst rund 850px, die Absaetze darueber enden aber bei 62ch — eine Leiste ueber die volle Breite haengt sonst rechts in der Luft. font-size MUSS mitgesetzt werden: `ch` loest gegen die Schriftgroesse des eigenen Elements auf. Ohne das erbt das

eine andere Groesse als der Absatz (.aq-split__body p = --fz-body) und die Kanten laufen auseinander — in WebKit gemessen 695 gegen 657px, waehrend Chromium zufaellig gleich auskam. */ font-size:var(--fz-body); max-width:62ch; } /* Steht Fliesstext davor, braucht die erste Leiste Luft — sonst klebt sie am Absatz und liest sich als dessen Fortsetzung statt als Angebot. */ p + .aq-details.aq-details--sektion, ul + .aq-details.aq-details--sektion, dl + .aq-details.aq-details--sektion{margin-top:30px;} /* Doppelte Klasse fuer Spezifitaet (0,2,1): aisq6 setzt .aisq6--j .aq-details summary hart auf --fz-body-s (15px, „Karten-/Listentext"). Der Sektions-Rang liegt eine Stufe darueber und braucht --fz-body (17px) — mit nur einer Klasse kaeme die Regel nicht durch. Das Markup traegt ohnehin beide Klassen. */ .aq-details.aq-details--sektion > summary{ display:flex; align-items:center; gap:16px; background:var(--aq-acc-grau); border-radius:14px; padding:18px 68px 18px 22px; font-size:var(--fz-body); font-weight:600; line-height:1.3; color:var(--ink); transition:background .14s var(--ease); } /* aisq5.css:67/68 behandelt Aufklapper in „Was Du mitnimmst" gesondert: padding:0 20px, weisser Grund und Trigger auf .9rem (15px), alles mit Spezifitaet (0,3,x). Beides muss hier zurueck — sonst ist derselbe Aufklapper je Sektion verschieden gross und um 20px eingerueckt. */ .aq-outcomes .aq-details.aq-details--sektion{padding:0; background:transparent;} .aq-outcomes .aq-details.aq-details--sektion > summary{font-size:var(--fz-body);} .aq-details--sektion > summary:hover{background:var(--aq-acc-grau-hover);} .aq-details--sektion[open] > summary{border-radius:14px 14px 0 0;} /* ══ MARKER · .aq-details.aq-details--marker ══════════════════════════════════ NUR fuer Klappen, denen direkt Fliesstext vorausgeht („Genauer: …"). Dort waere eine Flaeche ein Bruch im Lesefluss — hier ist der Trigger eine Zeile ueber einer Haarlinie, und beim Oeffnen faehrt der gelbe Marker hinter den Titel (dieselbe Geste wie die Highlight-Balken im Hero). Klappen OHNE Text davor — Rahmen-Sektion, Begleitung — bleiben die getoente Leiste. Braucht einen eigenen Kasten um den Titel, damit der Marker sich auf Textbreite misst: Genauer: … Fehlt das Span, bleibt der Trigger bedienbar, nur ohne Marker. ══════════════════════════════════════════════════════════════════ */ .aq-details.aq-details--marker > summary{ background:transparent; border-radius:0; padding:14px 46px 14px 0; border-bottom:1px solid rgba(26,26,26,.22); transition:border-color .2s var(--ease); } .aq-details.aq-details--marker > summary:hover{background:transparent;} .aq-details.aq-details--marker[open] > summary{border-bottom-color:transparent; border-radius:0;} .aq-details.aq-details--marker > summary .aq-acc__txt{ background-image:linear-gradient(var(--yellow),var(--yellow)); background-repeat:no-repeat; background-position:0 88%; background-size:0 8px; transition:background-size .32s var(--ease); } .aq-details.aq-details--marker[open] > summary .aq-acc__txt{background-size:100% 8px;} .aq-details.aq-details--marker > summary::after{right:0; width:30px; height:30px; font-size:1.15rem;} /* Keine seitliche Polsterung: Der Marker hat keine Flaeche, also darf der Text auch nicht eingerueckt sein — er beginnt exakt auf der Kante des Absatzes darueber und ist genauso breit (62ch = 682px bei 17px). Doppelte Klasse, weil .aq-details--sektion > .aq-details__body dieselbe Spezifitaet hat und weiter unten steht. */ .aq-details.aq-details--marker > .aq-details__body{ background:transparent; border-radius:0; margin-top:0; padding:6px 0 22px; border-bottom:1px solid rgba(26,26,26,.22); } /* Zähl-Angabe rechts neben dem Titel — sagt, was drinsteckt */ .aq-details--sektion .aq-acc__meta{ margin-left:auto; font-family:var(--font-mono); font-size:var(--fz-eyebrow); font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); white-space:nowrap; } /* Schalter — „+" im blauen Ring, wird beim Öffnen zum „–" */ .aq-details--sektion > summary::after{ content:"+"; position:absolute; right:22px; top:50%; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--blue); background:var(--paper-pure); display:grid; place-items:center; font-family:var(--font-mono); font-size:1.3rem; line-height:1; color:var(--blue); transform:translateY(-50%); transition:background .16s var(--ease), color .16s var(--ease); } .aq-details--sektion[open] > summary::after{content:"–"; transform:translateY(-50%) rotate(0);} .aq-details--sektion > summary:hover::after{background:var(--blue); color:#fff;} .aq-details--sektion > .aq-details__body{ background:var(--aq-acc-grau); border-radius:0 0 14px 14px; margin-top:-1px; padding:6px 22px 24px; } /* Die Leiste bringt ihren eigenen hellen Grund mit — also muss sie auch ihre eigene Textfarbe mitbringen. Sonst erbt sie auf dem dunklen Timing-Band (.aisq6--j .aq-jetzt, aisq6.css:475) Papierweiss und steht weiss auf Hellgrau. Spezifitaet (0,4,1), weil .aisq6--j .aq-jetzt .aq-split__body p mit (0,3,1) dagegenhaelt. */ .aq-details.aq-details--sektion > .aq-details__body, .aq-details.aq-details--sektion > .aq-details__body p, .aq-details.aq-details--sektion > .aq-details__body dd, .aq-details.aq-details--sektion > .aq-details__body li{color:var(--graphite);} .aq-details.aq-details--sektion > .aq-details__body strong, .aq-details.aq-details--sektion > .aq-details__body dt{color:var(--ink);} .aq-details.aq-details--sektion > summary{color:var(--ink);} /* Leichter Puls — nur solange zu, nur ab Motion-Stufe 6 (dort lebt auch der atmende Hero-CTA, aqMoBreath). Eigene Keyframes, weil der Ring per translateY zentriert ist und ein reines scale() das überschreiben würde. Versetzte Startzeiten, damit mehrere Leisten nicht im Gleichtakt pochen. */ @keyframes aqAccPuls{ 0%,100%{transform:translateY(-50%) scale(1);} 50% {transform:translateY(-50%) scale(1.09);} } body[data-motion="6"] .aq-details--sektion:not([open]) > summary::after{ animation:aqAccPuls 3.6s ease-in-out 1.4s infinite; } body[data-motion="6"] .aq-details--sektion:nth-of-type(2n):not([open]) > summary::after{ animation-delay:2.3s; } body[data-motion="6"] .aq-details--sektion:nth-of-type(3n):not([open]) > summary::after{ animation-delay:3.1s; } /* ══════════════════════════════════════════════════════════════════ FAQ-KARTE · .aq-details--faq (angepasst 2026-09-04) Bleibt wie in aisq5.css — 11px Radius, 1.5px Rahmen, blau im offenen Zustand —, nur luftiger. Gemessen: geschlossen 31px; mit 7.5px statt 5px Polsterung 37px, also +20%. Spezifität (0,4,1), weil .aisq5 .aq-faq .aq-details--faq summary mit (0,3,1) dagegenhält. ══════════════════════════════════════════════════════════════════ */ .aq-faq .aq-details.aq-details--faq > summary{padding:7.5px 26px 7.5px 0;} /* Auszeichnung — die Leiste mit dem Buchungsziel trägt Gelb. Doppelte Klasse aus demselben Grund wie oben: die Basisregel hat Spezifität (0,2,1) und würde das Gelb sonst wieder übermalen. Nur die LEISTE ist gelb, der Körper bleibt neutral. Ganz in Gelb kollidieren die grünen „Plätze frei"-Punkte und die blauen Buchen-Buttons mit dem Grund — die Auszeichnung soll auf die Sektion zeigen, nicht die Buchungsdaten schwerer lesbar machen. */ /* Auszeichnung — die Leiste mit dem Buchungsziel traegt Gelb. Nur die LEISTE, der Koerper bleibt neutral: vollflaechig verschwinden die gruenen „Plaetze frei"-Punkte und die blauen Buchen-Buttons flimmern. */ .aq-details.aq-details--sektion--termine > summary{background:var(--yellow);} .aq-details.aq-details--sektion--termine > summary:hover{background:var(--aq-acc-gelb-hover);} @media (max-width:600px){ .aq-details--sektion > summary{padding:15px 58px 15px 16px; gap:10px;} .aq-details--sektion > summary::after{right:16px; width:30px; height:30px; font-size:1.1rem;} .aq-details--sektion .aq-acc__meta{display:none;} .aq-details--sektion > .aq-details__body{padding:6px 16px 20px;} .aq-details.aq-details--marker > summary{padding:12px 40px 12px 0;} .aq-details.aq-details--marker > summary::after{right:0; width:26px; height:26px; font-size:1rem;} .aq-details.aq-details--marker > .aq-details__body{padding:6px 0 18px;} } @supports (interpolate-size: allow-keywords){ .aq-details, .aq-mobacc{interpolate-size:allow-keywords;} .aq-details::details-content, .aq-mobacc::details-content{ block-size:0; overflow:hidden; transition:block-size .34s var(--ease), content-visibility .34s allow-discrete; } .aq-details[open]::details-content, .aq-mobacc[open]::details-content{block-size:auto;} /* Desktop ist .aq-mobacc dauerhaft offen und der Trigger tot — dort darf nichts animieren, sonst zappelt die Sektion beim Laden. */ @media (min-width:601px){ /* Breakpoint von .aq-mobacc, aisq5.css:383 */ .aq-mobacc::details-content{transition:none;} } } /* Motion-Stufe 1 und Reduced-Motion nehmen die Bewegung zurück. */ body[data-motion="1"] .aq-details::details-content, body[data-motion="1"] .aq-mobacc::details-content{transition:none !important;} @media (prefers-reduced-motion:reduce){ .aq-details::details-content, .aq-mobacc::details-content{transition:none !important;} } /* ══════════════════════════════════════════════════════════════════ DUNKLE BÄNDER · .aq-jetzt trägt ab .aisq6--j den Grund var(--ink). Der Marker hat keine eigene Fläche, erbt dort also Anthrazit auf Schwarz — der Trigger war schlicht unsichtbar. Auf dunklem Grund drehen sich deshalb alle Werte um; der Ring wird gelb, weil Blau auf Anthrazit nicht trägt (dieselbe Entscheidung wie beim Eyebrow, aisq6.css:477). ══════════════════════════════════════════════════════════════════ */ .aq-jetzt .aq-details.aq-details--marker > summary{ color:var(--paper); border-bottom-color:rgba(251,250,249,.30); } .aq-jetzt .aq-details.aq-details--marker > summary::after{ border-color:var(--yellow); color:var(--yellow); background:transparent; } .aq-jetzt .aq-details.aq-details--marker > summary:hover::after{ background:var(--yellow); color:var(--ink); } /* Der Marker ist ein 8px-Unterstrich, KEIN vollflaechiges Highlight — der Text steht also weiter auf dem dunklen Grund und muss hell bleiben. Ihn dunkel zu faerben (frueherer Stand) machte ihn unsichtbar. Auf hellem Grund darf der Balken die Unterlaengen ueberlappen, das ist die Textmarker-Geste. Auf dunklem Grund schneidet er dagegen durch die weisse Schrift — dort ruckt er unter die Grundlinie. */ .aq-jetzt .aq-details.aq-details--marker > summary .aq-acc__txt{ padding-bottom:5px; background-position:0 100%; } .aq-jetzt .aq-details.aq-details--marker > .aq-details__body{ border-bottom-color:rgba(251,250,249,.30); } .aq-jetzt .aq-details.aq-details--marker > .aq-details__body, .aq-jetzt .aq-details.aq-details--marker > .aq-details__body p{ color:rgba(251,250,249,.78); } .aq-jetzt .aq-details.aq-details--marker > .aq-details__body strong{color:#fff;}