/* 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/pflegegruppe/fonts/ITCAvantGardeGothicMedium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Unica";src:url("/cwg/pflegegruppe/fonts/NeueHaasUnicaRegular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Unica";src:url("/cwg/pflegegruppe/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 pflegegruppe.css */ /* ============================================================ Schrift der Gruppe Alle CWG-Marken tragen dieselbe Schrift, nur die Farben sind je Marke verschieden (Emres Vorgabe, 23.08.2026). Es sind die CI-Schriften von Curawel, der operativen Leitmarke. Avant Garde gibt es nur in einem Schnitt. Deshalb font-synthesis:none und Überschriften auf 500, nie auf 700 oder 800. ============================================================ */ /* Form kommt aus _Kern/tokens.css, hier nur die Namen dieser Seite. */ :root{ --blue:var(--marke); --blue-600:var(--marke-tief); --blue-700:var(--dunkel); --orange:var(--akzent); --orange-cta:var(--akzent-voll); --orange-600:var(--akzent-tief); --teal:#12a0b0; --teal-bright:#25bcd0; --ink:var(--text); --ink-soft:#40566a; --navy:var(--dunkel); --bg:var(--grund); --surface:var(--flaeche); --surface-2:var(--flaeche-2); --line:var(--linie); --muted:var(--gedaempft); --glass:rgba(255,255,255,.72); --r-lg:var(--r-l); --r-md:var(--r-m); --r-sm:var(--r-s); --r-full:var(--r-voll); --max:var(--wrap); --sp:var(--sec); --grad:linear-gradient(120deg,var(--marke),var(--teal)); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* Der Kopf klebt oben, ohne diesen Abstand landet die Ueberschrift beim Sprung dahinter. */ 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;-webkit-font-smoothing:antialiased;overflow-x:clip; font-weight:400;font-synthesis:none;overflow-wrap:break-word; } h1,h2,h3,h4{font-family:"AvantGarde","Unica",sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--ink)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px} ::selection{background:var(--orange);color:#fff} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px} /* Gradient text */ .gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* Eyebrow pill */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(30,112,187,.09);padding:7px 15px;border-radius:var(--r-full)} .eyebrow.on-dark{color:#bcd8f5;background:rgba(255,255,255,.08)} .eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--orange)} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:"Unica",sans-serif;font-weight:600;font-size:1rem;padding:15px 28px;border-radius:var(--r-full);cursor:pointer;border:1.5px solid transparent;transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,background .2s,color .2s,border-color .2s;min-height:52px;position:relative;overflow:hidden;white-space:nowrap} .btn svg{width:18px;height:18px;transition:transform .25s} .btn:hover svg{transform:translateX(4px)} .btn-cta{background:var(--orange-cta);color:#fff;box-shadow:0 8px 22px rgba(216,68,0,.32)} .btn-cta:hover{background:var(--orange-600);transform:translateY(-3px);box-shadow:0 14px 30px rgba(216,68,0,.4)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(30,112,187,.28)} .btn-blue:hover{background:var(--blue-600);transform:translateY(-3px)} .btn-ghost{background:rgba(255,255,255,.5);color:var(--ink);border-color:var(--line);backdrop-filter:blur(8px)} .btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)} .btn-light{background:#fff;color:var(--blue)} .btn-light:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)} /* Member of CWG + Markenfamilie */ .brand{display:flex;align-items:center;gap:22px} .brand-cwg{height:22px;width:auto;display:block;flex-shrink:0} .footer-cwg{height:24px;width:auto;display:block;margin:0 0 18px} .fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:38px} .fam{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s,border-color .25s} a.fam:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--blue)} .fam.self{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-1);background:linear-gradient(180deg,rgba(30,112,187,.05),var(--surface))} /* curawel.svg bringt nur eine viewBox mit, ohne feste Hoehe faellt es auf 0 zusammen */ .fam-logo{height:36px;display:flex;align-items:center;margin-bottom:18px} /* Die vier Logos haben ganz verschiedene Proportionen, deshalb je eine eigene Hoehe, damit sie optisch gleich gross wirken. curawel.svg hat nur eine viewBox, ohne feste Hoehe faellt es auf 0 zusammen. */ .fam-logo img{width:auto;max-width:200px;object-fit:contain;object-position:left center} .fam-logo img.l-pflegegruppe{height:36px} .fam-logo img.l-austrify{height:30px} .fam-logo img.l-curawel{height:21px} .fam-logo img.l-welmoa{height:19px} .fam h3{font-size:1.02rem;margin-bottom:7px} .fam p{font-size:.93rem;color:var(--ink-soft);flex:1;line-height:1.5} .fam .tl{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.83rem;font-weight:600;color:var(--blue)} .fam.self .tl{color:var(--orange-600)} .fam .tl svg{width:14px;height:14px} .fam-note{margin-top:26px;background:var(--surface-2);border-radius:var(--r-md);padding:22px 26px;font-size:.96rem;color:var(--ink-soft)} .fam-note b{color:var(--ink)} @media (max-width:900px){.brand{gap:16px}.brand-cwg{height:19px}} @media (max-width:520px){.brand-cwg{display:none}} /* Scroll progress */ #progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:200;transition:width .1s linear} /* Header */ header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s} header.scrolled{background:rgba(245,248,253,.82);backdrop-filter:saturate(180%) blur(16px);box-shadow:0 1px 0 var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px} .brand-logo{height:42px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{padding:10px 15px;border-radius:var(--r-full);font-weight:500;font-size:.97rem;position:relative;transition:color .15s} .nav-links a::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav-links a:hover{color:var(--blue)} .nav-links a:hover::after{transform:scaleX(1)} .nav-cta{display:flex;align-items:center;gap:10px} .nav-cta .btn{padding:11px 20px;min-height:44px;font-size:.94rem} .burger{display:none;width:48px;height:48px;border:1.5px solid var(--line);background:rgba(255,255,255,.6);border-radius:14px;cursor:pointer;color:var(--ink)} .burger svg{width:24px;height:24px;margin:auto} /* HERO */ .hero{position:relative;padding:clamp(40px,6vw,72px) 0 clamp(60px,8vw,100px);overflow:clip} .aurora{position:absolute;inset:0;z-index:-2;overflow:hidden} .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform} .orb.o1{width:520px;height:520px;background:radial-gradient(circle,rgba(30,112,187,.6),transparent 68%);top:-160px;right:-120px;animation:drift1 22s ease-in-out infinite alternate} .orb.o2{width:440px;height:440px;background:radial-gradient(circle,rgba(235,75,0,.42),transparent 68%);top:120px;left:-140px;animation:drift2 26s ease-in-out infinite alternate} .orb.o3{width:360px;height:360px;background:radial-gradient(circle,rgba(30,112,187,.35),transparent 70%);bottom:-140px;left:40%;animation:drift3 30s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate(-80px,60px) scale(1.1)}} @keyframes drift2{to{transform:translate(70px,-50px) scale(1.15)}} @keyframes drift3{to{transform:translate(-60px,-40px) scale(1.05)}} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center} .hero .rate{display:inline-flex;align-items:center;gap:11px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);padding:8px 16px 8px 9px;border-radius:var(--r-full);box-shadow:var(--sh-1);font-size:.9rem;color:var(--muted);margin-bottom:26px} .hero .rate .st{color:#f5a623;letter-spacing:1px} .hero .rate b{color:var(--ink);font-weight:700} .hero .rate .dot{width:4px;height:4px;border-radius:50%;background:var(--line)} .hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:500;margin-bottom:24px;letter-spacing:-.02em} .hero p.lead{font-size:1.2rem;color:var(--ink-soft);max-width:40ch;margin-bottom:34px;line-height:1.55} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px} .hero-facts{display:flex;gap:20px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)} .hero-facts span{display:inline-flex;align-items:center;gap:8px} .hero-facts svg{width:18px;height:18px;color:var(--orange)} /* Hero visual cluster */ .hv{position:relative;height:min(560px,72vw)} .hv-main{position:absolute;inset:0 0 0 12%;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--blue-700));box-shadow:var(--sh-3)} .hv-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease} .hv:hover .hv-main img{transform:scale(1.05)} .hv-inset{position:absolute;left:-2%;bottom:12%;width:44%;aspect-ratio:1/1.12;border-radius:var(--r-md);overflow:hidden;border:5px solid #fff;background:linear-gradient(160deg,var(--orange),#ff8a4d);box-shadow:var(--sh-2);animation:floaty 6s ease-in-out infinite} .hv-inset img{width:100%;height:100%;object-fit:cover} @keyframes floaty{50%{transform:translateY(-14px)}} .hv-card{position:absolute;background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--sh-2);display:flex;align-items:center;gap:12px} .hv-card .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0} .hv-card .ic svg{width:22px;height:22px} .hv-card .n{display:block;font-family:"AvantGarde","Unica",sans-serif;font-weight:700;font-size:1.25rem;line-height:1;color:var(--ink)} .hv-card .l{display:block;font-size:.72rem;color:var(--muted);margin-top:2px} .hv-card.c1{top:8%;right:-2%;animation:floaty 7s ease-in-out infinite .5s} .hv-card.c1 .ic{background:rgba(30,112,187,.14);color:var(--blue)} .hv-card.c2{bottom:22%;right:6%;animation:floaty 8s ease-in-out infinite 1s} .hv-card.c2 .ic{background:rgba(235,75,0,.14);color:var(--orange)} /* Role marquee */ .rolestrip{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee{display:flex;gap:0;width:max-content;animation:scroll-x 38s linear infinite} .marquee.rev{animation-direction:reverse} .rolestrip:hover .marquee{animation-play-state:paused} @keyframes scroll-x{to{transform:translateX(-50%)}} .role{display:inline-flex;align-items:center;gap:12px;padding:0 26px;font-family:"AvantGarde","Unica",sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink-soft);white-space:nowrap} .role svg{width:16px;height:16px;color:var(--orange)} /* Section */ section.pad{padding:var(--sp) 0} .head{max-width:660px;margin:0 auto clamp(44px,5vw,64px);text-align:center} .head.left{margin-left:0;text-align:left} .head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:500;margin:18px 0 16px} .head p{font-size:1.12rem;color:var(--ink-soft)} /* BENTO */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:18px} .tile{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s} .tile:hover{transform:translateY(-5px);box-shadow:var(--sh-2)} .tile.img{background:linear-gradient(160deg,var(--blue),var(--blue-700))} .tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease} .tile.img:hover img{transform:scale(1.07)} .tile.img .cap{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(8,20,32,.82));color:#fff} .tile.img .cap h3{color:#fff;font-size:1.3rem;margin-bottom:4px} .tile.img .cap span{font-size:.86rem;opacity:.85} .tile.pad-t{padding:26px;display:flex;flex-direction:column;justify-content:space-between} .tile.brand{background:var(--grad);color:#fff} .tile.brand *{color:#fff} .tile .big{font-family:"AvantGarde","Unica",sans-serif;font-weight:800;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;letter-spacing:-.03em} .tile .lbl{font-size:.92rem;color:var(--muted);margin-top:6px} .tile.brand .lbl{color:rgba(255,255,255,.85)} .tile .ic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);color:var(--blue);display:grid;place-items:center} .tile .ic svg{width:24px;height:24px} .tile h3{font-size:1.15rem;margin-bottom:6px} .tile p{font-size:.94rem;color:var(--muted)} .tile.quote{background:var(--navy);color:#fff} .tile.quote p{font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-size:1.05rem;line-height:1.4;color:#fff;font-style:italic} .tile.quote .qa{font-size:.82rem;color:#bcd8f5;margin-top:auto;font-style:normal;font-weight:600} .t-w2{grid-column:span 2} .t-h2{grid-row:span 2} .t-w2h2{grid-column:span 2;grid-row:span 2} /* DUAL PATH */ .paths{display:grid;grid-template-columns:1fr 1fr;gap:22px} .pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;color:#fff;transition:transform .35s} .pcard:hover{transform:translateY(-6px)} .pcard .bgimg{position:absolute;inset:0;z-index:-2} .pcard .bgimg img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease} .pcard:hover .bgimg img{transform:scale(1.06)} .pcard .ov{position:absolute;inset:0;z-index:-1} .pcard.talent .ov{background:linear-gradient(158deg,#1e70bb,#0d3a63)} .pcard.org .ov{background:linear-gradient(158deg,#d84400,#7a2600)} .pcard .tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:6px 13px;border-radius:var(--r-full);width:fit-content;margin-bottom:16px} .pcard h3{color:#fff;font-size:1.9rem;font-weight:500;margin-bottom:12px} .pcard>p{color:rgba(255,255,255,.9);font-size:1.02rem;margin-bottom:22px;max-width:42ch} .plist{list-style:none;margin-bottom:28px;display:grid;gap:11px} .plist li{display:flex;align-items:flex-start;gap:11px;font-size:.98rem;font-weight:500} .plist svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:#fff} .pcard .row{display:flex;gap:12px;flex-wrap:wrap} /* SERVICES */ .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .svc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:32px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;z-index:0} .svc::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .35s;z-index:-1} .svc::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad);transition:width .4s} .svc:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent} .svc:hover::after{width:100%} .svc .ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;background:var(--surface-2);color:var(--blue);transition:transform .3s} .svc:nth-child(even) .ic{color:var(--orange);background:rgba(235,75,0,.1)} .svc:hover .ic{transform:scale(1.08) rotate(-4deg)} .svc .ic svg{width:27px;height:27px} .svc h3{font-size:1.28rem;margin-bottom:10px} .svc p{color:var(--muted);font-size:.98rem} .svc .tl{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.85rem;font-weight:600;color:var(--blue)} .svc:nth-child(even) .tl{color:var(--orange)} .svc.cta-card{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px} .svc.cta-card::before{display:none} .svc.cta-card h3{color:#fff} .svc.cta-card p{color:rgba(255,255,255,.82)} .svc.cta-card .btn{align-self:flex-start} /* STATS */ .statband{background:var(--navy);border-radius:var(--r-lg);padding:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;overflow:hidden} .statband::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% -10%,rgba(235,75,0,.32),transparent 52%),radial-gradient(circle at -5% 110%,rgba(30,112,187,.5),transparent 50%)} .stat{position:relative;text-align:center;color:#fff} .stat .num{display:block;font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.03em;background:linear-gradient(120deg,#fff,#a9d3f5);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .cap{display:block;margin-top:12px;font-size:.94rem;color:rgba(255,255,255,.78)} /* ABOUT */ .about{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,68px);align-items:center} .aphoto{position:relative} .aphoto .frame{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1.12;background:linear-gradient(160deg,var(--blue),var(--teal));box-shadow:var(--sh-3)} .aphoto .frame img{width:100%;height:100%;object-fit:cover} .aphoto .qc{position:absolute;left:-22px;bottom:26px;right:32px;background:var(--glass);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--sh-2)} .aphoto .qc p{font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-style:italic;font-size:1.02rem;line-height:1.4;margin-bottom:14px} .aphoto .who{display:flex;align-items:center;gap:12px} .aphoto .av{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-family:"AvantGarde","Unica",sans-serif;font-size:.95rem} .aphoto .nm{font-weight:700;font-size:.94rem;font-family:"Unica",sans-serif} .aphoto .rl{font-size:.8rem;color:var(--muted)} .vals{list-style:none;margin-top:30px;display:grid;gap:18px} .vals li{display:flex;gap:16px;align-items:flex-start} .vals .vi{width:48px;height:48px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);color:var(--blue)} .vals li:nth-child(2) .vi{color:var(--orange);background:rgba(235,75,0,.1)} .vals .vi svg{width:23px;height:23px} .vals h4{font-family:"AvantGarde","Unica",sans-serif;font-weight:600;font-size:1.08rem;margin-bottom:3px} .vals p{color:var(--muted);font-size:.97rem} /* GALLERY */ .gallery{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);overflow:hidden} .gtrack{display:flex;gap:18px;width:max-content;animation:scroll-x 44s linear infinite} .gallery:hover .gtrack{animation-play-state:paused} .gitem{width:min(360px,72vw);aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--blue-700));box-shadow:var(--sh-1);flex-shrink:0;position:relative} .gitem img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .gitem:hover img{transform:scale(1.06)} /* PROCESS */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative} .step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 24px;transition:transform .3s,box-shadow .3s} .step:hover{transform:translateY(-5px);box-shadow:var(--sh-2)} .step .num{width:50px;height:50px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-size:1.3rem;margin-bottom:18px;box-shadow:0 8px 18px rgba(30,112,187,.25)} .step h4{font-family:"AvantGarde","Unica",sans-serif;font-weight:600;font-size:1.14rem;margin-bottom:8px} .step p{color:var(--muted);font-size:.96rem} /* TESTI */ .testi{max-width:900px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(40px,5vw,68px);box-shadow:var(--sh-1);position:relative;overflow:hidden} .testi::before{content:"";position:absolute;top:-40px;right:-20px;width:220px;height:220px;background:radial-gradient(circle,rgba(235,75,0,.12),transparent 70%)} .testi .st{color:#f5a623;letter-spacing:5px;font-size:1.1rem;margin-bottom:22px;position:relative} .testi blockquote{font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.32;letter-spacing:-.02em;margin-bottom:26px;position:relative} .testi cite{font-style:normal;font-weight:600} .testi cite span{display:block;font-weight:500;color:var(--muted);font-size:.92rem;margin-top:4px} /* CERTS */ .certs{display:flex;gap:clamp(32px,7vw,80px);flex-wrap:wrap;justify-content:center;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 40px;box-shadow:var(--sh-1);max-width:720px;margin:0 auto} .cert-badge{width:auto;object-fit:contain} .cert-badge.square{height:108px} .cert-badge.wide{height:70px;max-width:280px} @media (max-width:520px){.cert-badge.square{height:90px}.cert-badge.wide{height:56px}} /* PRESS */ .press{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pa{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .3s,box-shadow .3s} .pa:hover{transform:translateY(-6px);box-shadow:var(--sh-2)} .pa .thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--blue-700))} .pa .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s} .pa:hover .thumb img{transform:scale(1.07)} .pa .body{padding:24px;display:flex;flex-direction:column;flex-grow:1} .pa .meta{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--orange);margin-bottom:10px} .pa h3{font-size:1.18rem;margin-bottom:8px;line-height:1.2} .pa p{font-size:.95rem;color:var(--muted);margin-bottom:16px} .pa .more{margin-top:auto;font-weight:600;font-size:.9rem;color:var(--blue);display:inline-flex;align-items:center;gap:6px} /* CTA */ .cta{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(44px,6vw,80px);text-align:center;color:#fff;background:var(--navy)} .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(30,112,187,.6),transparent 55%),radial-gradient(circle at 85% 100%,rgba(235,75,0,.5),transparent 55%)} .cta>*{position:relative} .cta h2{color:#fff;font-size:clamp(2rem,4.2vw,3.2rem);font-weight:500;margin-bottom:16px} .cta p{color:rgba(255,255,255,.86);font-size:1.15rem;max-width:54ch;margin:0 auto 32px} .cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* CONTACT */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .cinfo{display:grid;gap:14px} .ci{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;transition:transform .2s,border-color .2s} .ci:hover{transform:translateX(4px);border-color:var(--blue)} .ci .ic{width:48px;height:48px;border-radius:13px;background:var(--surface-2);color:var(--blue);display:grid;place-items:center;flex-shrink:0} .ci .ic svg{width:23px;height:23px} .ci .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:3px} .ci .v{font-weight:600;font-size:1.02rem} .ci .v a:hover{color:var(--blue)} .mapc{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);min-height:360px;height:100%} .mapc iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.15)} /* FOOTER */ footer{background:var(--navy);color:rgba(255,255,255,.72);padding:66px 0 30px;margin-top:var(--sp)} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:46px} .footer-logo{height:46px;width:auto;filter:brightness(0) invert(1);margin-bottom:18px} .fbrand p{font-size:.95rem;max-width:32ch;margin-bottom:18px} .socials{display:flex;gap:10px} .socials a{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s,border-color .2s} .socials a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)} .socials svg{width:19px;height:19px} .fcol h5{color:#fff;font-family:"AvantGarde","Unica",sans-serif;font-weight:600;font-size:.95rem;margin-bottom:16px} .fcol a{display:block;padding:6px 0;font-size:.94rem;color:rgba(255,255,255,.66);transition:color .15s,padding-left .15s} .fcol a:hover{color:#fff;padding-left:4px} .fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem} .fbot .legal{display:flex;gap:22px;flex-wrap:wrap} .fbot a:hover{color:#fff} /* Mobile menu */ .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.open{transform:none} .mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px} .mm-close{width:48px;height:48px;border:1.5px solid var(--line);background:none;border-radius:14px;cursor:pointer;color:var(--ink)} .mm-close svg{width:24px;height:24px;margin:auto} .mm a.ml{font-family:"AvantGarde","Unica",sans-serif;font-weight:600;font-size:1.7rem;padding:15px 0;border-bottom:1px solid var(--line)} .mm .mc{margin-top:auto;display:grid;gap:12px} .mm .mc .btn{width:100%} /* Reveal */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none} .stagger>*{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(1){transition-delay:.05s} .stagger.in>*:nth-child(2){transition-delay:.13s} .stagger.in>*:nth-child(3){transition-delay:.21s} .stagger.in>*:nth-child(4){transition-delay:.29s} .stagger.in>*:nth-child(5){transition-delay:.37s} .stagger.in>*:nth-child(6){transition-delay:.45s} .stagger.in>*:nth-child(7){transition-delay:.53s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal,.stagger>*{opacity:1;transform:none} html{scroll-behavior:auto} } /* Responsive */ @media (max-width:1000px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hv{max-width:520px;margin:0 auto;width:100%;height:min(520px,88vw)} .about{grid-template-columns:1fr;gap:44px} .aphoto{max-width:460px;margin:0 auto;width:100%} .bento{grid-template-columns:repeat(2,1fr)} .t-w2,.t-w2h2{grid-column:span 2} .svcs{grid-template-columns:repeat(2,1fr)} .statband{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .contact{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} .press{grid-template-columns:1fr} } @media (max-width:760px){ .nav-links,.nav-cta{display:none} .burger{display:grid} .paths{grid-template-columns:1fr} } @media (max-width:560px){ body{font-size:16px} .bento{grid-template-columns:1fr;grid-auto-rows:170px} .t-w2,.t-w2h2,.t-h2{grid-column:span 1;grid-row:span 1} .t-w2h2{grid-row:span 1} .statband{grid-template-columns:1fr 1fr;gap:24px} .svcs{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr} .press{grid-template-columns:1fr} } /* ===================================================================== Mehrseitiger Ausbau: Navigation mit Klappmenues und die Bausteine der Unterseiten. Alles nutzt die Variablen von oben, keine neuen Farben. ===================================================================== */ /* Klappmenue in der Kopfzeile */ .nav-klapp{position:relative} .nav-klapp>a{display:inline-flex;align-items:center;gap:5px} .nav-klapp>a svg{width:14px;height:14px;transition:transform .2s} .nav-klapp:hover>a svg{transform:rotate(180deg)} .nav-menu{ position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:8px; opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s; } .nav-klapp:hover .nav-menu,.nav-klapp:focus-within .nav-menu{opacity:1;visibility:visible;transform:none} .nav-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:.93rem;font-weight:500} .nav-menu a::after{display:none} .nav-menu a:hover{background:var(--surface-2);color:var(--blue)} .nav-links a.ist-hier{color:var(--blue)} .nav-links a.ist-hier::after{transform:scaleX(1)} .mm-nav{display:flex;flex-direction:column;overflow-y:auto} .mm a.ml.ml-sub{font-family:"Unica",sans-serif;font-size:1rem;font-weight:500;padding:11px 0 11px 18px;color:var(--muted);border-bottom:none} /* Held der Unterseiten */ .seitenheld{padding:clamp(46px,7vw,86px) 0 clamp(26px,4vw,44px);position:relative;overflow:clip;background:linear-gradient(180deg,var(--surface-2),var(--bg))} .seitenheld h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:500;letter-spacing:-.018em;margin:20px 0 18px;max-width:20ch} .seitenheld p{font-size:1.13rem;color:var(--ink-soft);max-width:62ch;line-height:1.55} .held-aktionen{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px} /* Textspalte */ .wrap.schmal,.schmal{max-width:820px} .tblock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3.4vw,38px);box-shadow:var(--sh-1);margin-bottom:18px} .tblock h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:14px} .tblock p{color:var(--ink-soft);margin-bottom:14px} .tblock p:last-child{margin-bottom:0} .tblock .hinweis{background:rgba(235,75,0,.08);border-left:3px solid var(--orange);padding:14px 18px;border-radius:0 10px 10px 0;color:var(--ink)} .zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px} .zwei .tblock{margin-bottom:0;display:flex;flex-direction:column;align-items:flex-start} /* Nummerierte Schritte */ .schritte{list-style:none;counter-reset:s;display:grid;gap:16px} .schritte li{counter-increment:s;position:relative;padding-left:52px;color:var(--ink-soft)} .schritte li::before{ content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%; background:var(--blue);color:#fff;font-family:"AvantGarde","Unica",sans-serif;font-weight:700;font-size:.95rem; display:grid;place-items:center; } .schritte b{color:var(--ink)} /* Chips */ .chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px} .chips-titel{font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:6px} .chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:8px 16px;font-size:.9rem;color:var(--ink-soft)} .beruf-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .beruf-chip{ display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-full);padding:13px 22px;font-weight:600;font-size:.97rem;box-shadow:var(--sh-1); transition:transform .2s,border-color .2s,color .2s; } .beruf-chip svg{width:15px;height:15px;color:var(--orange);transition:transform .2s} .beruf-chip:hover{transform:translateY(-3px);border-color:var(--blue);color:var(--blue)} .beruf-chip:hover svg{transform:translateX(3px)} /* Fragen */ .faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:11px;overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:"AvantGarde","Unica",sans-serif;font-size:1.4rem;color:var(--blue);line-height:1;flex-shrink:0} .faq[open] summary::after{content:"–"} .faq p{padding:0 22px 20px;color:var(--ink-soft)} /* Weiterlesen-Link */ .mehr{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue);margin-top:6px} .mehr svg{width:15px;height:15px;transition:transform .2s} .mehr:hover svg{transform:translateX(4px)} /* Schlussruf */ .schluss{background:linear-gradient(135deg,var(--blue-700),var(--blue));color:#fff;border-radius:var(--r-lg);padding:clamp(34px,5vw,62px);text-align:center;box-shadow:var(--sh-2)} .schluss h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px} .schluss p{color:rgba(255,255,255,.85);max-width:56ch;margin:0 auto} .schluss-aktionen{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:28px} .schluss-aktionen .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)} .schluss-aktionen .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;border-color:#fff} /* Kontakt */ .kontaktliste{display:grid;gap:12px} .kontaktliste a,.kontaktliste div{display:block;background:var(--surface-2);border-radius:var(--r-sm);padding:15px 18px} .kontaktliste span{display:block;font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .kontaktliste b{font-size:1.02rem;font-weight:600;color:var(--ink)} .kontaktliste a:hover b{color:var(--blue)} .karte{margin-top:22px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1)} .karte iframe{display:block;width:100%;height:340px;border:0} /* Karten als Links */ a.svc{text-decoration:none} a.svc:hover h3{color:var(--blue)} @media (max-width:1000px){.nav-menu{display:none}} /* Die Navigation hat seit dem mehrseitigen Ausbau sechs Punkte statt fuenf und dazu laengere Beschriftungen. Sie braucht deshalb frueher das Burger-Menue, sonst schiebt sie das Logo zusammen. */ .brand,.brand-logo{flex-shrink:0} .nav-cta{flex-shrink:0} .nav-links a{white-space:nowrap} /* Die Kopfzeile sitzt in .wrap und hat damit hoechstens 1220 Pixel, egal wie breit der Bildschirm ist. Die kompakten Masse gelten deshalb immer und nicht erst ab einer Schwelle, sonst laeuft die Zeile auf grossen Schirmen ueber. */ .nav-links a{padding:10px 9px;font-size:.92rem} .nav-cta{gap:6px} .nav-cta .btn{padding:11px 17px;font-size:.9rem} /* Rechnung: .wrap ist hoechstens 1220 breit und hat 24 Pixel Innenabstand je Seite, es bleiben also 1172 fuer Logo, Menue und Handlungsknopf, abzueglich zweier Abstaende. Sechs Menuepunkte, das Logo mit Signet und zwei Knoepfe passen da nicht hinein. Anmelden faellt deshalb aus der Kopfzeile, es steht weiterhin im Mobilmenue, in der Fussleiste unter Portal und auf /kontakt/. */ .nav{gap:16px} .nav-cta .btn-ghost{display:none} @media (max-width:1080px){ .nav-links,.nav-cta{display:none} .burger{display:grid} } /* Der Seitenkopf der Unterseiten steht mittig, wie die Abschnittskoepfe auf der Startseite. Sonst springt der Text zwischen Held und Inhalt hin und her. */ .seitenheld .wrap{max-width:900px;text-align:center} .seitenheld h1{margin-left:auto;margin-right:auto} .seitenheld p{margin-left:auto;margin-right:auto} .held-aktionen{justify-content:center} /* Die drei Achsen: wen, wo, wie. Seit 25.08.2026, weil vorher Qualifikation, Einsatzbereich und Einsatzform in einer Liste durcheinanderstanden. */ .achsen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:22px} .achse{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:30px 28px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:12px} .achse-nr{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--orange-600);background:var(--surface-2); padding:6px 13px;border-radius:var(--r-full)} .achse h3{font-size:1.22rem} .achse>p{color:var(--ink-soft);font-size:.95rem} .achse .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} .achse .chip{font-size:.85rem;padding:7px 13px;border:1px solid var(--line); border-radius:var(--r-full);color:var(--ink-soft);background:var(--surface); transition:border-color .2s,color .2s} a.chip:hover{border-color:var(--blue);color:var(--blue)} .achse .mehr{margin-top:auto;padding-top:6px}