/* HuddleSuite Home / Startseite - Design-System-CSS * THIS FILE IS THE SOURCE. It once came from home-entwurf/home-entwurf.html; * that draft fell behind and was archived on 29.07.2026 (ARCHIV/alte-entwuerfe/). * Fonts (SIL OFL) are served locally from ../fonts/ - NO Google Fonts, DSGVO-safe. */ /* ===================================================================== HuddleSociety - Startseite (Entwurf) Markenfarbe HS: #FA06C6 (Akzent + Schatten). Die fuenf Logo-Farben gehoeren den Societies. Abschnitte im Zebra: weiss / hellgrau. Logo als echtes Vektor-SVG aus Nicoles Einzelteilen: Koerper, Handkette und Koepfe sind getrennte Ebenen - die Kette steht fest, die Figuren bewegen sich einzeln. ===================================================================== */ :root { --hs: #FA06C6; --paper: #FFFFFF; --paper-2: #DFE1E9; --ink: #0B0B0D; --ink-soft: #55525E; --line: #0B0B0D; --grey: #8B8794; /* Society-Farben - exakt die Fuellfarben aus den Logo-Dateien */ --c-yellow: #FAC306; --c-cyan: #0AB5FF; --c-pink: #FF6613; /* orange */ --c-green: #60D34F; --c-violet: #9E80E8; /* lila */ --shadow: 6px 6px 0 var(--hs); --shadow-sm: 3px 3px 0 var(--hs); --radius: 12px; /* Ueberschriften. Archivo Black wird mit der Seite ausgeliefert (SIL Open Font License), NICHT von Google nachgeladen - sonst wandert die IP jedes Besuchers zu Google und das ist der bekannte DSGVO-Verstoss. */ --display: "Archivo Black", "Segoe UI", system-ui, Arial, sans-serif; /* Fliesstext = Archivo, kursive Zeile = Newsreader (entschieden 14.07.2026) */ --body: var(--f-archivo); --serif: var(--f-newsreader); --f-segoe: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --f-archivo: "Archivo", "Segoe UI", system-ui, Arial, sans-serif; --f-georgia: Georgia, "Times New Roman", serif; --f-newsreader: "Newsreader", Georgia, serif; /* Nicoles Wortmarke, auf die Buchstaben freigestellt (1410x284). Wird als Maske benutzt, damit sie sich einfaerben laesst. */ --wordmark: url("../images/wortmarke-crop.png"); } /* --- Schriften. Alle drei liegen IN der Seite, nichts wird von Google nachgeladen. Alle unter der SIL Open Font License (frei, auch kommerziell). WOFF2 = das Web-Format, ein Fuenftel der TTF-Groesse. Bei Archivo braucht es zwei Schnitte. Die Gewichts-Bereiche (100 450 / 451 900) sind bewusst so breit angegeben: sonst rechnet der Browser bei font-weight: 800 selbst einen Fettdruck dazu und verschmiert die Buchstaben, statt den echten fetten Schnitt zu nehmen. --- */ @font-face { font-family: "Archivo Black"; font-weight: 100 900; font-display: swap; src: url("../fonts/ArchivoBlack.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-weight: 100 450; font-display: swap; src: url("../fonts/Archivo-Regular.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-weight: 451 900; font-display: swap; src: url("../fonts/Archivo-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 100 450; font-display: swap; src: url("../fonts/Newsreader-Italic.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 451 900; font-display: swap; src: url("../fonts/Newsreader-SemiBoldItalic.woff2") format("woff2"); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body) !important; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .band { padding: 76px 0; } .band-grey { background: var(--paper-2); } .wrap { max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* Winzige horizontale Ueberstaende am Handy wegschneiden (der "Blitzer" am Rand). Hier soll nie etwas absichtlich zur Seite scrollen. */ html, body { overflow-x: hidden; } /* REGEL (Nicole, 16.07.2026): Archivo Black erscheint NIE gemischt. Die engen Innenraeume von a/e/g laufen bei kleinen Groessen zu - Versalien haben die nicht. Steht hier, wo die Schrift vergeben wird, damit es fuer jede kuenftige Ueberschrift automatisch gilt. */ h1, h2, h3 { font-family: var(--display) !important; /* !important, weil Astra nackte Ueberschriften-Regeln schlaegt - derselbe Grund wie bei .claim-band h2 weiter unten. Ohne blieben die h3 gemischt. */ text-transform: uppercase !important; text-wrap: balance; margin: 0; } /* Archivo Black traegt alles, was als Ueberschrift gelesen wird - also auch die Kachel-Titel und die Buttons. Nur die kleinen Eyebrow-Zeilen bleiben in der Grundschrift: bei 12px wuerde Archivo Black mit seiner breiten Laufweite zu einem schwarzen Balken verkleben. */ .card-band, .btn { font-family: var(--display) !important; } .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; } h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; line-height: 1.1; } .lede { max-width: 62ch; color: var(--ink-soft); font-size: 18px; margin: 16px 0 0; } .stripe { display: flex; height: 10px; } .stripe span { flex: 1; } /* Reihenfolge wie im Logo, v.l.n.r.: gruen, gelb, cyan, orange, lila - damit der Streifen dasselbe zeigt wie der Balken ganz oben. */ .stripe span:nth-child(1) { background: var(--c-green); } .stripe span:nth-child(2) { background: var(--c-yellow); } .stripe span:nth-child(3) { background: var(--c-cyan); } .stripe span:nth-child(4) { background: var(--c-pink); } .stripe span:nth-child(5) { background: var(--c-violet); } /* Weisser Leitsatz-Streifen zwischen den grauen Flaechen. Fetter Satz mit Textmarker-Balken wie der Merksatz ".kicker" - seit 19.07.2026 auf Nicoles Ansage ebenfalls in Magenta (vorher Cyan). */ .claim-band { background: var(--paper); padding: 40px 0; } .claim { margin: 0 auto; max-width: 20ch; text-align: center; font-family: var(--serif) !important; font-weight: 600; /* Exakt das Mass der h2 (Nicole, 26.07.) - der Leitsatz soll so gross stehen wie "Eure Daten bleiben eure Daten" im Datenschutz-Streifen. Vorher war er groesser (bis 44px) und passte nicht in eine Zeile. */ font-size: clamp(28px, 4vw, 40px); line-height: 1.25; color: var(--ink); text-wrap: balance; } .claim b { font-style: normal; background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--hs) 42%, transparent) 62%); } /* Am Desktop laeuft der Leitsatz in EINER Zeile (Nicole, 26.07.). Dafuer muss nur die 20ch-Bremse weg; die Groesse oben passt bereits in jeder Fensterbreite ab 861px in eine Zeile. Am Handy bricht er weiter um - dort ist eine Zeile unmoeglich. */ @media (min-width: 861px) { .claim { max-width: none; white-space: nowrap; } } /* ===================================================================== HERO ===================================================================== */ .hero { padding-top: 13px; padding-bottom: 100px; position: relative; overflow: hidden; } /* Der Container behaelt die Breite der anderen Abschnitte, nur der Text darin bleibt schmal. Vorher war der Container selbst schmal - dadurch zentrierte er sich und der Hero-Text stand nicht mehr auf der Fluchtlinie der uebrigen Ueberschriften. */ .hero-grid { position: static; } .hero-grid > * { max-width: 620px; } /* --- Beta-Aufkleber im Hero ------------------------------------------ Sagt auf einen Blick zweierlei: die Seite ist noch Beta, und wann es losgeht. Bewusst KEIN schwebendes Element - am Handy (95 % der Leute) wuerde es sonst frueher oder spaeter die Ueberschrift verdecken. Gelb, weil die Wortmarke direkt darunter schon magenta ist; schwarze Schrift ist auf jeder Society-Farbe Pflicht. Kein Schatten - das Aufgeklebte macht allein die leichte Drehung. --- */ .hs-sticker { order: 0; /* unter 860px wird .hero-grid zum Flex-Container */ align-self: flex-start; /* sonst zieht der Flex-Container ihn auf volle Breite */ width: fit-content; margin: 0 0 26px; padding: 9px 18px 11px; background: var(--c-yellow); border: 3px solid var(--line); border-radius: 0; color: var(--ink); text-align: center; transform: rotate(-2deg); transform-origin: left center; } /* Astra stylt p und span direkt - ohne !important faellt die Schrift zurueck. */ .hs-sticker-top { display: block; font-family: var(--display) !important; font-size: clamp(22px, 3.4vw, 30px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; } /* Eng an das Wort darueber - beides zusammen ist EINE Aussage. */ .hs-sticker-sub { display: block; margin-top: 5px; font-family: var(--body) !important; font-weight: 700; font-size: clamp(13px, 1.6vw, 15px); line-height: 1.25; } /* Die Ueberschrift sind vier gestapelte Zeilen. Jede sitzt in einem eigenen Block, damit sich Groesse und Farbe getrennt steuern lassen. */ .hero h1 { font-size: clamp(36px, 6vw, 66px); font-weight: 900; line-height: .99; letter-spacing: -.015em; text-transform: uppercase; /* Breiter als die uebrigen Hero-Bloecke (620px), damit die grosse Wortmarke "HuddleSociety" einzeilig hineinpasst. Die kurzen schwarzen Zeilen fuellen die Breite ohnehin nicht aus. */ max-width: 780px; } /* Die drei schwarzen Zeilen laufen alle auf derselben, kleineren Groesse - so bleibt "Euer Kalender." einzeilig und die Wortmarke bekommt den Platz. */ .hero h1 > span { display: block; font-size: .77em; } /* --- Die Wortmarken-Zeile, zwei Varianten zum Vergleichen --------------- .as-type = neu gesetzt in Archivo Black (gemischt, magenta, groesser) .as-png = Nicoles Original-Schriftzug, als Maske ueber eine magenta Flaeche gelegt, damit er sich einfaerbt Umgeschaltet wird im Regler-Kasten unten rechts. */ .h1-mark { display: block; color: var(--hs); margin: .1em 0 .06em; /* Kein Schatten, keine Kontur - die Zeile traegt sich allein ueber Groesse und Farbe. Beides ausprobiert und wieder verworfen (14.07.2026). */ } .h1-mark.as-type { /* Deutlich groesser als die drei schwarzen Zeilen (die auf .77em laufen), aber garantiert einzeilig: eigene, responsive Groesse + white-space nowrap. Damit die grosse Schrift in eine Zeile passt, darf die h1 breiter sein als die uebrigen Hero-Bloecke (siehe .hero h1 { max-width }). */ font-size: clamp(30px, 9.5vw, 80px); white-space: nowrap; text-transform: none; letter-spacing: -.02em; } .h1-mark.as-png { width: clamp(230px, 62%, 420px); aspect-ratio: 1410 / 284; margin: .16em 0 .1em; font-size: 0; background: var(--hs); -webkit-mask: var(--wordmark) no-repeat left center / contain; mask: var(--wordmark) no-repeat left center / contain; } .hero-sub { font-family: var(--serif) !important; font-style: italic; /* Fett auf Nicoles Ansage (29.07.2026). 600 und nicht 700: Newsreader liegt als SemiBoldItalic lokal (deckt 451-900 ab) - eine hoehere Zahl holt keinen fetteren Schnitt, das Ergebnis waere identisch. */ font-weight: 600; font-size: clamp(19px, 2.3vw, 24px); line-height: 1.45; max-width: none; /* Der Satz ist seit 29.07.2026 laenger und passt nicht mehr in eine Zeile. balance verteilt ihn auf zwei gleich lange - ohne das bliebe "Nachbarschaft." als einzelnes Wort in der zweiten Zeile stehen. */ text-wrap: balance; margin: 24px 0 0; } .hero-body { max-width: 780px; /* laeuft ueber ~3/4 des Containers -> weniger Umbrueche */ margin: 18px 0 0; color: var(--ink-soft); } /* --- Die beiden Knoepfe im Hero -------------------------------------- Stehen seit 26.07. direkt unter dem Hero-Text; vorher lagen sie in einem eigenen grauen Streifen darunter. Linksbuendig wie der ganze Hero-Text, NICHT zentriert. Gleiche Hoehe: align-items:stretch zieht den kuerzeren auf die Hoehe des laengeren. Passt der Platz nicht (Handy), bricht die Reihe um - dann steht Demo oben. --- */ .hero-cta { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; /* 20px statt 16: die Haende am HUDDLE-UP-Knopf ragen ~10px heraus und wuerden sonst am Demo-Knopf kleben. */ gap: 20px; margin-top: 38px; max-width: none; /* sonst deckelt .hero-grid > * auf 620px */ order: 5; /* unter 860px wird der Hero zum Flex-Container: hinter hero-body (order 4) einreihen */ } /* Beide Kinder, egal welche Klasse - der HUDDLE-UP-Knopf heisst seit 26.07. .hs-btn-huddle und traegt kein .btn mehr. */ .hero-cta > * { /* grow 0 statt 1: design.css setzt am HUDDLE-UP-Knopf max-width:100% (fuers Handy) und laedt NACH dieser Datei - mit grow 1 wuchs der Knopf deshalb ueber die ganze Zeile (Nicoles Screenshot 27.07.2026). */ flex: 0 1 340px; max-width: 340px; margin: 0; } /* Das grosse Logo steht jetzt im Textfluss - zwischen der Ueberschrift und dem "Der digitale Treffpunkt"-Satz (wie schon am Handy). So ueberlappt es nie den Text. Frueher hing es am Desktop frei im Hintergrund (absolut), was ein staendiges Positionieren noetig machte; die Regler-Schieber fuer Position/Groesse/Deckkraft sind damit gegenstandslos. */ .hero-bg { width: 100%; max-width: 600px; margin: 22px 0 8px; pointer-events: none; } .hs-logo { display: block; width: 100%; height: auto; } /* --- Die Bewegung ------------------------------------------------- Die Handkette ist eine eigene Ebene und steht absolut fest. Sie wird nur von links nach rechts aufgedeckt, als wuerde sie gezeichnet. Die Figuren kommen von aussen herein und wiegen sich danach leicht. Jeder Kopf schwingt etwas weiter als sein Koerper - das liest sich als Nicken, ohne dass der Kopf sich vom Koerper loest. ------------------------------------------------------------------ */ .hero-bg .fig, .hero-bg .head { transform-box: fill-box; transform-origin: 50% 100%; } @keyframes step-in { from { opacity: 0; transform: translate(var(--dx), 150px); } to { opacity: 1; transform: none; } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes bob-head { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-29px); } } /* Kette: der Beschnitt wird von links aufgezogen */ .wipe-rect { transform-box: fill-box; transform-origin: left center; animation: wipe 1.2s cubic-bezier(.4, 0, .2, 1) .85s both; } @keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Koerper und zugehoeriger Kopf teilen Verzoegerung und Takt, sonst wandert der Kopf vom Koerper weg. */ /* --dx haengt am PLATZ, nicht an der Farbe: die Figuren laufen von aussen zusammen. Reihenfolge auf der Folie: gruen, gelb, cyan, orange, lila. */ .hero-bg .f-gruen, .hero-bg .h-gruen { --dx: -150px; } .hero-bg .f-gelb, .hero-bg .h-gelb { --dx: -80px; } .hero-bg .f-cyan, .hero-bg .h-cyan { --dx: 0px; } .hero-bg .f-orange, .hero-bg .h-orange { --dx: 80px; } .hero-bg .f-lila, .hero-bg .h-lila { --dx: 150px; } .hero-bg .fig { animation: step-in 1s cubic-bezier(.2,.8,.3,1) both, bob 5s ease-in-out infinite 1.4s; } .hero-bg .head { animation: step-in 1s cubic-bezier(.2,.8,.3,1) both, bob-head 5s ease-in-out infinite 1.4s; } .hero-bg .f-gruen, .hero-bg .h-gruen { animation-delay: 0s, 1.40s; animation-duration: 1s, 4.6s; } .hero-bg .f-gelb, .hero-bg .h-gelb { animation-delay: .1s, 1.55s; animation-duration: 1s, 5.3s; } .hero-bg .f-cyan, .hero-bg .h-cyan { animation-delay: .2s, 1.45s; animation-duration: 1s, 4.9s; } .hero-bg .f-orange, .hero-bg .h-orange { animation-delay: .3s, 1.60s; animation-duration: 1s, 5.6s; } .hero-bg .f-lila, .hero-bg .h-lila { animation-delay: .4s, 1.50s; animation-duration: 1s, 5.1s; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } /* Regel: Buttons ohne Kontur und ohne Schatten - flache, gefuellte Flaechen. AUSNAHME seit 26.07.2026: die beiden grossen Knoepfe tragen eine schwarze Kontur - Demo siehe .btn-demo weiter unten, HUDDLE UP! liegt in design.css (.hs-btn-huddle). Ohne Schatten bleiben aber auch die. */ .btn { display: inline-block; box-sizing: border-box; padding: 15px 30px; border: none; border-radius: var(--radius); background: var(--c-yellow); color: var(--ink); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; transition: filter .12s ease; } .btn:hover, .btn:focus-visible { filter: brightness(1.06); } .btn-ghost { background: #fff; color: var(--ink); } /* --- Das Band unter dem Hero --------------------------------------------- Zwei Schrauben, frei kombinierbar (Regler-Kasten): bg-* = Hintergrund des Bandes (Farbwechsel / Schwarz / Magenta / Grau) pri-* = der Haupt-Button (Schwarz / Farbwechsel / Gelb) Der zweite Button ist immer weiss mit schwarzer Kontur - so liest er sich auf JEDEM Untergrund, egal welche Kombination gewaehlt wird. Im Band haben die Buttons keinen Schatten. */ .cta-band { background: var(--ink); padding: 34px 0; } /* Erst ansehen, dann gruenden: die Demo steht UEBER dem Haupt-Button. Untereinander statt nebeneinander - nebeneinander waeren es wieder zwei gleichwertige Angebote, und genau das wollten wir aufloesen. */ .cta-band .cta-row { margin-top: 0; flex-direction: column; align-items: center; gap: 14px; } .cta-band .cta-hint { margin: 2px 0 0; font-size: 15px; color: var(--ink-soft); text-align: center; } /* Beide Buttons stehen exakt gleich breit untereinander - der eine im grauen, der andere im weissen Streifen. Die gemeinsame Breite haelt die Flucht ueber die Streifengrenze hinweg. */ .cta-wide { width: 100%; max-width: 340px; /* kompakt gehalten, damit die Buttons wie Buttons und nicht wie breite Balken wirken - die Unterzeile bricht dafuer auf zwei/drei Zeilen um */ text-align: center; } /* Der weisse Streifen mit dem eigentlichen Aufruf */ .cta-band-white { background: var(--paper); } .cta-band-white.pri-dark .btn:not(.btn-ghost) { border-color: var(--ink); } .cta-band .btn { box-shadow: none; } .cta-band .btn:hover, .cta-band .btn:focus-visible { filter: brightness(1.06); } .cta-band .btn-ghost { background: #fff; color: var(--ink); border-color: var(--ink); animation: none; } /* Hintergrund */ .cta-band.bg-cycle { animation: hue-band 36s linear infinite; } .cta-band.bg-black { background: var(--ink); } .cta-band.bg-hs { background: var(--hs); } .cta-band.bg-grey { background: var(--paper-2); } /* Brand magenta first, then the logo left to right. */ @keyframes hue-band { 0%, 13% { background: #FA06C6; } 16%, 30% { background: #60D34F; } 33%, 46% { background: #FAC306; } 50%, 63% { background: #0AB5FF; } 66%, 80% { background: #FF6613; } 83%, 96% { background: #9E80E8; } 100% { background: #FA06C6; } } /* Haupt-Button. Der schwarze bekommt eine weisse Kontur - ohne sie wuerde er auf dem schwarzen Band verschwinden. Auf dem grauen Band waere Weiss wiederum unsichtbar, dort schaltet die Kontur auf Schwarz. */ .cta-band.pri-dark .btn:not(.btn-ghost) { background: var(--ink); color: #fff; border-color: #fff; } .cta-band.pri-dark.bg-grey .btn:not(.btn-ghost) { border-color: var(--ink); } /* Der wandernde Button: hue-cycle schaltet die Schriftfarbe mit um, sonst waere die Beschriftung auf Gelb und Cyan nicht lesbar. */ .cta-band.pri-hue .btn:not(.btn-ghost) { animation: hue-cycle 36s linear infinite; border-color: var(--ink); } .cta-band.pri-yellow .btn:not(.btn-ghost) { background: var(--c-yellow); color: var(--ink); border-color: var(--ink); } /* HUDDLE UP! - der Haupt-Aufruf. Zweizeilig, wiegt sanft wie das Logo und wandert sehr langsam durch die sechs Markenfarben (hue-cycle schaltet Hintergrund UND Schriftfarbe, sonst waere der Text auf Gelb/Cyan blind). Nur der Text wiegt - Rahmen und Farbe bleiben ruhig stehen. Das Wiegen sitzt auf .btn-inner (transform), der Druck-Effekt beim Antippen (:hover) auf der Kachel selbst - so stoeren sich die beiden Bewegungen nicht. */ /* Zweizeilige Aufruf-Buttons (HUDDLE UP! + Demo): grosser Titel, kleine Unterzeile im Fliesstext. Nur der Text wiegt (transform auf .btn-inner), der Druck-Effekt beim Antippen sitzt auf der Kachel - so stoeren sich die beiden Bewegungen nicht. */ /* Beide Buttons nebeneinander, gleiche Hoehe. align-items:stretch zieht den kuerzeren auf die Hoehe des laengeren; passt der Platz nicht (Handy), bricht die Reihe um -> Demo oben, HUDDLE UP! unten. */ .cta-band .cta-duo { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; } .cta-band .cta-duo .btn { flex: 1 1 300px; max-width: 340px; margin: 0; } /* HUDDLE UP! steht NICHT mehr hier: der Knopf ist seit 26.07.2026 EIN Rezept fuer die ganze Seite und liegt in design.css unter .hs-btn-huddle (Nicole: "Es soll immer ein und derselbe Button sein"). Wer ihn aendern will, aendert ihn dort - einmal, fuer Startseite UND Society-Seite. */ .btn-demo { display: flex; justify-content: center; align-items: center; /* Inhalt mittig, wenn der Button gestreckt wird */ line-height: 1.1; } /* Schwarze Kontur (Nicole, 26.07.). 3px wie der Beta-Aufkleber; die grossen Container der Seite tragen 4px, ein Knopf waere damit klobig. */ .btn-demo { border: 3px solid var(--ink) !important; } /* Demo ansehen: weisse Flaeche, der Titel in Magenta - erst die Kontur macht das moeglich, vorher waere ein weisser Knopf auf weissem Hero unsichtbar gewesen. Die Unterzeile bleibt schwarz: Magenta ist bei 13px zu schwach zu lesen. !important, weil Astra Button-Hintergruende sonst durchmalt - das faellt erst im echten WordPress auf, nicht in der Vorschau. */ .btn-demo { background: var(--paper) !important; color: var(--ink) !important; } .btn-demo .btn-title { color: var(--hs); } .btn-inner { display: flex; flex-direction: column; align-items: center; gap: 3px; } .btn-title { font-size: 22px; letter-spacing: .03em; /* Archivo Black klein -> positive Laufweite */ } .btn-sub { font-family: var(--body) !important; font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; opacity: .95; } /* HUDDLE UP! (Farbwechsel, Wiegen, die zwei Haende an der Kontur) stand bis 26.07.2026 hier. Alles davon lebt jetzt EINMAL in design.css unter .hs-btn-huddle und gilt fuer Startseite und Society-Seite gemeinsam. */ /* Wer im Betriebssystem "weniger Bewegung" eingestellt hat, bekommt keine. Das ist kein Luxus: Bewegte Flaechen koennen Uebelkeit ausloesen. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } a:focus-visible, button:focus-visible { outline: 3px solid var(--hs); outline-offset: 3px; } /* ===================================================================== EYECATCHER ===================================================================== */ .versus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; } .panel { border: 4px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; } .panel-head { padding: 13px 18px; border-bottom: 2px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Schwarz: .panel-good steht auf Magenta - weiss waeren dort 3.6:1. */ color: var(--ink); font-family: var(--display) !important; text-transform: uppercase; } /* Die Aufzaehlung der Messenger gehoert nicht in die Fettschrift - sie ist eine Erlaeuterung, keine Ueberschrift. */ .panel-sub { display: block; margin-top: 2px; font-family: var(--body) !important; font-size: 12px; font-weight: 400; letter-spacing: 0; opacity: .9; } /* Heller, matter Kopf - schwarze Schrift, damit er nicht wichtiger wirkt als er ist. Das Grau ist der Punkt: hier passiert nichts Schoenes. */ .panel-bad .panel-head { background: #C9C6D0; color: var(--ink); font-size: 17px; letter-spacing: .02em; } /* Der Kopf bleibt ruhig auf Magenta - Farbe und Leben kommen jetzt vom wippenden Logo rechts (Kopf-Farbwechsel waere daneben zu viel Unruhe). */ .panel-good .panel-head { background: var(--hs); font-size: 22px; letter-spacing: .01em; } /* Das Logo in der Society-Kachel wippt wie im Hero (die Kette steht fest). Groesserer Ausschlag als im Hero, weil die Kachel kleiner dargestellt wird. Nutzt die vorhandenen fig/head-Klassen der Kachel-SVG. */ .panel-logo .fig, .panel-logo .head { transform-box: fill-box; transform-origin: 50% 100%; } .panel-logo .fig { animation: panel-bob 5s ease-in-out infinite; } .panel-logo .head { animation: panel-bob-head 5s ease-in-out infinite; } .panel-logo .f-gruen, .panel-logo .h-gruen { animation-delay: 0s; animation-duration: 4.6s; } .panel-logo .f-gelb, .panel-logo .h-gelb { animation-delay: .28s; animation-duration: 5.3s; } .panel-logo .f-cyan, .panel-logo .h-cyan { animation-delay: .14s; animation-duration: 4.9s; } .panel-logo .f-orange, .panel-logo .h-orange { animation-delay: .42s; animation-duration: 5.6s; } .panel-logo .f-lila, .panel-logo .h-lila { animation-delay: .22s; animation-duration: 5.1s; } @keyframes panel-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-40px); } } @keyframes panel-bob-head { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-52px); } } /* Der Kopf wandert durch alle sechs Farben. Seit der neuen Palette (16.07.2026) traegt JEDE davon schwarze Schrift (>= 5.9:1) - die Schriftfarbe muss also nicht mehr mitspringen. Reihenfolge: Marken-Magenta, dann das Logo v.l.n.r. */ @keyframes hue-cycle { 0%, 12% { background: #FA06C6; color: #0B0B0D; } 16%, 29% { background: #60D34F; color: #0B0B0D; } 33%, 46% { background: #FAC306; color: #0B0B0D; } 50%, 62% { background: #0AB5FF; color: #0B0B0D; } 66%, 79% { background: #FF6613; color: #0B0B0D; } 83%, 96% { background: #9E80E8; color: #0B0B0D; } 100% { background: #FA06C6; color: #0B0B0D; } } /* Hier stand .mark - das ✕ und der ✓ in den beiden Kachelkoepfen. Beide raus auf Nicoles Ansage (29.07.2026); die Regel wird sonst von nichts mehr benutzt. .panel-head bleibt auf space-between: mit nur noch einem Kind sitzt die Ueberschrift damit einfach links. */ .roster-row { display: flex; align-items: center; gap: 16px; padding: 18px; flex: 1; } .roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 0; } .roster li { display: flex; align-items: center; gap: 11px; font-size: 16px; } /* Die Kreise tragen die Farben der Logo-Figuren */ .avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; /* Schwarz: seit der neuen Palette traegt jede Society-Farbe schwarze Schrift. Vorher stand hier weiss mit einer Ausnahme nur fuer Gelb - auf Cyan waren das 2.3:1, auf Lila 3.1:1. */ color: var(--ink); } .a-yellow { background: var(--c-yellow); } .a-cyan { background: var(--c-cyan); } .a-violet { background: var(--c-violet); } .a-grey { background: #D6D3DA; color: var(--grey); } /* Profilbilder in der Messenger-Kachel (Nicole, 29.07.2026): zwei der drei Kreise zeigen ein Bild, der dritte bleibt "?" - genau wie im echten Messenger, wo manche ihr Gesicht zeigen, manche eine Blume, manche nichts. GEZEICHNET, nicht fotografiert: bei 28 px innen waere ein Foto ein Fleck, und ein echtes Gesicht auf der Verkaufsseite braeuchte die Zustimmung dieser Person - genau das Thema, mit dem das "Warum"-Fenster argumentiert. Bewusst NICHT in den Society-Farben: die gehoeren den Societies und stehen in der rechten Kachel. overflow+radius schneiden das quadratische SVG zum Kreis, wie ein Foto zugeschnitten waere. */ .a-photo { background: none; overflow: hidden; } .a-photo svg { width: 100%; height: 100%; display: block; } .num { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 700; } .name { font-weight: 700; } .panel-logo { width: 290px; max-width: 55%; flex: none; } .panel-foot { border-top: 2px solid var(--line); padding: 18px 18px; font-size: 17px; color: var(--ink-soft); margin-top: auto; } .kicker { margin: 44px auto 0; font-family: var(--serif) !important; font-style: italic; font-weight: 600; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.25; text-align: center; max-width: none; /* Einzeiler */ } .kicker b { font-style: normal; background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--hs) 42%, transparent) 62%); } /* ===================================================================== SCHRITTE / KACHELN / DATENSCHUTZ ===================================================================== */ .steps, .cards { display: grid; gap: 22px; margin-top: 40px; } .steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Gruenden-Knopf unter den drei Schritten (Nicole, 07.08.2026): mittig, kompakte Solo-Fassung wie auf HUDDLE UP - der Knopf bestimmt seine Breite selbst, der Container zentriert nur. */ .steps-cta { display: flex; justify-content: center; margin-top: 34px; } .steps-cta > * { flex: 0 1 auto; max-width: 100%; margin: 0; } .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* EINE Kachel allein (Kommerzielles Event, 30.07.2026): ohne Deckel wuerde auto-fit sie auf die volle Streifenbreite ziehen. */ .cards-single { grid-template-columns: minmax(0, 360px); } .step { border: 4px solid var(--line); border-radius: var(--radius); background: #fff; padding: 26px 24px 28px; } .step-no { /* Archivo Black wie die Ueberschriften (Nicole, 19.07.2026 - vorher nur fettes Archivo). */ font-family: var(--display) !important; font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--hs); } .step h3 { font-size: 19px; font-weight: 800; margin: 12px 0 8px; } .step p { margin: 0; font-size: 15.5px; color: var(--ink-soft); } /* Icons in den drei Schritt-Karten: aus den Logo-Teilen zusammengesetzt (Kette / Figuren / komplettes Mini-Logo). Nummer links, Icon rechts; feste Kopfhoehe, damit die Ueberschriften der drei Karten auf einer Linie beginnen. */ .step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 84px; } .stepicon { width: 112px; height: auto; flex: none; } .stepicon-chain { width: 128px; } /* die Kette ist flach, darf breiter sein */ .stepicon-anim { width: 136px; } /* etwas groesser, damit es zu Schritt 2 passt */ /* Schritt 3: die einzelnen Figuren wippen versetzt wie im Hero, die Kette steht fest. Werte in SVG-Einheiten (nicht Bildschirm-px), daher gross. */ .stepicon-anim .mf { animation: mini-bob 5s ease-in-out infinite; } .stepicon-anim .mf-gruen { animation-duration: 4.6s; animation-delay: 0s; } .stepicon-anim .mf-gelb { animation-duration: 5.3s; animation-delay: .28s; } .stepicon-anim .mf-cyan { animation-duration: 4.9s; animation-delay: .14s; } .stepicon-anim .mf-orange { animation-duration: 5.6s; animation-delay: .42s; } .stepicon-anim .mf-lila { animation-duration: 5.1s; animation-delay: .22s; } @keyframes mini-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-70px); } } .card { border: 4px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; } /* Archivo Black ist eine Plakatschrift: bei 60px darf sie eng stehen, bei 16px laufen die Buchstaben sonst ineinander. Deshalb hier POSITIVE Laufweite - genau andersherum als bei den grossen Ueberschriften. */ .card-band { background: var(--acc); /* Seit der neuen Palette (16.07.2026) traegt JEDE Society-Farbe schwarze Schrift. Die Ausnahmen --band-ink fuer Cyan und Gelb sind damit weg - vorher stand auf Orange, Lila und Gruen weisse Schrift (1.9-3.1:1). */ color: var(--ink); border-bottom: 2px solid var(--line); padding: 13px 18px; /* Archivo Black erscheint NIE gemischt: Versalien, sonst laufen die Innenraeume von a/e/g bei dieser Groesse zu. */ font-size: 15px; text-transform: uppercase; letter-spacing: .05em; } .card-body { padding: 20px 18px 24px; font-size: 15.5px; color: var(--ink-soft); flex: 1; } .card-body p { margin: 0; } .c1 { --acc: var(--c-cyan); } .c2 { --acc: var(--c-pink); } .c3 { --acc: var(--c-violet); } .c4 { --acc: var(--c-green); } .c5 { --acc: var(--c-yellow); } .c6 { --acc: var(--c-cyan); } /* EURE DATEN = schwarzer Container auf dem letzten, WEISSEN Streifen (Nicole, 21.07. - die Ganz-schwarzer-Streifen-Variante ist wieder raus). */ .privacy-box { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 48px 40px; } .privacy-box .eyebrow { color: #948FA0; } .privacy-box h2 { color: #fff; } .privacy-box .lede { color: #C5C1CE; } .privacy-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .privacy-list li { border-left: 4px solid var(--hs); padding-left: 16px; } .privacy-list strong { display: block; font-size: 16px; margin-bottom: 4px; } .privacy-list span { font-size: 15px; color: #ADA8B8; } /* "Warum manches hier absichtlich fehlt" als eigener weisser Streifen (Nicole, 30.07.2026; loeste den kleinen Link unterm Datenschutz-Kasten ab). Claim-Rezept wie die Leitsatz-Streifen - Newsreader kursiv, gleiche Groesse -, aber KLICKBAR: Fragezeichen-Strich-SVG davor, Hover kippt Satz UND Symbol auf Magenta (currentColor macht das von selbst). */ .warum-band .wrap { text-align: center; } .warum-big { display: inline-flex; align-items: center; justify-content: center; gap: 18px; font-family: var(--serif) !important; font-style: italic; font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.25; color: var(--ink); text-decoration: none; transition: color .12s ease; } /* Der Marker unter dem Satz - exakt das Leitsatz-Rezept (.claim b). Auf dem INNEREN , nicht dem span: der span ist im Flex-Layout ein Block, sein Marker liefe beim Umbruch ueber die volle Breite. Das Inline- markert jede Zeile nur in Textbreite (clone = Marker auch auf der zweiten Zeile). */ .warum-big i { font-style: inherit; background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--hs) 42%, transparent) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .warum-big:hover, .warum-big:focus-visible { color: var(--hs); } .warum-icon { flex: none; width: clamp(34px, 4.4vw, 46px); height: clamp(34px, 4.4vw, 46px); /* Klick-Einladung (Nicole, 30.07.2026): pulsiert langsam. 1.6s je Zyklus = 0.625 Hz, unter der 0.7-Hz-Grenze der Blink-Regel, und es FADED statt zu springen. Nur das Symbol bewegt sich, nie der Text. */ animation: warum-pulse 1.6s ease-in-out infinite; } @keyframes warum-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .72; } } @media (prefers-reduced-motion: reduce) { .warum-icon { animation: none; } } /* Desktop: EINE Zeile (wie die Leitsaetze ab 861px). */ @media (min-width: 861px) { .warum-big span { white-space: nowrap; } } /* Handy: der Satz darf umbrechen, das ? rueckt mittig DARUNTER. text-wrap: balance bricht ausgeglichen - sonst faellt "fehlt" als einzelnes Wort in die zweite Zeile (Waisen-Regel wie beim hero-sub). */ @media (max-width: 860px) { .warum-big { flex-direction: column; gap: 12px; } .warum-big span { text-wrap: balance; } } /* Beta/Preis-Feld (21.07.2026). Die Kacheln sind das vorhandene .card- Rezept - kein zweites Kachel-System, nur der grosse Preis kommt dazu. */ .price-tag { font-family: var(--display) !important; font-size: 44px; line-height: 1; letter-spacing: -.02em; margin: 0 0 10px !important; color: var(--ink); } .price-tag small { font-size: 16px; letter-spacing: 0; } .price-foot { /* volle Breite (Nicole, 21.07.) - der Satz soll durchlaufen, nicht wie die lede auf 62ch umbrechen */ max-width: none; color: var(--ink-soft); font-size: 15.5px; margin: 26px 0 0; } /* AUSNAHMSWEISE volle Textbreite im ganzen Preis-Streifen (Nicole, 30.07.2026): "viel Text" - jeder Fliesstext laeuft bis zum Ende der zweiten Kachel durch statt bei 62ch umzubrechen. Gilt NUR hier. */ .price-band .lede { max-width: none; } /* DIE AUSNAHME haengt im selben grauen Streifen unter "...ins Haus." - der Abstand markiert den Themenwechsel, die h2 macht den Rest. */ .ausnahme-block { margin-top: 56px; } /* Gruenden-CTA: weisser Container im grauen Preis-Streifen, linksbuendig (Nicole, 21.07.) - gleiches Rezept wie die Kacheln (4px Rahmen, Radius). Die alte eigene .close-Sektion ist damit Geschichte. */ .close-box { /* Weisse Kachel drumherum RAUS (Nicole, 27.07.2026) - der Gruenden-CTA steht jetzt nackt im grauen Streifen, nur der Abstand bleibt. */ margin-top: 44px; } .close-box h2 { font-size: clamp(24px, 3.2vw, 32px); } .close-box .cta-row { margin-top: 24px; } .note h2 { font-size: 22px; } .note-scroll { overflow-x: auto; } .note table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 15px; } .note th, .note td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #DBD8E0; vertical-align: top; } .note th { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; } .note code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13.5px; background: #fff; border: 1px solid #D3D0D8; border-radius: 5px; padding: 2px 6px; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media (max-width: 860px) { .versus-grid { grid-template-columns: 1fr; } /* Am Handy ist kein Platz fuer ein Hintergrundbild - das Logo wird zur eigenen Zeile und stellt sich zwischen die Ueberschrift und den Treffpunkt-Satz. Die Reihenfolge kommt aus dem Code, "order" schiebt nichts mehr um; die Zeilen brauchen sie nur, weil der Container hier zum Flex-Container wird. */ .hero-grid { display: flex; flex-direction: column; } .hero h1 { order: 1; } .hero .hero-bg { order: 2; } .hero-sub { order: 3; } .hero-body { order: 4; } .hero-bg { position: static; width: 100%; max-width: none; opacity: 1; margin: 26px 0 4px; } } @media (max-width: 600px) { body { font-size: 16px; } .band { padding: 52px 0; } .hero { padding-top: 9px; padding-bottom: 64px; } .privacy-box { padding: 34px 22px; } .hero-sub, .hero-body, .lede { max-width: none; } .roster-row { flex-direction: column; align-items: stretch; } .panel-logo { width: 100%; max-width: 220px; align-self: center; } } /* --- WordPress: brand stripe above the theme header/menu ---------------- */ .stripe-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } body.admin-bar .stripe-top { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .stripe-top { top: 46px; } } /* --- Section headings always in CAPS ------------------------------------ Archivo-Black section headers that sit OUTSIDE a card must be uppercase. The bare `h2` rule (0,0,1) loses to the Astra theme, so we scope by band to raise specificity (and add !important as a belt-and-braces against Astra). Card titles are

and stay untouched. */ .hero h2, .band h2, .cta-band h2, .claim-band h2 { text-transform: uppercase !important; }