/* 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/curawel/fonts/ITCAvantGardeGothicMedium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Unica";src:url("/cwg/curawel/fonts/NeueHaasUnicaRegular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Unica";src:url("/cwg/curawel/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 curawel.css */ /* ============================================================ Token Die Form (Typo, Abstaende, Radien, Schatten, Knopfgeometrie) steht seit 24.08.2026 in _Kern/tokens.css und gilt fuer alle CWG-Marken. Hier stehen nur noch die Namen, die diese Seite historisch benutzt, als Verweis auf die gemeinsamen Steckplaetze. So mussten die 157 Klassen darunter nicht angefasst werden. ============================================================ */ :root{ --navy:var(--dunkel); --blue:var(--marke); --blue-ink:var(--marke-tief); --blue-mid:var(--marke-mittel); --sky:var(--marke-hell); --orange:var(--akzent); --orange-solid:var(--akzent-voll); --orange-deep:var(--akzent-tief); --paper:var(--flaeche); --mist:var(--flaeche-2); --mist-2:var(--flaeche-3); --line:var(--linie); --line-soft:var(--linie-zart); --muted:var(--gedaempft); --r:var(--r-s); --r-lg:var(--r-l); --shadow:var(--sh-2); --shadow-lg:var(--sh-3); } /* ============================================================ Reset ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; color-scheme:light; /* Curawel wird immer hell dargestellt */ } a,button,summary,label,input,select,textarea{touch-action:manipulation} a,button,summary{-webkit-tap-highlight-color:rgba(30,112,187,.15)} body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0} ul,ol{padding:0;list-style:none} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} html{scroll-behavior:smooth;scroll-padding-top:96px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--text); font-family:"Unica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:1.0625rem; line-height:1.62; font-synthesis:none; /* Avant Garde nie kuenstlich fetten */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; /* lange deutsche Komposita brechen sauber */ overflow-x:hidden; } /* ============================================================ Typografie ============================================================ */ .h1,.h2,.h3,.h4,.stat__num,.step__no{ font-family:"AvantGarde","Unica",sans-serif; font-weight:500; letter-spacing:-.015em; text-wrap:balance; } .stat__num,.shift__scale,.shift__meta,.step__no{font-variant-numeric:tabular-nums} .h1{font-size:clamp(2.25rem,1.25rem + 3.4vw,4.1rem);line-height:1.07;color:var(--blue);text-wrap:normal} .h2{font-size:clamp(1.75rem,1.15rem + 2.1vw,2.9rem);line-height:1.12;color:var(--blue)} .h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.25;color:var(--navy);letter-spacing:-.01em} .h4{font-size:1.0625rem;line-height:1.3;color:var(--navy);letter-spacing:0} .eyebrow{ font-family:"Unica",sans-serif;font-weight:700; font-size:.75rem;letter-spacing:.15em;text-transform:uppercase; color:var(--orange-deep); display:flex;align-items:center;gap:.65rem; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:none} .eyebrow--center{justify-content:center} .lead{font-size:clamp(1.05rem,1rem + .35vw,1.24rem);line-height:1.58;color:var(--muted)} .muted{color:var(--muted)} .tight{max-width:62ch} .tighter{max-width:48ch} a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--navy)} strong,b{font-weight:700} /* Fokus ist ueberall sichtbar */ :focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px} .skip{ position:absolute;left:.75rem;top:-4rem;z-index:200; background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:10px; text-decoration:none;font-weight:700;transition:top .18s var(--ease); } .skip:focus{top:.75rem;color:#fff} /* ============================================================ Layout ============================================================ */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:var(--sec)} .section--mist{background:var(--mist)} .section--navy{background:var(--navy);color:#fff} .section--navy .h2{color:var(--sky)} .section--navy .h3,.section--navy .h4{color:#fff} .section--navy .muted,.section--navy .lead{color:#c6dcf0} .section--navy .eyebrow{color:#ffb08a} .section--navy .eyebrow::before{background:var(--orange)} .head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3.25rem)} .head--center{justify-items:center;text-align:center} .head p{max-width:60ch} .head--center p{margin-inline:auto} .grid{display:grid;gap:clamp(1rem,2vw,1.5rem)} @media (min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}} @media (min-width:1040px){.g-4{grid-template-columns:repeat(4,1fr)}} /* ============================================================ Buttons ============================================================ */ .btn{ --bg:var(--orange-solid);--fg:#fff;--bd:var(--orange-solid); display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:52px;padding:.8rem 1.5rem; background:var(--bg);color:var(--fg);border:2px solid var(--bd); border-radius:999px; font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:.005em; text-decoration:none;cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease); } .btn:hover{--bg:var(--orange-deep);--bd:var(--orange-deep);color:#fff;box-shadow:0 10px 24px -10px rgba(235,75,0,.65);transform:translateY(-1px)} .btn:active{transform:translateY(0);box-shadow:none} .btn svg{width:20px;height:20px;flex:none} .btn--ghost{--bg:transparent;--fg:var(--blue);--bd:var(--blue)} .btn--ghost:hover{--bg:var(--blue);--fg:#fff;--bd:var(--blue);box-shadow:0 10px 24px -10px rgba(30,112,187,.6)} .btn--white{--bg:#fff;--fg:var(--navy);--bd:#fff} .btn--white:hover{--bg:var(--sky);--fg:var(--navy);--bd:var(--sky);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)} .btn--outline-white{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)} .btn--outline-white:hover{--bg:rgba(255,255,255,.12);--fg:#fff;--bd:#fff;box-shadow:none} .btn--sm{min-height:44px;padding:.5rem 1.1rem;font-size:.94rem} .btns{display:flex;flex-wrap:wrap;gap:.75rem} /* Textlink mit Pfeil */ .arrow{ display:inline-flex;align-items:center;gap:.4rem;min-height:26px; font-weight:700;text-decoration:none;color:var(--blue); } .arrow::after{content:"→";transition:transform .18s var(--ease)} .arrow:hover::after{transform:translateX(4px)} /* Freistehende Pfeillinks in eigenem Absatz: mehr Platz zum Antippen */ .wrap > p > .arrow,.prose > p > .arrow{padding-block:.45rem} /* ============================================================ Kopfzeile ============================================================ */ .hdr{ position:sticky;top:0;z-index:90; background:var(--paper); border-bottom:1px solid transparent; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 20px -14px rgba(5,43,89,.4)} .hdr__in{display:flex;align-items:center;gap:1rem;min-height:74px;padding-block:.7rem} .hdr__logo{display:flex;align-items:center;flex:none;padding:.25rem;margin-left:-.25rem;border-radius:8px} .hdr__logo svg{width:auto;height:30px} .hdr__nav{display:none;margin-left:auto} .hdr__nav > ul{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.4rem)} .hdr__nav > ul > li > a{ display:block;padding:.5rem .1rem;color:var(--navy);text-decoration:none; font-weight:700;font-size:.95rem;position:relative;white-space:nowrap; } .hdr__nav > ul > li > a::after{ content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px; background:var(--orange);transform:scaleX(0);transform-origin:left; transition:transform .2s var(--ease); } .hdr__nav > ul > li > a:hover::after, .hdr__nav > ul > li > a[aria-current]::after{transform:scaleX(1)} .hdr__act{display:none;gap:.5rem;align-items:center;flex:none} .hdr__tel{ display:inline-flex;align-items:center;gap:.5rem; font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap; padding:.5rem .25rem; } .hdr__tel svg{width:19px;height:19px;color:var(--orange)} .hdr__tel:hover{color:var(--blue)} .burger{ margin-left:auto;display:inline-flex;align-items:center;justify-content:center; width:48px;height:48px;border:2px solid var(--line);background:#fff;border-radius:12px;cursor:pointer; } .burger svg{width:22px;height:22px;color:var(--navy)} @media (min-width:1060px){ .hdr__nav{display:block} .hdr__act{display:flex;margin-left:clamp(.75rem,2vw,2rem)} .burger{display:none} } /* Mobile Menue */ .mnav{ position:fixed;inset:0;z-index:120;background:var(--paper); display:grid;grid-template-rows:auto 1fr auto; transform:translateY(-100%);visibility:hidden; transition:transform .32s var(--ease),visibility .32s; } .mnav[data-open="true"]{transform:translateY(0);visibility:visible} .mnav__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;padding:.7rem var(--gut);border-bottom:1px solid var(--line)} .mnav__top svg.logo{height:28px;width:auto} .mnav__body{overflow-y:auto;padding:1.5rem var(--gut) 1rem} .mnav__body a{ display:flex;align-items:center;justify-content:space-between; padding:1rem 0;border-bottom:1px solid var(--line-soft); font-family:"AvantGarde",sans-serif;font-weight:500;font-size:1.4rem; color:var(--navy);text-decoration:none; } .mnav__body a::after{content:"→";color:var(--orange);font-family:"Unica",sans-serif} .mnav__foot{padding:1.25rem var(--gut) calc(1.25rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:.6rem;background:var(--mist)} .mnav__foot .btn{width:100%} /* Fixe Kontaktleiste am Handy */ .dock{ position:fixed;left:0;right:0;bottom:0;z-index:80; display:flex;gap:.5rem;align-items:center; padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);border-top:1px solid var(--line); box-shadow:0 -8px 24px -18px rgba(5,43,89,.7); } .dock .btn{flex:1;min-height:48px;padding-inline:.55rem;font-size:.88rem;white-space:nowrap} .dock .btn--main{flex:1.7} .dock .btn--icon{flex:none;width:48px;padding:0} .dock .btn--icon svg{width:20px;height:20px} @media (min-width:1060px){.dock{display:none}} @media (max-width:1059px){body{padding-bottom:76px}} /* ============================================================ Held ============================================================ */ .hero{position:relative;overflow:hidden;background:var(--paper)} .hero::before{ /* Zeitraster, 12 feine Linien wie im Dienstplan */ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,rgba(242,247,252,0) 0%,rgba(232,241,249,.85) 100%), repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px calc(100% / 12)); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); opacity:.9; } .hero__in{position:relative;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem);display:grid;gap:clamp(2.5rem,5vw,3.5rem)} @media (min-width:1000px){ .hero__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(2.5rem,4vw,4rem)} } .hero__copy{display:grid;gap:1.35rem;justify-items:start} .hero .h1{max-width:14ch} .hero__lead{max-width:52ch} .hero__doors{display:flex;flex-wrap:wrap;gap:.75rem;width:100%} .hero__doors .btn{flex:1 1 220px} .hero__note{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--muted)} .hero__note svg{width:17px;height:17px;color:var(--blue);flex:none} /* Kennzahlen */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;width:100%;border-top:1px solid var(--line);padding-top:1.35rem;margin-top:.35rem} .stat__num{display:block;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);line-height:1;color:var(--navy)} .stat__lbl{display:block;margin-top:.4rem;font-size:.83rem;line-height:1.3;color:var(--muted)} @media (max-width:420px){.stat__lbl{font-size:.76rem}} /* Dienstplan-Karte: das Herzstueck */ .shift{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-lg);padding:clamp(1.15rem,2.5vw,1.7rem); display:grid;gap:1rem;max-width:520px;width:100%;justify-self:center; } .shift__top{display:flex;align-items:center;justify-content:space-between;gap:1rem} .shift__ward{display:grid;gap:.15rem;min-width:0} .shift__ward b{font-size:.98rem;line-height:1.2} .shift__ward span{font-size:.8rem;color:var(--muted);letter-spacing:.02em} .pill{ display:inline-flex;align-items:center;gap:.4rem;flex:none; padding:.32rem .7rem;border-radius:999px; font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; background:var(--mist-2);color:var(--blue-ink);border:1px solid var(--line); transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor} .shift.is-filled .pill{background:#e6f4ea;color:#14663a;border-color:#bfe3cd;transition-delay:.9s} .shift__rail{position:relative;display:grid;gap:.55rem} .shift__scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);letter-spacing:.04em} .shift__track{ position:relative;height:46px;border-radius:10px; background:var(--mist);border:1px dashed var(--line);overflow:hidden; } .shift__ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 12 - 1px),var(--line-soft) calc(100% / 12 - 1px) calc(100% / 12))} .shift__fill{ position:absolute;inset:0; background:linear-gradient(90deg,var(--blue) 0%,var(--blue-mid) 100%); border-radius:9px; transform:scaleX(0);transform-origin:left center; transition:transform 1.5s var(--ease); } .shift.is-filled .shift__fill{transform:scaleX(1)} .shift__label{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem; font-size:.88rem;font-weight:700;color:var(--muted); transition:color .25s var(--ease); } .shift.is-filled .shift__label{color:#fff;transition-delay:.9s} .shift__label svg{width:17px;height:17px;opacity:0;transform:scale(.6);transition:opacity .3s var(--ease) 1.2s,transform .3s var(--ease) 1.2s} .shift.is-filled .shift__label svg{opacity:1;transform:scale(1)} .shift__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:.85rem} .shift__meta b{color:var(--navy);font-weight:700} .shift__cap{font-size:.78rem;color:var(--muted);line-height:1.45} @media (prefers-reduced-motion:reduce){ .shift__fill,.shift__label svg,.pill{transition:none} } /* ============================================================ Wie es laeuft, drei Schritte ============================================================ */ .model{display:grid;gap:clamp(1rem,2vw,1.5rem)} @media (min-width:860px){.model{grid-template-columns:repeat(3,1fr)}} .mcard{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.75rem);display:grid;gap:.7rem;align-content:start; position:relative; } .mcard__ic{width:44px;height:44px;color:var(--blue)} .mcard p{color:var(--muted);font-size:.98rem} .model .mcard::after{ content:"";position:absolute;right:-1px;top:50%;width:0;height:0; } @media (min-width:860px){ .model .mcard:not(:last-child)::after{ content:"→";right:calc(-.75rem - 5px);top:50%;transform:translateY(-50%); color:var(--sky);font-size:1.3rem;line-height:1;font-weight:700;width:auto;height:auto; } } /* ============================================================ Leistungen ============================================================ */ .svc-group{display:grid;gap:1.1rem} .svc-group + .svc-group{margin-top:clamp(2.25rem,4vw,3.25rem)} .svc-group__hd{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;padding-bottom:.5rem;border-bottom:2px solid var(--line)} .svc-group__hd .h3{color:var(--blue)} .svc-group__hd span{font-size:.88rem;color:var(--muted)} .svc{display:grid;gap:clamp(1rem,2vw,1.35rem)} @media (min-width:700px){.svc{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.svc{grid-template-columns:repeat(3,1fr)}} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.6rem); display:flex;flex-direction:column;gap:.75rem; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); } .card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px)} .card__ic{width:48px;height:48px;color:var(--blue);flex:none} .card__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;min-width:0} .card p{color:var(--muted);font-size:.97rem} .card__foot{margin-top:auto;padding-top:.35rem;display:flex;flex-wrap:wrap;gap:.5rem .95rem;align-items:center} .card--ask{background:var(--mist);border-style:dashed} .card--ask .card__ic{color:var(--orange)} @media (min-width:700px){.card--ask{grid-column:span 1}} @media (min-width:1040px){.card--ask{grid-column:span 2}} .tag{ display:inline-flex;align-items:center;gap:.4rem;flex:none; padding:.28rem .62rem;border-radius:999px; font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap; } .tag--now{background:#e6f4ea;color:#14663a;border:1px solid #bfe3cd} .tag--soon{background:var(--mist-2);color:#1a5a95;border:1px solid var(--line)} .tag__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} /* ============================================================ Aufgabenliste: was eine Sitzwache tut und was nicht ============================================================ */ .duty{display:grid;gap:clamp(1rem,2vw,1.5rem)} @media (min-width:860px){.duty{grid-template-columns:repeat(2,1fr)}} .duty__col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,2.4vw,1.85rem);display:grid;gap:1rem;align-content:start} .duty__col--no{background:var(--mist)} .duty__hd{display:flex;align-items:center;gap:.7rem} .duty__hd .h4{font-size:1.1rem} .mark{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none} .mark svg{width:16px;height:16px} .mark--yes{background:#e6f4ea;color:#14663a} .mark--no{background:#fdece5;color:#a03300} .duty ul{display:grid;gap:.6rem} .duty li{display:flex;gap:.65rem;align-items:flex-start;font-size:.99rem;color:var(--navy);min-width:0} .duty li::before{ content:"";width:8px;height:8px;border-radius:2px;margin-top:.5rem;flex:none; } .duty__col--yes li::before{background:#2f9e63} .duty__col--no li::before{background:var(--orange)} /* ============================================================ Vorteilsliste ============================================================ */ .perks{display:grid;gap:clamp(.85rem,1.8vw,1.15rem);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .perk{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.15rem} .section--mist .perk{background:#fff} .perk__ic{width:40px;height:40px;color:var(--blue);flex:none} .perk>p{min-width:0} .perk b{display:block;margin-bottom:.15rem;font-size:1.02rem;color:var(--navy)} .perk span{font-size:.94rem;color:var(--muted);line-height:1.5} /* ============================================================ Ablauf, echte Reihenfolge also nummeriert ============================================================ */ .steps{display:grid;gap:0;counter-reset:s} .step{ display:grid;grid-template-columns:auto 1fr;gap:1rem 1.15rem; padding:1.25rem 0;border-top:1px solid var(--line); } .step:last-child{border-bottom:1px solid var(--line)} .step__no{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--mist-2);color:var(--blue-ink);font-size:1.02rem; border:1px solid var(--line); } .section--navy .step{border-color:rgba(255,255,255,.18)} .section--navy .step__no{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:var(--sky)} .step__bd{display:grid;gap:.3rem;min-width:0} .step__bd p{color:var(--muted);font-size:.98rem} .section--navy .step__bd p{color:#c6dcf0} /* Hinweiskasten */ .note{ display:flex;gap:.85rem;align-items:flex-start; background:var(--mist-2);border:1px solid var(--line);border-left:4px solid var(--orange); border-radius:10px;padding:1rem 1.15rem;font-size:.95rem;color:var(--navy); } .note svg{width:20px;height:20px;color:var(--orange);flex:none;margin-top:.15rem} .section--navy .note{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);border-left-color:var(--orange);color:#e5f0f9} /* Zweispaltiges Modul */ .split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start} @media (min-width:960px){ /* Standard: breite Textspalte links, schmale Randspalte rechts */ .split{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)} /* Umgekehrt: schmale Einleitung links, Inhalt rechts */ .split--flip{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} /* Zwei gleich starke Spalten, etwa Kontaktkarte neben Formular */ .split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } .split__aside{display:grid;gap:1.35rem;align-content:start} @media (min-width:960px){.split__aside{position:sticky;top:110px}} /* ============================================================ Stimmen ============================================================ */ .voices{display:grid;gap:clamp(1rem,2vw,1.4rem)} @media (min-width:760px){.voices{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.voices{grid-template-columns:repeat(3,1fr)}} .voice{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.9rem; } .voice blockquote{font-size:.99rem;line-height:1.6;color:var(--navy)} .voice figcaption{margin-top:auto;display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--muted)} .voice__av{width:34px;height:34px;border-radius:50%;background:var(--mist-2);color:var(--blue-ink);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none;border:1px solid var(--line)} .voice__q{width:26px;height:26px;color:var(--sky)} .voice--join{background:var(--mist);border-style:dashed;justify-content:center;align-items:flex-start} .voice--join .btn{margin-top:.35rem} /* ============================================================ Werte ============================================================ */ .values{display:grid;gap:clamp(1rem,2vw,1.5rem)} @media (min-width:640px){.values{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.values{grid-template-columns:repeat(4,1fr)}} .value{display:grid;gap:.6rem;align-content:start;padding-top:1.15rem;border-top:2px solid rgba(177,208,235,.35)} .value__ic{width:44px;height:44px;color:var(--sky)} .value p{font-size:.95rem;color:#c6dcf0} /* ============================================================ FAQ ============================================================ */ .faq{display:grid;gap:.65rem;max-width:900px} .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .faq details[open]{border-color:var(--blue-mid);box-shadow:var(--shadow)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.05rem 1.25rem;cursor:pointer;list-style:none; font-weight:700;font-size:1.02rem;color:var(--navy); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";width:12px;height:12px;flex:none; border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange); transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease); } .faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .faq summary:hover{color:var(--blue)} .faq__bd{padding:0 1.25rem 1.25rem;color:var(--muted);font-size:.99rem;display:grid;gap:.7rem} .faq__bd ul{display:grid;gap:.4rem;padding-left:1.1rem;list-style:disc} .faq__bd li{padding-left:.2rem} /* ============================================================ Kontakt ============================================================ */ .ways{display:grid;gap:clamp(1rem,2vw,1.4rem)} @media (min-width:820px){.ways{grid-template-columns:repeat(3,1fr)}} .way{ display:grid;gap:.65rem;align-content:start; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.6rem);text-decoration:none;color:inherit; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); } .way:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit} .way__ic{width:44px;height:44px;color:var(--orange)} .way b{font-size:1.08rem;color:var(--navy);font-family:"AvantGarde",sans-serif;font-weight:500} .way span{font-size:.95rem;color:var(--muted)} .way .arrow{margin-top:.15rem} .form{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.35rem,3vw,2.25rem);display:grid;gap:1.15rem;box-shadow:var(--shadow); } .field{display:grid;gap:.4rem} .field label{font-weight:700;font-size:.92rem;color:var(--navy)} .field .hint{font-size:.82rem;color:var(--muted);font-weight:400} .field input,.field select,.field textarea{ width:100%;padding:.8rem .95rem; background:var(--mist);border:1.5px solid var(--line);border-radius:10px; font-size:1rem;color:var(--navy); transition:border-color .16s var(--ease),background-color .16s var(--ease); } .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-mid)} .field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(30,112,187,.18)} .field textarea{resize:vertical;min-height:130px;line-height:1.55} .field select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem} @media (min-width:620px){.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}} .check{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.5} .check input{width:24px;height:24px;flex:none;margin-top:.1rem;accent-color:var(--orange-solid);padding:0} .form__foot{display:grid;gap:.75rem} .form__foot .btn{justify-self:start} @media (max-width:520px){.form__foot .btn{width:100%}} .contact-card{ background:var(--navy);color:#fff;border-radius:var(--r-lg); padding:clamp(1.35rem,3vw,2rem);display:grid;gap:1.25rem;align-content:start; } .contact-card .h3{color:var(--sky)} .cinfo{display:grid;gap:1rem} .cinfo__row{display:flex;gap:.85rem;align-items:flex-start} .cinfo__row>div{min-width:0} .cinfo__ic{width:22px;height:22px;color:var(--sky);flex:none;margin-top:.2rem} .cinfo b{display:block;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sky);margin-bottom:.15rem;font-weight:700} .cinfo a{display:inline-block;min-height:24px;color:#fff;font-weight:700} .cinfo a:hover{color:var(--sky)} .cinfo p{font-size:.96rem;color:#d5e6f4;line-height:1.5} /* ============================================================ Abschlussband ============================================================ */ .cta-band{background:var(--navy);color:#fff} .cta-band__in{ padding-block:clamp(3rem,6vw,4.75rem); display:grid;gap:1.75rem;justify-items:center;text-align:center; } .cta-band .h2{color:var(--sky);max-width:20ch} .cta-band p{color:#c6dcf0;max-width:52ch} /* ============================================================ Fusszeile ============================================================ */ .ftr{background:var(--mist);border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem) 2rem;font-size:.94rem} .ftr__grid{display:grid;gap:2rem} @media (min-width:760px){.ftr__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}} .ftr__logo{height:28px;width:auto;margin-bottom:1rem} .ftr h2{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;font-weight:700} .ftr ul{display:grid;gap:.4rem} .ftr li a{display:inline-flex;align-items:center;min-height:28px} .ftr a{color:var(--navy);text-decoration:none;font-weight:400} .ftr a:hover{color:var(--blue);text-decoration:underline} .ftr address{font-style:normal;color:var(--muted);line-height:1.65} .ftr__soc{display:flex;gap:.6rem;margin-top:1.15rem} .ftr__soc a{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:#fff;border:1px solid var(--line);color:var(--blue); transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease); } .ftr__soc a:hover{background:var(--blue);color:#fff;border-color:var(--blue)} .ftr__soc svg{width:19px;height:19px} .ftr__base{ margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;align-items:center;justify-content:space-between; font-size:.87rem;color:var(--muted); } .ftr__base ul{display:flex;flex-wrap:wrap;gap:.65rem 1.35rem} /* Einblenden beim Scrollen, sehr zurueckhaltend */ .rise{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .rise.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rise{opacity:1;transform:none;transition:none} *{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* ============================================================ Mehrseitigkeit: Bausteine, die nur auf Unterseiten vorkommen ============================================================ */ /* Nur fuer Screenreader */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Brotkrumen */ .crumb{border-bottom:1px solid var(--line-soft);background:var(--paper)} .crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .55rem;padding-block:.85rem;font-size:.85rem;color:var(--muted)} .crumb li{display:flex;align-items:center;gap:.55rem} .crumb li + li::before{content:"/";color:var(--sky)} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--blue);text-decoration:underline} .crumb [aria-current]{color:var(--navy);font-weight:700} /* Kopf einer Unterseite */ .phero{background:var(--paper);position:relative;overflow:hidden} .phero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,rgba(242,247,252,0) 0%,rgba(232,241,249,.7) 100%), repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px calc(100% / 12)); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%); } .phero__in{position:relative;padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2.25rem,4vw,3.5rem);display:grid;gap:1.25rem;justify-items:start} .phero .h1{max-width:18ch} .phero .lead{max-width:58ch} .phero .btns{margin-top:.35rem} @media (min-width:960px){ .phero__in--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,4vw,3.5rem)} .phero__in--split > .phero__aside{justify-self:end;width:100%} } /* Fliesstext auf den Wissensseiten */ .prose{max-width:70ch;display:grid;gap:1.15rem;font-size:1.075rem;line-height:1.68} .prose > h2{ font-family:"AvantGarde","Unica",sans-serif;font-weight:500;letter-spacing:-.015em; font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);line-height:1.18;color:var(--blue); margin-top:clamp(1.25rem,2.5vw,2rem); } .prose > h3{ font-family:"AvantGarde","Unica",sans-serif;font-weight:500;letter-spacing:-.01em; font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem);line-height:1.25;color:var(--navy); margin-top:.6rem; } .prose ul,.prose ol{display:grid;gap:.55rem;padding-left:1.35rem} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li{padding-left:.25rem} .prose li::marker{color:var(--orange)} .prose a{font-weight:700} .prose figure{margin:0} .prose > .note,.prose > .duty,.prose > .tbl-wrap{max-width:none} /* Inhaltsverzeichnis */ .toc{ background:var(--mist);border:1px solid var(--line);border-radius:var(--r); padding:1.15rem 1.35rem;display:grid;gap:.6rem; } .toc h2{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;font-family:"Unica",sans-serif} .toc ol{display:grid;gap:.45rem;counter-reset:t;list-style:none;padding:0} .toc li{counter-increment:t;display:flex;gap:.6rem;font-size:.97rem} .toc li::before{content:counter(t) ".";color:var(--orange);font-weight:700;flex:none} .toc a{display:inline-block;padding:.3rem 0;color:var(--navy);text-decoration:none;font-weight:400} .toc a:hover{color:var(--blue);text-decoration:underline} /* Vergleichstabelle */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;-webkit-overflow-scrolling:touch} .tbl{border-collapse:collapse;width:100%;min-width:640px;font-size:.96rem} .tbl th,.tbl td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)} .tbl thead th{ background:var(--mist);color:var(--navy);font-size:.78rem;letter-spacing:.07em; text-transform:uppercase;font-weight:700;white-space:nowrap;border-bottom:2px solid var(--line); } .tbl tbody th{font-weight:700;color:var(--navy);white-space:nowrap} .tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0} .tbl td{color:var(--muted)} /* Karten, die auf eine andere Seite fuehren */ .linkcards{display:grid;gap:clamp(1rem,2vw,1.35rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .linkcard{ display:flex;flex-direction:column;gap:.7rem; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.6rem);text-decoration:none;color:inherit; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); } .linkcard:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit} .linkcard__ic{width:44px;height:44px;color:var(--blue);flex:none} .linkcard b{font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-size:1.2rem;line-height:1.25;color:var(--navy);letter-spacing:-.01em} .linkcard span{font-size:.96rem;color:var(--muted);line-height:1.55} .linkcard .arrow{margin-top:auto;padding-top:.35rem} /* Offene Taetigkeiten */ .jobs{display:grid;gap:1rem} .job{ background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.6rem); display:grid;gap:.85rem; } @media (min-width:820px){ .job{grid-template-columns:56px minmax(0,1fr) auto;align-items:start;gap:1.25rem} .job__act{grid-column:3;align-self:center} } .job__ic{width:52px;height:52px;color:var(--blue)} .job__bd{display:grid;gap:.5rem} .job__meta{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:.15rem} .chip{ display:inline-flex;align-items:center;gap:.35rem; padding:.28rem .65rem;border-radius:999px;background:var(--mist);border:1px solid var(--line); font-size:.79rem;font-weight:700;color:var(--navy);white-space:nowrap; } .chip svg{width:14px;height:14px;color:var(--blue)} .job p{color:var(--muted);font-size:.97rem} /* Zahlenband, kompakt, fuer Unterseiten */ .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.25rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.5rem} .figs div{display:grid;gap:.3rem} .figs b{font-family:"AvantGarde","Unica",sans-serif;font-weight:500;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1;color:var(--navy);letter-spacing:-.015em;font-variant-numeric:tabular-nums} .figs span{font-size:.85rem;color:var(--muted);line-height:1.4} /* ============================================================ Bilder KI-erzeugte Fotos, bewusst hell und dokumentarisch, keine Nachtstimmung. Platzhalter, bis echte Aufnahmen aus den Haeusern da sind. ============================================================ */ .illu{ margin:0 auto;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;display:grid;max-width:820px;width:100%; } .illu img{width:100%;height:auto;display:block;background:var(--mist-2);aspect-ratio:auto} .illu figcaption{ padding:.85rem 1.15rem;font-size:.85rem;line-height:1.45;color:var(--muted); border-top:1px solid var(--line); } .illu--breit{max-width:none} .prose > .illu{max-width:none;margin-block:.5rem} /* ============================================================ Plattform-Leiste ganz oben exaPool ist das digitale Organisationssystem hinter app.curawel.at. Die Einstiege gehoeren sichtbar nach oben, so wie sie auf der alten Seite standen. ============================================================ */ .topbar{background:var(--navy);color:#fff;font-size:.86rem} .topbar__in{display:flex;align-items:center;gap:.35rem 1.35rem;flex-wrap:wrap;min-height:42px;padding-block:.45rem} .topbar__label{display:flex;align-items:center;gap:.5rem;color:var(--sky);font-weight:700;margin-right:auto} .topbar__label svg{width:16px;height:16px;flex:none} .topbar a{ color:#fff;text-decoration:none;font-weight:700;white-space:nowrap; padding:.3rem 0;border-bottom:2px solid transparent; } .topbar a:hover{color:var(--sky);border-bottom-color:var(--orange)} .topbar__app::after{content:" ↗";font-weight:400;opacity:.6} .topbar__app{color:var(--sky)} @media (max-width:859px){.topbar{display:none}} /* In der Handy-Navigation stehen dieselben Einstiege */ .mnav__platt{margin-top:1.5rem;padding-top:1.25rem;border-top:2px solid var(--line)} .mnav__platt h2{ font-family:"Unica",sans-serif;font-size:.78rem;line-height:1.3;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.35rem; } .mnav__platt a{font-size:1.05rem;font-family:"Unica",sans-serif;font-weight:700;color:var(--blue)} .mnav__platt a::after{content:"↗"} /* ============================================================ Berufsgruppen-Weiche auf der Bewerbungsseite Ersetzt die Auswahl, die vorher in der App lag. ============================================================ */ .gruppen{display:grid;gap:clamp(1rem,2vw,1.35rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .gruppe{ display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;text-align:left; background:#fff;border:2px solid var(--line);border-radius:var(--r); padding:clamp(1.25rem,2.4vw,1.6rem);cursor:pointer;font:inherit;color:inherit; transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease); } .gruppe:hover{border-color:var(--blue-mid);box-shadow:var(--shadow);transform:translateY(-2px)} .gruppe.is-aktiv{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,112,187,.15),var(--shadow)} .gruppe__tag{ display:inline-flex;padding:.28rem .62rem;border-radius:999px; background:var(--mist-2);color:#1a5a95;border:1px solid var(--line); font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; } .gruppe.is-aktiv .gruppe__tag{background:var(--blue);color:#fff;border-color:var(--blue)} .gruppe__name{ font-family:"AvantGarde","Unica",sans-serif;font-weight:500;letter-spacing:-.01em; font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.2;color:var(--navy); } .gruppe__text{font-size:.96rem;line-height:1.55;color:var(--muted)} .gruppe__marke{ display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.5rem; font-size:.88rem;font-weight:700;color:var(--muted); } .gruppe__marke svg{width:16px;height:16px;color:var(--line);flex:none} .gruppe.is-aktiv .gruppe__marke{color:var(--blue)} .gruppe.is-aktiv .gruppe__marke svg{color:#2f9e63} /* ============================================================ Aufklappbare Untermenues Maus: aufklappen beim Darueberfahren. Tastatur: der kleine Pfeil ist ein echter Knopf mit aria-expanded, Esc schliesst. ============================================================ */ .hdr__nav li.has-sub{position:relative;display:flex;align-items:center;gap:.15rem} .sub-toggle{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;border-radius:5px; } .sub-toggle::after{ content:"";width:7px;height:7px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-1px,-1px); transition:transform .18s var(--ease),border-color .18s var(--ease); } .has-sub:hover .sub-toggle::after, .sub-toggle[aria-expanded="true"]::after{border-color:var(--orange)} .sub-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)} .subnav{ position:absolute;top:100%;left:-.9rem;z-index:95; min-width:280px;margin-top:.35rem;padding:.5rem; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 2px 4px rgba(5,43,89,.06),0 22px 44px -20px rgba(5,43,89,.35); display:grid;gap:.1rem; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s; } /* Brücke, damit die Maus nicht durch die Lücke fällt */ .subnav::before{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem} .has-sub:hover .subnav, .has-sub:focus-within .subnav, .subnav.is-open{opacity:1;visibility:visible;transform:none} .subnav a{ display:block;padding:.55rem .75rem;border-radius:9px;white-space:nowrap; font-size:.94rem;font-weight:400;color:var(--navy);text-decoration:none; } .subnav a::after{display:none} .subnav a:hover{background:var(--mist);color:var(--blue)} .subnav a[aria-current="page"]{background:var(--mist-2);color:var(--blue);font-weight:700} @media (prefers-reduced-motion:reduce){.subnav{transition:none}} /* Untermenues in der Handy-Navigation */ .mnav__sub{display:grid;gap:0;margin:-.25rem 0 .25rem;padding-left:.9rem;border-left:2px solid var(--line)} .mnav__sub a{ font-family:"Unica",sans-serif;font-size:1rem;font-weight:400;color:var(--muted); padding:.6rem 0;border-bottom:1px solid var(--line-soft); } .mnav__sub a::after{content:"→";color:var(--sky)} .mnav__sub a:hover{color:var(--blue)} /* Kennzeichnung für KI-erzeugte Bilder. Pflicht, solange keine echten Aufnahmen da sind: die Fotos sehen aus wie Dokumentaraufnahmen. */ .ki-tag{ display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem; padding:.2rem .55rem;border-radius:999px; background:var(--mist-2);border:1px solid var(--line); font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);white-space:nowrap; } .ki-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none} .illu figcaption{display:flex;flex-direction:column;align-items:flex-start}