/* Teil 1 von 2: gemeinsame Grundlage aller CWG-Marken, Quelle _Kern/tokens.css */ /* ============================================================================ CWG · Gemeinsame Grundlage aller Marken Angelegt 24.08.2026. Vorher hatte jede Seite ihr eigenes System: Curawel AT und DE teilten sich 157 CSS-Klassen, Pflegegruppe drei davon, Welmoa vier. Drei Inhaltsbreiten (1280, 1220, 1180), drei Sektionsabstaende, drei Schattensaetze, vier Knopfgeometrien. Das sah nicht nach einer Familie aus. Die Trennlinie ist einfach: alles was Form ist, steht hier und gilt fuer alle. Alles was Farbe ist, kommt aus dem Markenblock weiter unten. Umgeschaltet wird ueber data-marke am . Diese Datei wird von build.py vor die seiteneigene CSS gehaengt, es gibt also keinen zusaetzlichen Ladevorgang. ============================================================================ */ /* ---------------------------------------------------------------- Schriften Alle CWG-Marken tragen dieselbe Schrift. Avant Garde gibt es nur in einem Schnitt, deshalb font-synthesis:none und Ueberschriften immer auf 500. Nie kuenstlich fetten, das zerstoert die Zeichnung der Schrift. */ @font-face{font-family:"AvantGarde";src:url("/cwg/welmoa/fonts/ITCAvantGardeGothicMedium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Unica";src:url("/cwg/welmoa/fonts/NeueHaasUnicaRegular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Unica";src:url("/cwg/welmoa/fonts/NeueHaasUnicaBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} :root{ /* -------------------------------------------------------------- Typografie Die Skala kommt von Curawel, weil sie als einzige alle vier Stufen mit eigener Zeilenhoehe definiert. */ --schrift-display:"AvantGarde","Unica",sans-serif; --schrift-text:"Unica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --fs-body:1.0625rem; /* 17px, war auf drei Seiten schon so */ --lh-body:1.62; --fs-h1:clamp(2.25rem,1.25rem + 3.4vw,4.1rem); --lh-h1:1.07; --fs-h2:clamp(1.75rem,1.15rem + 2.1vw,2.9rem); --lh-h2:1.12; --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.5rem); --lh-h3:1.25; --fs-h4:1.0625rem; --lh-h4:1.3; --fs-lead:clamp(1.05rem,1rem + .35vw,1.24rem); --lh-lead:1.58; --fs-klein:.9375rem; --fs-eyebrow:.75rem; --ls-eng:-.015em; /* h1 und h2 */ --ls-h3:-.01em; --ls-eyebrow:.12em; /* ------------------------------------------------------------------ Raster 1280 war der groesste der drei Werte und traegt die breiten Tabellen der Standortseiten. */ --wrap:1280px; --wrap-schmal:800px; --gut:clamp(1.25rem,4vw,2.5rem); /* 20 bis 40px statt fester 24px */ --sec:clamp(4.5rem,8vw,7.5rem); /* 72 bis 120px, Mitte der drei Systeme */ --sprung:96px; /* Abstand fuer Sprungmarken unter dem Kopf */ --gap-1:.5rem; --gap-2:.75rem; --gap-3:1rem; --gap-4:1.25rem; --gap-5:1.5rem; --gap-6:2rem; --gap-raster:clamp(1rem,2vw,1.5rem); /* ------------------------------------------------------------------ Radien */ --r-s:14px; /* war ueberall schon 14 */ --r-m:20px; --r-l:28px; --r-voll:999px; /* ---------------------------------------------------------------- Bewegung */ --ease:cubic-bezier(.2,.7,.3,1); --ease-pop:cubic-bezier(.34,1.4,.64,1); /* nur fuer die Hover-Anhebung */ --dur-flink:.18s; --dur:.25s; --dur-ruhig:.55s; --lift:-3px; /* eine Anhebung statt 0, 1 und 3px */ /* ----------------------------------------------------------------- Knoepfe */ --btn-h:52px; --btn-h-klein:44px; --btn-pad:15px 28px; --btn-pad-klein:11px 20px; --btn-radius:var(--r-voll); --btn-gewicht:700; --btn-rand:2px; /* ---------------------------------------------------------------- Schatten Der Ton kommt aus der Marke, damit ein Schatten unter einer tuerkisen Karte nicht blaeulich wirkt. */ --sh-1:0 2px 8px rgb(var(--schatten-ton) / .06); --sh-2:0 14px 36px rgb(var(--schatten-ton) / .11); --sh-3:0 30px 70px rgb(var(--schatten-ton) / .18); } /* ============================================================================ Markenfarben Alle Werte aus den echten Logo-Dateien gemessen, nicht geschaetzt. Jede Marke fuellt dieselben Steckplaetze: --marke Primaerfarbe, traegt weisse Schrift --marke-tief dunklere Stufe fuer kleine Schrift und Hover --marke-hell aufgehellt, reine Flaeche, nie Text auf Weiss --akzent Akzentfarbe als Flaeche (Logofarbe, oft zu hell fuer Text) --akzent-voll derselbe Akzent abgedunkelt, traegt weisse Schrift (>= 4,5:1) --akzent-tief Hover zu --akzent-voll --dunkel Nachtflaeche fuer dunkle Abschnitte --text Fliesstext --gedaempft Grautext, mindestens 4,5:1 auf --flaeche --linie Trennlinien und Rahmen --flaeche Karten und Inhaltsflaechen --flaeche-2 zarte Fuellung, Chips, Tabellenzeilen --grund Seitenhintergrund --schatten-ton RGB-Tripel ohne Klammern, fuer die Schatten oben ============================================================================ */ /* CURAWEL, Logo: #1e70bb und #eb4b00 (logo-curawel.svg Zeile 6, 10, 14) */ :root, [data-marke="curawel"]{ --marke:#1e70bb; --marke-tief:#1a5f9e; --marke-hell:#b1d0eb; --marke-mittel:#68a0d3; --akzent:#eb4b00; --akzent-voll:#c33f00; --akzent-tief:#a03300; --dunkel:#052b59; --text:#052b59; --gedaempft:#4d6a89; --linie:#d9e6f2; --linie-zart:#e9f0f7; --flaeche:#ffffff; --flaeche-2:#f2f7fc; --flaeche-3:#e8f1f9; --grund:#ffffff; --schatten-ton:5 43 89; } /* PFLEGEGRUPPE, Logo: #1E70BB, #EB4B00, Wortmarke #3D3D3C (pflegegruppe_logo_2025.svg). Gleiche Familie wie Curawel, deshalb dieselben Grundtoene, aber eigene Tiefe und eigener Grund. */ [data-marke="pflegegruppe"]{ --marke:#1e70bb; --marke-tief:#175a96; --marke-hell:#a9d3f5; --marke-mittel:#5f9fd8; --akzent:#eb4b00; --akzent-voll:#c04000; --akzent-tief:#a03300; --dunkel:#0a1826; --text:#0f1f2e; --gedaempft:#5a6b7d; --linie:#dde7f2; --linie-zart:#eaf1fa; --flaeche:#ffffff; --flaeche-2:#eaf1fa; --flaeche-3:#dfeaf7; --grund:#f5f8fd; --schatten-ton:15 31 46; --wortmarke:#3D3D3C; } /* WELMOA, Logo: Tiefton #104458, Tuerkis #5EBFC0 (welmoa.svg Zeile 3-7). Das Tuerkis hat auf Weiss nur 2,17:1 und bleibt deshalb reine Flaeche. Fuer Text und gefuellte Knoepfe steht #0B6D7A (6,03:1). */ [data-marke="welmoa"]{ --marke:#104458; --marke-tief:#0B3140; --marke-hell:#A9E0E1; --marke-mittel:#3f8081; --akzent:#5EBFC0; --akzent-voll:#0B6D7A; --akzent-tief:#08535D; --dunkel:#0B3140; --text:#0C2C36; --gedaempft:#456570; --linie:#D5E9EC; --linie-zart:#E8F6F7; --flaeche:#ffffff; --flaeche-2:#E8F6F7; --flaeche-3:#D9F0F1; --grund:#F3FAFB; --schatten-ton:16 68 88; } /* AUSTRIFY MEDICAL, Logo: #1f486d und #469dd2 (austrify-medical.svg). Die Seite laeuft live und wird nicht umgebaut. Der Steckplatz steht hier, damit die Marke im System vorhanden ist und spaeter nicht hineingezwaengt werden muss. #469dd2 hat auf Weiss nur 2,99:1, deshalb --akzent-voll. */ [data-marke="austrify"]{ --marke:#1f486d; --marke-tief:#16344e; --marke-hell:#a8cfe9; --marke-mittel:#469dd2; --akzent:#469dd2; --akzent-voll:#377ca6; --akzent-tief:#2c6486; --dunkel:#16344e; --text:#16344e; --gedaempft:#4a6478; --linie:#dde5ee; --linie-zart:#eef3f8; --flaeche:#ffffff; --flaeche-2:#eef3f8; --flaeche-3:#e2ecf5; --grund:#f7fafc; --schatten-ton:31 72 109; } /* CW GROUP, Logo: #004a80 (Logos/CWG/logo-svg.svg). Die Website setzte bisher #014a80, ein Punkt daneben. Es gilt das Logo. Das Dach tritt visuell zurueck und ueberlaesst den Marken die Buehne. */ [data-marke="cwg"]{ --marke:#004a80; --marke-tief:#00375e; --marke-hell:#7fb2d9; --marke-mittel:#2e7cb0; --akzent:#ea5b0c; --akzent-voll:#c94e0a; --akzent-tief:#a83f08; --dunkel:#012c4d; --text:#1a2432; --gedaempft:#5b6879; --linie:#e2e7ee; --linie-zart:#eef1f6; --flaeche:#ffffff; --flaeche-2:#f2f5f8; --flaeche-3:#e6ecf3; --grund:#ffffff; --schatten-ton:1 36 60; } /* ------------------------------------------------------ Gemeinsame Grundlage Was auf jeder Seite gleich aussehen muss, egal welche Marke. */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--sprung); color-scheme:light; /* alle CWG-Marken werden immer hell dargestellt */ } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } body{ font-family:var(--schrift-text); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; font-synthesis:none; /* Avant Garde nie kuenstlich fetten */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; /* lange deutsche Komposita brechen sauber */ } h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:var(--schrift-display); font-weight:500; letter-spacing:var(--ls-eng); /* Verteilt die Woerter gleichmaessig auf die Zeilen, statt das letzte Wort allein stehen zu lassen. "Pflege verstehen wir von / innen" war so ein Fall. Browser ohne Unterstuetzung ignorieren die Zeile einfach. */ text-wrap:balance; } section[id]{scroll-margin-top:var(--sprung)} img,svg{display:block;max-width:100%} a,button,summary,label,input,select,textarea{touch-action:manipulation} button:not(:disabled),[role="button"],label[for],summary{cursor:pointer} /* ============================================================================ Der Claim der Gruppe: digital. genial. selbstbestimmt. So steht er live auf cwgroup.at: klein geschrieben, Punkt nach jedem Wort, je Wort eine Zeile, jedes Wort in einer anderen Farbe. Auf den Markenseiten steht er in den Farben der jeweiligen Marke, damit derselbe Satz ueberall erkennbar ist und trotzdem den Absender zeigt. Kontraste am 24.08.2026 fuer alle fuenf Marken nachgerechnet. Auf Dunkel liegt der schwaechste Wert bei 3,70:1 (Curawels Orange), das reicht fuer Schrift ab 24px. Auf Hell liegt der schwaechste bei 4,57:1. ============================================================================ */ .claim{ font-family:var(--schrift-display); font-weight:500; letter-spacing:var(--ls-eng); font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem); line-height:1.12; margin:0; } .claim span{display:block} /* Auf hellem Grund */ .claim span:nth-child(1){color:var(--text)} .claim span:nth-child(2){color:var(--akzent-voll)} .claim span:nth-child(3){color:var(--marke)} /* Welmoa auf hellem Grund: --text und --marke sind dort beide ein sehr dunkles Teal und lassen sich kaum unterscheiden. Deshalb drei Stufen desselben Tons, von dunkel nach mittel. Kontraste auf Weiss: 14,69 / 6,03 / 4,55. */ [data-marke="welmoa"] .claim:not(.claim--hell) span:nth-child(1){color:var(--marke)} [data-marke="welmoa"] .claim:not(.claim--hell) span:nth-child(3){color:var(--marke-mittel)} /* Auf dunklem Grund, so wie auf cwgroup.at */ .claim--hell span:nth-child(1){color:#fff} .claim--hell span:nth-child(2){color:var(--akzent)} .claim--hell span:nth-child(3){color:var(--marke-hell)} /* In einer Zeile, wenn der Platz knapp ist */ .claim--zeile span{display:inline} .claim--zeile span + span{margin-left:.3em} /* Klein, etwa in der Fusszeile neben dem Logo */ .claim--klein{font-size:clamp(1.15rem,1rem + .7vw,1.55rem)} /* Die drei Woerter blenden nacheinander ein, wie auf cwgroup.at. Ohne JavaScript und bei reduzierter Bewegung sind sie sofort da. */ @media (prefers-reduced-motion:no-preference){ .claim--auf span{opacity:0;transform:translateY(.25em);animation:claim-auf .5s var(--ease) forwards} .claim--auf span:nth-child(1){animation-delay:.05s} .claim--auf span:nth-child(2){animation-delay:.35s} .claim--auf span:nth-child(3){animation-delay:.65s} } @keyframes claim-auf{to{opacity:1;transform:none}} /* ----------------------------------------------------------- Bildnachweis Solange keine echten Aufnahmen aus den Haeusern vorliegen, sind die Fotos mit KI erzeugt. Das steht dran. Curawel machte das von Anfang an, die anderen Marken nicht, das waren zwei Ehrlichkeitsmassstaebe in einer Gruppe. */ .bildnachweis{ margin-top:1rem; font-size:.8125rem; color:var(--gedaempft); text-align:center; } .ki-tag{ display:inline-block; margin-left:.5rem; padding:.1rem .5rem; border:1px solid var(--linie); border-radius:var(--r-voll); font-size:.6875rem; letter-spacing:.04em; color:var(--gedaempft); white-space:nowrap; } /* Teil 2 von 2: was nur diese Marke braucht, Quelle welmoa.css */ /* ===================================================================== WELMOA Farben aus dem Logo: Tiefton #104458, Türkis #5EBFC0. Das Türkis hat auf Weiss nur 2,17:1 und ist deshalb reine Fläche, nie Text. Für Links und gefüllte Knöpfe steht #0B6D7A (5,71:1 auf hell, 6,03:1 für weisse Schrift darauf). ===================================================================== */ /* Form kommt aus _Kern/tokens.css, hier nur die Namen dieser Seite. Das Tuerkis #5EBFC0 hat auf Weiss nur 2,17:1 und bleibt reine Flaeche, fuer Text und gefuellte Knoepfe steht --akzent-voll. */ :root{ --tief:var(--marke); --tief-2:var(--marke-tief); --tuerkis:var(--akzent); --tuerkis-hell:var(--marke-hell); --mittel:var(--akzent-voll); --mittel-dunkel:var(--akzent-tief); --ink:var(--text); --ink-weich:var(--gedaempft); --grau:var(--gedaempft); --bg:var(--grund); /* --flaeche, --flaeche-2, --linie und die vier Radien heissen im Kern schon genauso. Hier nicht wiederholen, ein Verweis auf sich selbst waere ein Zirkelbezug und macht die Eigenschaft ungueltig. */ --max:var(--wrap); --sp:var(--sec); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} section[id]{scroll-margin-top:96px} body{ font-family:"Unica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);font-size:17px;line-height:1.62; font-weight:400;font-synthesis:none;overflow-wrap:break-word; -webkit-font-smoothing:antialiased;overflow-x:clip; } /* ------------------------------------------------------------- Schrift Welmoa weicht hier bewusst von der Gruppenschrift ab. Das Logo ist eine fette Grotesk: gerades M, ovales O, flaches A, enger Satz. Avant Garde ist eine Geometrische: rundes O, gespreiztes M, spitzes A, deutlich luftiger. Nebeneinander gestellt sehen die beiden aus wie zwei verschiedene Marken. Am 25.08.2026 nachgesehen und verglichen. Neue Haas Unica Bold ist dieselbe Gattung wie das Logo und deckt sich fast damit. Sie ist ausserdem schon geladen, es kommt also keine Datei dazu, und die offene Lizenzfrage zu Avant Garde auf welmoa.at erledigt sich. Die anderen drei CWG-Marken bleiben bei Avant Garde. */ h1,h2,h3,h4{font-family:"Unica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-weight:700;line-height:1.08;letter-spacing:-.022em} h1{letter-spacing:-.03em} /* Auch der Gruppen-Claim laeuft bei Welmoa in Unica. Sonst laedt die Seite die Avant-Garde-Datei fuer eine einzige Zeile im Fussbereich, und die Lizenzfrage fuer welmoa.at ist offen (A1 im Livegang-TODO). Bei den anderen drei Marken bleibt der Claim in der Gruppenschrift. */ .claim{font-family:"Unica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-weight:700;letter-spacing:-.022em} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} :focus-visible{outline:3px solid var(--mittel);outline-offset:3px;border-radius:8px} ::selection{background:var(--tuerkis);color:var(--tief)} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px} .wrap.schmal{max-width:800px} .pad{padding:var(--sp) 0} /* Bausteine */ .marke-pill{max-width:100%; display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--mittel); background:var(--flaeche-2);padding:8px 16px;border-radius:var(--r-voll); } .marke-pill.hell{color:var(--tuerkis-hell);background:rgba(255,255,255,.1)} .marke-pill i{width:6px;height:6px;border-radius:50%;background:var(--tuerkis);display:block} .gt{color:var(--mittel)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700; font-size:1rem;padding:15px 28px;border-radius:var(--r-voll);border:2px solid transparent; cursor:pointer;min-height:54px;white-space:nowrap; transition:transform .2s cubic-bezier(.34,1.4,.64,1),background .2s,color .2s,border-color .2s,box-shadow .2s; } .btn svg{width:18px;height:18px;transition:transform var(--zeit-2) var(--kurve)} .btn:hover svg{transform:translateX(4px)} .btn-haupt{background:var(--mittel);color:#fff;box-shadow:0 10px 24px rgba(11,109,122,.28)} .btn-haupt:hover{background:var(--mittel-dunkel);transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98);transition-duration:var(--zeit-1)} .btn-rand{background:transparent;color:var(--tief);border-color:var(--linie)} .btn-rand:hover{border-color:var(--mittel);color:var(--mittel);transform:translateY(-2px)} .btn-hell{background:#fff;color:var(--tief)} .btn-hell:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .btn-rand-hell{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)} .btn-rand-hell:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px)} #fortschritt{position:fixed;top:0;left:0;height:3px;width:0;background:var(--tuerkis);z-index:200;transition:width .1s linear} /* Kopfzeile */ header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s} header.gescrollt{background:rgba(243,250,251,.86);backdrop-filter:saturate(180%) blur(16px);box-shadow:0 1px 0 var(--linie)} .nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:18px} .marke{display:flex;align-items:center;gap:16px;flex-shrink:0} .marke-logo{height:26px;width:auto} .marke-cwg{height:21px;width:auto;flex-shrink:0} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{padding:10px 11px;border-radius:var(--r-voll);font-weight:600;font-size:.94rem;position:relative;white-space:nowrap} /* Die Kopfzeile darf breiter sein als der Inhalt darunter, sonst muessen sechs Menuepunkte, das Logo mit Signet und der Knopf in 1132 Pixel passen. */ header .wrap{max-width:1300px} .nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:6px;height:2px;background:var(--tuerkis);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav-links a:hover::after,.nav-links a.ist-hier::after{transform:scaleX(1)} .nav-links a.ist-hier{color:var(--mittel)} .nav-tat{flex-shrink:0} .nav-tat .btn{padding:11px 20px;min-height:46px;font-size:.94rem} .burger{display:none;width:48px;height:48px;border:2px solid var(--linie);background:none;border-radius:14px;cursor:pointer;color:var(--ink)} .burger svg{width:24px;height:24px;margin:auto} /* Mobilmenue */ .mm{position:fixed;inset:0;z-index:300;background:var(--bg);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:24px} .mm.offen{transform:none} .mm-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px} .mm-zu{width:48px;height:48px;border:2px solid var(--linie);background:none;border-radius:14px;cursor:pointer;color:var(--ink)} .mm-zu svg{width:24px;height:24px;margin:auto} .mm a{font-weight:700;font-size:1.6rem;padding:14px 0;border-bottom:1px solid var(--linie)} .mm .mm-tat{margin-top:auto;display:grid;gap:12px} .mm .mm-tat .btn{width:100%} /* Held */ .held{position:relative;overflow:clip;padding:clamp(34px,5vw,62px) 0 clamp(48px,7vw,86px)} .held::before{ content:"";position:absolute;z-index:-1;width:min(760px,120vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(94,191,192,.35),transparent 66%); top:-42%;right:-18%;filter:blur(10px); } .held-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center} /* Der Boden lag bei 2,5rem. "Gesundheitsberufe" ist bei 375 Pixel dann breiter als die Spalte und lief ueber den Rand. Zwei Massnahmen: kleinerer Boden und Silbentrennung. Deutsche Komposita brauchen die, sonst hilft auch ein kleinerer Grad irgendwann nicht mehr. Die Seite steht auf lang="de-AT", die Trennstellen kennt der Browser also. */ .held h1{ font-size:clamp(2.05rem,1.35rem + 2.6vw,4.3rem); margin:22px 0 20px;letter-spacing:-.028em; hyphens:auto;-webkit-hyphens:auto; } .held p.vor{font-size:1.16rem;color:var(--ink-weich);max-width:44ch;margin-bottom:32px} .held-tat{display:flex;gap:13px;flex-wrap:wrap} .held-fakten{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.92rem;color:var(--grau);font-weight:600} .held-fakten span{display:inline-flex;align-items:center;gap:8px} .held-fakten svg{width:17px;height:17px;color:var(--mittel)} /* Dienst-Karten als Bildmotiv */ /* ------------------------------------------------------ Das Brett Der Held zeigt das Produkt: eine Ansicht, wie sie in der Anwendung aussehen wuerde. Ein Marktplatz erklaert sich am schnellsten, wenn man sieht, was darauf liegt. Die dunkle Leiste gibt dem Ganzen die Anmutung eines Fensters, ohne dass die ganze Seite dunkel werden muss. Das Logo bleibt dadurch im Original auf hellem Grund, eine offizielle helle Fassung gibt es naemlich nicht. */ .brett{ background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--r-l);overflow:hidden; box-shadow:0 30px 70px -28px rgba(16,68,88,.42),0 2px 6px rgba(16,68,88,.06); } .brett-leiste{ display:flex;align-items:center;gap:11px; background:var(--tief);color:#fff;padding:15px 20px; } .brett-punkt{width:9px;height:9px;border-radius:50%;background:var(--tuerkis);flex-shrink:0} .brett-titel{font-weight:700;font-size:.95rem;letter-spacing:-.01em} .brett-ort{ margin-left:auto;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.72); background:rgba(255,255,255,.12);padding:5px 11px;border-radius:var(--r-voll); white-space:nowrap; } .stapel{display:grid} .dienst{ background:var(--flaeche);padding:18px 20px;display:grid;gap:9px; border-top:1px solid var(--linie-zart); } .dienst:first-child{border-top:0} .dienst-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px} .dienst-ort{font-weight:700;font-size:1.02rem} .dienst-zeit{font-size:.86rem;color:var(--grau);font-weight:600} .dienst-marke{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mittel);background:var(--flaeche-2);padding:5px 11px;border-radius:var(--r-voll)} .dienst-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--linie);padding-top:12px} .dienst-geld{font-weight:700} .dienst-knopf{background:var(--mittel);color:#fff;font-size:.84rem;font-weight:700;padding:9px 17px;border-radius:var(--r-voll)} /* Abschnittskopf */ .kopf{max-width:660px;margin:0 auto 46px;text-align:center} .kopf h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:16px 0 14px} .kopf p{color:var(--ink-weich)} /* Raster */ .karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px} .karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);padding:30px 28px;box-shadow:var(--sh-1); transition:transform var(--zeit-2) var(--kurve),box-shadow var(--zeit-2) var(--kurve),border-color var(--zeit-2) var(--kurve)} a.karte:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sh-2);border-color:var(--tuerkis)} a.karte:active{transform:translateY(-1px) scale(.995);transition-duration:var(--zeit-1)} .karte .ic{width:52px;height:52px;border-radius:16px;background:var(--flaeche-2);color:var(--mittel);display:grid;place-items:center;margin-bottom:18px} .karte .ic svg{width:25px;height:25px} .karte--bild{padding:0;overflow:hidden;display:flex;flex-direction:column} .karte--bild img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block} .karte__text{padding:24px 26px 28px} .karte h3{font-size:1.14rem;margin-bottom:9px} .karte p{font-size:.95rem;color:var(--ink-weich)} .karte .tl{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.87rem;font-weight:700;color:var(--mittel)} .karte .tl svg{width:14px;height:14px} /* Schritte */ .schritte{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:20px;list-style:none} .schritte li{counter-increment:s;position:relative;padding-top:58px} .schritte li::before{ content:counter(s);position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%; background:var(--tief);color:#fff;font-weight:700;font-size:1.05rem;display:grid;place-items:center; } .schritte h3{font-size:1.08rem;margin-bottom:8px} .schritte p{font-size:.95rem;color:var(--ink-weich)} /* Dunkler Block */ .dunkel{background:linear-gradient(140deg,var(--tief-2),var(--tief) 60%,#125e73);color:#fff;border-radius:var(--r-l);padding:clamp(36px,5.5vw,72px);position:relative;overflow:hidden} .dunkel::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 88%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%)} .dunkel *{position:relative;z-index:1} .dunkel h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:16px} /* Das Akzentwort in einer Ueberschrift ist sonst --mittel (#0B6D7A). Auf dem dunklen Verlauf verschwindet das fast vollstaendig. Auf Dunkel gilt der helle Ton aus dem Logo. Gemessen 25.08.2026. */ .dunkel .gt{color:var(--tuerkis-hell)} .dunkel p{color:rgba(255,255,255,.84);max-width:58ch} .dunkel .tat{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px} /* Text */ .block{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);padding:clamp(24px,3.4vw,40px);box-shadow:var(--sh-1);margin-bottom:18px} .block h2{font-size:clamp(1.35rem,2.6vw,1.85rem);margin-bottom:14px} .block p{color:var(--ink-weich);margin-bottom:14px} .block p:last-child{margin-bottom:0} .block .hinweis{background:var(--flaeche-2);border-left:3px solid var(--tuerkis);padding:15px 19px;border-radius:0 10px 10px 0;color:var(--ink)} .zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px} .zwei .block{margin-bottom:0} .mehr{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--mittel);margin-top:4px} .mehr svg{width:15px;height:15px;transition:transform var(--zeit-1) var(--kurve)} .mehr:hover svg{transform:translateX(4px)} /* Fragen */ .faq{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-s);margin-bottom:11px;overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:19px 23px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.45rem;color:var(--mittel);line-height:1;flex-shrink:0} .faq[open] summary::after{content:"–"} .faq p{padding:0 23px 21px;color:var(--ink-weich)} /* Familie */ .familie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px} .fam{display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);padding:26px 24px;box-shadow:var(--sh-1); transition:transform var(--zeit-2) var(--kurve),box-shadow var(--zeit-2) var(--kurve),border-color var(--zeit-2) var(--kurve)} a.fam:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sh-2);border-color:var(--tuerkis)} .fam.selbst{border-color:var(--tuerkis);box-shadow:0 0 0 1px var(--tuerkis),var(--sh-1);background:linear-gradient(180deg,rgba(94,191,192,.09),var(--flaeche))} /* Die Logos haben ganz verschiedene Proportionen, deshalb je eine eigene Hoehe. curawel.svg hat nur eine viewBox, ohne feste Hoehe faellt es auf 0 zusammen. */ .fam-logo{height:34px;display:flex;align-items:center;margin-bottom:16px} .fam-logo img{width:auto;max-width:190px;object-fit:contain;object-position:left center} .l-welmoa{height:19px}.l-curawel{height:21px}.l-pflegegruppe{height:34px}.l-austrify{height:29px} .fam h3{font-size:1.02rem;margin-bottom:7px} .fam p{font-size:.93rem;color:var(--ink-weich);flex:1} .fam .tl{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:.83rem;font-weight:700;color:var(--mittel)} .fam .tl svg{width:14px;height:14px} /* Kontakt */ .kontaktliste{display:grid;gap:12px} .kontaktliste a,.kontaktliste div{display:block;background:var(--flaeche-2);border-radius:var(--r-s);padding:15px 19px} .kontaktliste span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-bottom:4px} .kontaktliste b{font-size:1.02rem} .kontaktliste a:hover b{color:var(--mittel)} /* Fussleiste */ footer{background:var(--tief-2);color:rgba(255,255,255,.72);padding:62px 0 28px;margin-top:var(--sp)} .f-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px} /* Das Logo stand hier per filter:brightness(0) invert(1) als weisse Silhouette. Das ist eine Veraenderung am Logo, und eine offizielle helle Fassung gibt es nicht (Emre, 25.08.2026). Es steht jetzt im Original auf einer weissen Flaeche. Das Member-of-Signet hat eine eigene helle Fassung und darf so bleiben. */ .f-marke-plakette{ display:inline-flex;align-items:center;gap:14px; background:#fff;border-radius:var(--r-s);padding:12px 16px;margin-bottom:18px; } .f-logo{height:24px;width:auto;display:block} .f-cwg{height:23px;width:auto;margin-bottom:16px} .f-marke p{font-size:.93rem;max-width:34ch} .f-sp h5{color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:15px} .f-sp a{display:block;padding:6px 0;font-size:.95rem} .f-sp a:hover{color:var(--tuerkis)} .f-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;font-size:.87rem} /* Am Handy waren Impressum, Datenschutz und AGB nur 21 Pixel hoch und damit kaum zu treffen. Gemessen am 25.08.2026. Die anderen drei CWG-Marken haben dieselbe Stelle, dort steht sie noch offen. */ .f-recht a{margin-left:20px;display:inline-block;padding:8px 0} .f-recht a:hover{color:var(--tuerkis)} /* ------------------------------------------------------------- Bewegung Ein Satz Kurven und Zeiten fuer die ganze Seite, damit alles denselben Rhythmus hat. 150-250ms fuer alles, was auf eine Eingabe antwortet, 350ms fuers Einblenden beim Scrollen. Alles darueber wirkt zaeh. */ :root{ --kurve:cubic-bezier(.2,.8,.3,1); /* weich auslaufend, fuers Hereinkommen */ --kurve-zu:cubic-bezier(.4,0,.7,.2); /* schneller Anlauf, fuers Hinausgehen */ --zeit-1:.15s; /* Antwort auf Tippen und Zeigen */ --zeit-2:.25s; /* Karten, Knoepfe */ --zeit-3:.35s; /* Einblenden beim Scrollen */ } /* Einblenden beim Scrollen. Der Versatz --verzug kommt aus dem Skript und staffelt Geschwister, die zusammen hereinkommen. Bewusst klein: es soll nach Rhythmus aussehen, nicht nach Warteschlange. */ .js .auf{ opacity:0;transform:translateY(14px); transition:opacity var(--zeit-3) var(--kurve) var(--verzug,0s), transform var(--zeit-3) var(--kurve) var(--verzug,0s); } .js .auf.da{opacity:1;transform:none} @media (max-width:1000px){ .held-raster{grid-template-columns:1fr;gap:44px} .stapel{max-width:460px} .f-raster{grid-template-columns:1fr 1fr} } /* Sieben Menuepunkte brauchen Platz. Am 25.08.2026 im Browser gemessen: Logo 311 + Links 625 + Knopf 137 + zwei Luecken 36 = 1109 Pixel, dazu 48 Pixel Innenabstand der Zeile, macht 1157. Darunter bricht die Zeile um, deshalb kommt das Burger-Menue jetzt schon bei 1180 statt bei 1120. */ @media (max-width:1180px){ .nav-links{display:none} .burger{display:grid} } /* Auf schmalen Handys passen Logo, Knopf und Burger nicht nebeneinander. Der Knopf steht ohnehin im Mobilmenue. */ @media (max-width:620px){ .nav-tat{display:none} .marke-cwg{display:none} } @media (max-width:560px){ body{font-size:16px} .karten{grid-template-columns:1fr} .f-raster{grid-template-columns:1fr} /* Am schmalen Handy stehen die Karten gerade. Muss dieselbe Gewichtung haben wie .dienst:nth-child(1) weiter oben, sonst greift es nicht. */ } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} .js .auf{opacity:1;transform:none;--verzug:0s} .markt-paar svg{transform:none} } /* Bild mit Bildunterschrift, wie bei Curawel. Gehoert eigentlich in den Kern, sobald eine dritte Marke es braucht. */ .illu{margin:0} .illu img{width:100%;border-radius:var(--r-l);box-shadow:var(--sh-2);display:block} .illu figcaption{ margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--linie); font-size:.875rem;color:var(--gedaempft); } /* Formulare. Feldsatz und Beschriftungen kommen aus dem Screendesign der CW Group vom 04.03.2024, siehe Welmoa/Material/. Dort liegen die Felder in zwei Spalten mit grauen Kaesten ohne sichtbare Beschriftung. Ein Feld, das seine Beschriftung nur im Platzhalter traegt, ist beim Ausfuellen blind, deshalb steht das Label hier ueber dem Feld. */ .form{display:grid;gap:16px} .form-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px} .feld{display:grid;gap:7px} .feld > span{font-size:.83rem;font-weight:700;letter-spacing:.02em;color:var(--ink)} .feld .pflicht{color:var(--mittel)} .feld input,.feld select,.feld textarea{ font:inherit;font-size:1rem;color:var(--ink);width:100%; background:var(--flaeche-2);border:1px solid transparent;border-radius:var(--r-s); padding:14px 16px;transition:border-color .2s,background .2s,box-shadow .2s; } .feld textarea{min-height:170px;resize:vertical} .feld select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6D7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:18px; padding-right:44px; } .feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--linie)} .feld input:focus,.feld select:focus,.feld textarea:focus{ outline:none;background:var(--flaeche);border-color:var(--mittel); box-shadow:0 0 0 3px rgba(11,109,122,.16); } .zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--ink-weich)} .zustimmung input{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--mittel);cursor:pointer} .zustimmung a{color:var(--mittel);font-weight:700;text-decoration:underline;text-underline-offset:3px} .form-tat{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .form-tat .btn{border:none} .form-hinweis{font-size:.88rem;color:var(--grau)} /* Der Honigtopf steht im Textfluss und ist trotzdem fuer niemanden sichtbar. Nicht display:none, das ueberspringen manche Skripte gezielt. */ .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .meldung{border-radius:var(--r-s);padding:16px 20px;margin-bottom:20px;font-weight:600} .meldung.gut{background:rgba(94,191,192,.16);color:var(--tief);border-left:3px solid var(--tuerkis)} .meldung.schlecht{background:#fdeceb;color:#8a2318;border-left:3px solid #c0392b} .meldung.neutral{background:var(--flaeche-2);color:var(--ink);border-left:3px solid var(--grau)} /* Kontakt-Weiche, drei Karten wie im Screendesign von 2024 */ .weiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px} .weiche a{display:flex;flex-direction:column;gap:14px;background:var(--flaeche); border:1px solid var(--linie);border-radius:var(--r-m);padding:30px 28px;box-shadow:var(--sh-1); transition:transform var(--zeit-2) var(--kurve),box-shadow var(--zeit-2) var(--kurve),border-color var(--zeit-2) var(--kurve)} .weiche a:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sh-2);border-color:var(--tuerkis)} .weiche a:active{transform:translateY(-1px) scale(.995);transition-duration:var(--zeit-1)} .weiche .ic{width:52px;height:52px;border-radius:16px;background:var(--flaeche-2); color:var(--mittel);display:grid;place-items:center} .weiche .ic svg{width:25px;height:25px} .weiche b{font-size:1.08rem} .weiche span{font-size:.93rem;color:var(--ink-weich)} /* Beispielprofile. Bewusst ohne Portrait und ohne erfundenen Namen, siehe Kommentar bei PROFILE in daten.py. */ .profile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px} .profil{position:relative;background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--r-m);padding:28px;box-shadow:var(--sh-1);display:flex;flex-direction:column; transition:transform var(--zeit-2) var(--kurve),box-shadow var(--zeit-2) var(--kurve),border-color var(--zeit-2) var(--kurve)} .profil:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--sh-2);border-color:var(--tuerkis)} .profil-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--mittel);background:var(--flaeche-2); padding:5px 11px;border-radius:var(--r-voll);margin-bottom:16px} .profil h3{font-size:1.18rem;margin-bottom:5px} .profil-recht{font-size:.93rem;color:var(--ink-weich);margin-bottom:16px} .chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin-bottom:20px} .chips li{font-size:.83rem;font-weight:600;color:var(--tief); background:rgba(94,191,192,.16);padding:6px 12px;border-radius:var(--r-voll)} .profil-daten{margin-top:auto;border-top:1px solid var(--linie);padding-top:16px; display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:.9rem} .profil-daten dt{font-weight:700;color:var(--grau);font-size:.74rem;letter-spacing:.07em; text-transform:uppercase;align-self:center} .profil-daten dd{color:var(--ink-weich)} /* Die zwei Tueren. Beide gleich breit, gleiche Schrift, gleiche Farbe, gleiche Knopfzeile. Wenn eine davon je auffaelliger wird als die andere, ist die Entscheidung von Emre (25.08.2026) wieder kaputt. */ .tueren{display:grid;grid-template-columns:1fr 1fr;gap:18px} .tuer{display:flex;flex-direction:column;background:var(--flaeche); border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--sh-1); transition:transform var(--zeit-2) var(--kurve),box-shadow var(--zeit-2) var(--kurve),border-color var(--zeit-2) var(--kurve)} .tuer:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--sh-2);border-color:var(--tuerkis)} .tuer:active{transform:translateY(-1px) scale(.998);transition-duration:var(--zeit-1)} .tueren--gross .tuer{padding:clamp(28px,3.6vw,44px)} .tuer .ic{width:56px;height:56px;border-radius:18px;background:var(--flaeche-2); color:var(--mittel);display:grid;place-items:center;margin-bottom:20px} .tuer .ic svg{width:27px;height:27px} .tuer h3{font-size:clamp(1.2rem,2.2vw,1.55rem);margin-bottom:9px} .tuer p{color:var(--ink-weich);flex:1} .tuer .tl{display:inline-flex;align-items:center;gap:8px;margin-top:22px; font-weight:700;color:var(--mittel)} .tuer .tl svg{width:17px;height:17px;transition:transform var(--zeit-2) var(--kurve)} .tuer:hover .tl svg{transform:translateX(4px)} @media (max-width:720px){ .tueren{grid-template-columns:1fr} } /* Berufe, nach Berufsgruppen geordnet. Die Zeilen innerhalb einer Gruppe sind alle gleich, die Gruppen untereinander auch: gleiche Schrift, gleiche Farbe, kein Rahmen um eine herum. Nur die Ueberschrift trennt sie. Im Geist der Angebotsliste aus dem Screendesign von 2024, dort trugen sechs Zeilen Marken wie "sofort" und "coming soon". Die sind weg, alle gleichrangig (Emre, 25.08.2026). */ .berufsgruppen{max-width:920px;margin:0 auto;display:grid;gap:clamp(34px,4vw,54px)} .berufsgruppe-kopf{margin-bottom:16px} .berufsgruppe-kopf h3{font-size:clamp(1.15rem,2.2vw,1.4rem);margin-bottom:5px} .berufsgruppe-kopf p{font-size:.9rem;color:var(--grau)} .berufe{list-style:none;display:grid;gap:0;border-top:1px solid var(--linie)} .berufe li{display:flex;gap:22px;align-items:flex-start; padding:22px 4px;border-bottom:1px solid var(--linie)} .berufe .ic{width:48px;height:48px;flex-shrink:0;border-radius:15px; background:var(--flaeche-2);color:var(--mittel);display:grid;place-items:center} .berufe .ic svg{width:24px;height:24px} .berufe h4{font-size:1.06rem;margin-bottom:6px} .berufe p{font-size:.95rem;color:var(--ink-weich)} @media (max-width:560px){ .berufe li{gap:16px;padding:18px 2px} .berufe .ic{width:40px;height:40px;border-radius:12px} .berufe .ic svg{width:20px;height:20px} } /* Der Marktplatz von oben. Jede Zeile ist ein Paar: links der Auftrag, rechts das Profil, das darauf antworten wuerde. Emre am 25.08.2026: es soll wie ein Marktplatz fuer beide Seiten wirken, nicht wie zwei getrennte Listen. */ .markt{display:grid;grid-template-columns:1fr auto 1fr; gap:14px clamp(14px,2.4vw,28px);align-items:stretch} .markt-kopf h3{font-size:1.1rem;margin-bottom:6px} .markt-kopf p{font-size:.93rem;color:var(--ink-weich)} .markt-kopf--mitte{min-width:44px} .markt .dienst{display:flex;flex-direction:column;justify-content:center} .markt-paar{display:grid;place-items:center;color:var(--tuerkis)} .markt-paar svg{width:24px;height:24px} .mprofil{display:flex;gap:14px;align-items:center;background:var(--flaeche); border:1px solid var(--linie);border-radius:var(--r-m);padding:18px;box-shadow:var(--sh-1)} .mprofil .ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--flaeche-2); color:var(--mittel);display:grid;place-items:center} .mprofil .ic svg{width:22px;height:22px} .mprofil b{display:block;font-size:1rem;margin-bottom:3px} .mprofil span{display:block;font-size:.85rem;color:var(--ink-weich)} .bildnachweis{margin-top:20px;font-size:.85rem;color:var(--grau);text-align:center} /* Am Handy wird aus jedem Paar ein Block untereinander, das Tauschzeichen dreht sich. */ @media (max-width:820px){ .markt{grid-template-columns:1fr;gap:10px} .markt-kopf{margin-top:22px} .markt-kopf:first-child{margin-top:0} .markt-kopf--mitte{display:none} .markt-paar{transform:rotate(90deg);margin:2px 0} } /* Die Gruppenkarten auf der Startseite verhalten sich wie die uebrigen Karten, sind aber anklickbar. */ a.karte{display:flex;flex-direction:column} a.karte:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sh-2);border-color:var(--tuerkis)} a.karte:active{transform:translateY(-1px) scale(.995);transition-duration:var(--zeit-1)} a.karte p{color:var(--grau);font-size:.88rem;font-weight:600;letter-spacing:.03em} .bildnachweis .mehr{font-size:.85rem} /* Sechs Gruppenkarten: drei und drei statt vier und zwei. */ .karten--drei{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){ .karten--drei{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .karten--drei{grid-template-columns:1fr} } /* =================================================================== Rhythmus und Tiefe (25.08.2026) Vorher lag jeder Abschnitt auf demselben blassen Grund, von oben bis unten. Das liest sich als eine einzige lange Flaeche, in der nichts heraussticht und nichts endet. Drei Mittel dagegen, alle aus den Markenfarben, kein neuer Ton: 1. getoente Baender fuer Abschnitte, die zusammengehoeren 2. der dunkle Block als Anker am Seitenende 3. weiche Verlaeufe an den Kanten statt harter Absaetze =================================================================== */ /* Getoentes Band. Liegt ueber die volle Breite, der Inhalt bleibt im Raster. */ .pad--ton{background:var(--linie-zart);position:relative} .pad--ton::before,.pad--ton::after{ content:"";position:absolute;left:0;right:0;height:64px;pointer-events:none; } .pad--ton::before{top:0;background:linear-gradient(to bottom,var(--bg),transparent)} .pad--ton::after{bottom:0;background:linear-gradient(to top,var(--bg),transparent)} /* Der Held bekommt eine ruhige Tiefe statt einer harten Kante nach unten. z-index:-1 wie beim Lichtkreis darueber, sonst legt sich der Verlauf ueber die Faktenzeile am Fuss des Helden und wascht sie aus. */ .held::after{ content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:120px; background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none; } /* Berufszeilen antworten auf das Zeigen. Vorher passierte gar nichts, dabei ist die Liste das Herzstueck der Seite. Kein Anheben, das waere bei einer Tabellenzeile falsch, sondern ein Aufhellen der Flaeche. */ .berufe li{ border-radius:var(--r-s); transition:background var(--zeit-2) var(--kurve); } .berufe li:hover{background:var(--linie-zart)} .berufe .ic{transition:transform var(--zeit-2) var(--kurve),background var(--zeit-2) var(--kurve)} .berufe li:hover .ic{transform:scale(1.06);background:var(--flaeche-3)} /* Im getoenten Band waere Hell-auf-Hell unsichtbar, dort auf Weiss gehen. */ .pad--ton .berufe li:hover{background:var(--flaeche)} /* Das Tauschzeichen im Marktplatz. Die einzige Bewegung auf der Seite, die nur erklaert und nichts bedient: es faehrt zusammen mit seiner Zeile herein und macht sichtbar, dass links und rechts zueinander gehoeren. */ .js .markt-paar svg{ transform:scale(.7);opacity:0; transition:transform var(--zeit-3) var(--kurve) .12s,opacity var(--zeit-3) var(--kurve) .12s; } .markt .dienst.da ~ * .markt-paar svg, .markt-paar:has(+ .mprofil.da) svg, .dienst.da + .markt-paar svg{transform:none;opacity:1} /* Eine Zeile hebt sich beim Zeigen leicht hervor, wie in einer echten Liste. */ .brett .dienst{transition:background var(--zeit-2) var(--kurve)} .brett .dienst:hover{background:var(--linie-zart)} /* Der Knopf "Passt mir" auf den Beispielkarten sieht aus wie ein Knopf, ist aber keiner. Deshalb kein Zeigefinger und keine Zeigen-Antwort darauf. */ .dienst-knopf{cursor:default} /* Offene Punkte im Entwurf der Sicherheitsseite. Sie sollen sich deutlich von dem unterscheiden, was schon feststeht, damit niemand sie fuer fertigen Text haelt. Der Build warnt zusaetzlich, solange sie drinstehen. */ .block.offen{ border-left:4px solid var(--tuerkis); background:linear-gradient(90deg,var(--flaeche-2),var(--flaeche) 42%); } .block.offen h3{font-size:1.12rem;margin-bottom:10px} .block.offen h3::before{ content:"Offen";display:inline-block;margin-right:11px;vertical-align:2px; font-family:var(--schrift-text);font-size:.68rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--mittel);background:var(--flaeche-3); padding:4px 9px;border-radius:var(--r-voll); } .block.offen p{margin-bottom:0} /* Aufzaehlung im Fliesstext */ .liste{list-style:none;display:grid;gap:11px;margin:4px 0 16px} .liste li{position:relative;padding-left:26px;color:var(--ink-weich);font-size:.97rem} .liste li::before{ content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--tuerkis); } .liste b{color:var(--ink)} /* =================================================================== Der Marktplatz arbeitet (25.08.2026) Die drei Auftragskarten im Held lagen bisher nur da. Jetzt zeigen sie einmal, was der ganze Rest der Seite erklaert: ein Auftrag geht raus, jemand nimmt ihn. Zwei der drei Karten schalten nach dem Hereinscrollen auf "Angenommen" um, mit Abstand, und dann ist Schluss. Bewusst KEINE Schleife. Eine Dauerbewegung im Blickfeld zieht die Aufmerksamkeit vom Text ab und macht manche Leute schwindlig. Bei prefers-reduced-motion passiert gar nichts, dann stehen alle drei Karten im offenen Zustand. =================================================================== */ /* Beide Zustaende liegen uebereinander, damit die Karte beim Umschalten nicht springt. Der breitere von beiden bestimmt die Breite. */ .dienst-schalter{display:grid;place-items:center end} .dienst-schalter > *{grid-area:1/1;transition:opacity var(--zeit-2) var(--kurve), transform var(--zeit-2) var(--kurve)} .dienst-zusage{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-size:.84rem;font-weight:700;padding:9px 15px;border-radius:var(--r-voll); background:var(--flaeche-3);color:var(--akzent-tief); opacity:0;transform:scale(.86); } .dienst-zusage svg{width:15px;height:15px} /* Wer zugesagt hat. Steht erst da, wenn die Karte angenommen ist. */ .dienst-wer{ font-size:.82rem;color:var(--grau);font-weight:600; max-height:0;opacity:0;overflow:hidden; transition:max-height var(--zeit-3) var(--kurve),opacity var(--zeit-3) var(--kurve); } .dienst.angenommen{border-color:var(--tuerkis);box-shadow:0 0 0 1px var(--tuerkis),var(--sh-2)} .dienst.angenommen .dienst-knopf{opacity:0;transform:scale(.86)} .dienst.angenommen .dienst-zusage{opacity:1;transform:none} .dienst.angenommen .dienst-wer{max-height:2.4em;opacity:1} .dienst.angenommen .dienst-geld{color:var(--grau)} /* Der zweite Takt: waehrend oben ein Auftrag weggeht, kommt unten einer herein. Ohne das liest sich der Held wie "ist schon alles vergeben". */ .dienst-neu{ justify-self:start; font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--akzent-tief);background:var(--flaeche-3); padding:5px 11px;border-radius:var(--r-voll); max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden; transition:max-height var(--zeit-3) var(--kurve),opacity var(--zeit-3) var(--kurve), padding var(--zeit-3) var(--kurve); } .dienst.frisch{border-color:var(--tuerkis)} .dienst.frisch .dienst-neu{max-height:2.4em;opacity:1;padding-top:5px;padding-bottom:5px} /* Der kurze Druck auf den Knopf, bevor er weicht. Endlich, laeuft einmal. */ @keyframes tippen{ 0%{transform:none} 45%{transform:scale(.9)} 100%{transform:scale(.86)} } .dienst.wird-genommen .dienst-knopf{animation:tippen .28s var(--kurve) forwards} @media (prefers-reduced-motion:reduce){ .dienst-schalter > *,.dienst-wer{transition:none} .dienst.angenommen,.dienst.wird-genommen,.dienst.frisch{border-color:var(--linie);box-shadow:var(--sh-1)} .dienst.frisch .dienst-neu{max-height:0;opacity:0;padding-top:0;padding-bottom:0} .dienst.angenommen .dienst-knopf{opacity:1;transform:none} .dienst.angenommen .dienst-zusage{opacity:0} .dienst.angenommen .dienst-wer{max-height:0;opacity:0} } /* Der Auftragsstapel bekommt Tiefe. Er kippt leicht in Richtung Zeiger, hoechstens um vier Grad. Die Werte setzt das Skript als --kx und --ky, ohne Zeiger stehen sie auf 0 und es passiert nichts. Nur mit Maus oder Stift: an einem Handy gibt es keinen schwebenden Zeiger, dort waere das entweder tot oder wuerde beim Tippen zucken. */ /* Das Brett kippt leicht in Richtung Zeiger, hoechstens zwei Grad. Als ganzes Objekt, nicht Karte fuer Karte: ein Fenster verbiegt sich nicht in sich. Nur mit Maus oder Stift. */ @media (hover:hover) and (pointer:fine){ .held-raster > .brett{perspective:1400px} .brett{transition:transform var(--zeit-2) var(--kurve),box-shadow var(--zeit-2) var(--kurve)} .brett--kippt{ transform:perspective(1400px) rotateX(calc(var(--ky,0) * -2deg)) rotateY(calc(var(--kx,0) * 2deg)); } } @media (prefers-reduced-motion:reduce){ .brett--kippt{transform:none} } } /* Am Handy steht das Brett unter dem Text. Mit drei Zeilen wird der Held fast zwei Bildschirme hoch, das scrollt niemand durch. Die erste Zeile faellt weg. Die zweite und die dritte bleiben, an ihnen haengen die zwei Takte: eine wird angenommen, eine kommt neu herein. */ @media (max-width:1000px){ .brett .dienst:first-child{display:none} .brett .dienst{padding:15px 17px;gap:8px} .brett-leiste{padding:13px 17px} }