.elementor-kit-6{--e-global-color-primary:#5A2572;--e-global-color-secondary:#515154;--e-global-color-text:#1D1D1F;--e-global-color-accent:#009BDC;--e-global-color-cviolet:#784787;--e-global-color-cplane:#F5F5F7;--e-global-color-cline:#D8D8DC;--e-global-color-cwhite:#FFFFFF;--e-global-typography-primary-font-family:"Inter Tight";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Inter Tight";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-letter-spacing:-0.015em;--e-global-typography-text-font-family:"Inter Tight";--e-global-typography-text-font-size:14px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:130%;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Inter Tight";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-line-height:130%;--e-global-typography-accent-letter-spacing:0px;background-color:#FFFFFF;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#5A2572;}.elementor-kit-6 a:hover{color:#462672;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1260px;}.e-con{--container-max-width:1260px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS */:root{--ink:#1d1d1f;--ink2:#515154;--plane:#f5f5f7;--line:#d8d8dc;--accent:#0a7ab8;--accent-b:#2693cc;--violet:#551285;} body{-webkit-font-smoothing:antialiased} a{transition:color .15s ease} a:focus-visible,button:focus-visible,.elementor-button:focus-visible{outline:3px solid var(--accent-b);outline-offset:3px;border-radius:8px} .hd-glass{background:rgba(255,255,255,.78)!important;backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)} .hover-lift{transition:transform .25s ease,box-shadow .25s ease} .hover-lift:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(0,0,0,.10)} .img-zoom img{transition:transform .5s ease} .img-zoom:hover img{transform:scale(1.05)} .btn-lift .elementor-button{transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .btn-lift .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,122,184,.28)} .glass-chip{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.8) blur(16px);-webkit-backdrop-filter:saturate(1.8) blur(16px);border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.18)} .hairline-item{border-bottom:1px solid var(--line)} @media (prefers-reduced-motion:reduce){.hover-lift,.img-zoom img,.btn-lift .elementor-button{transition:none}} /* ===== dk: Header ===== */ .dk-header{position:sticky;top:0;z-index:99} .dk-header .elementor-widget-image img{height:44px;width:auto} .dk-header .elementor-nav-menu--main .elementor-item{font-size:14px;font-weight:500;color:var(--ink)} .dk-header .elementor-nav-menu--main .elementor-item:hover, .dk-header .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var(--accent)} .dk-header .elementor-button{background:var(--accent);color:#fff;border-radius:999px;padding:9px 20px;font-size:14px;font-weight:600} .dk-header nav ul.sub-menu{border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.06);overflow:hidden} /* ===== dk: Typo-Muster ===== */ .dk-kicker h2,.dk-kicker h3,.dk-kicker p{font-size:15px!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0} .dk-h2 h2{font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-.025em;font-weight:700;text-wrap:balance;color:var(--ink)} .dk-lead p{font-size:19px;color:var(--ink2)} /* ===== dk: Hero ===== */ .dk-hero{min-height:100svh} .dk-hero .dk-hero-eyebrow p{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9fd4ef;margin:0} .dk-hero h1{font-size:clamp(56px,11vw,124px);line-height:.98;letter-spacing:-.03em;font-weight:700;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25);text-wrap:balance} .dk-hero h1 .grad{background:linear-gradient(96deg,#9fd4ef 5%,#7cc4e8 55%,#c9a8e8 105%);-webkit-background-clip:text;background-clip:text;color:transparent} .dk-hero .dk-hero-sub p{font-size:clamp(20px,2.8vw,28px);color:#eef3f7;text-shadow:0 1px 12px rgba(0,0,0,.3);margin:0} .dk-btn-primary .elementor-button{background:var(--accent);color:#fff;border-radius:999px;padding:16px 34px;font-size:17px;font-weight:600} .dk-btn-glass .elementor-button{color:#fff;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:15px 33px;font-size:17px;font-weight:600} .dk-btn-glass .elementor-button:hover{background:rgba(255,255,255,.26);color:#fff} .dk-hero-chip{position:absolute;left:28px;bottom:28px;z-index:2} .dk-hero-chip p{margin:0;font-size:14px;font-weight:500;color:var(--ink);padding:10px 22px} .dk-hero-chip b{color:var(--accent)} /* ===== dk: Zahlen ===== */ .dk-stats .elementor-counter-number-wrapper{color:var(--accent);font-size:clamp(64px,7.5vw,92px);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums} .dk-stats .elementor-counter-title{color:var(--ink2);font-size:16px;margin-top:16px;line-height:1.4} /* ===== dk: Keynote ===== */ .dk-keynote p.kn{max-width:940px;margin:0 auto;text-align:center;font-size:clamp(30px,5.4vw,56px);line-height:1.16;letter-spacing:-.022em;font-weight:700;text-wrap:balance} .dk-keynote .w{color:#d5d5da;transition:color .35s linear} .dk-keynote .w.lit{color:var(--ink)} .dk-keynote .w.hi.lit{color:var(--accent)} /* ===== dk: Leitbild / Prinzipien ===== */ .dk-dot{width:44px;height:44px;border-radius:14px;background:#e3f1f9;color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none} .dk-principle h3{margin:4px 0 5px;font-size:18px;letter-spacing:-.01em;color:var(--ink)} .dk-principle p{margin:0;font-size:15.5px;color:var(--ink2)} .dk-photo{border-radius:26px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.10)} .dk-photo img{border-radius:26px;width:100%} /* ===== dk: Karten ===== */ .dk-card{background:#fff;border-radius:26px;overflow:hidden} .dk-card .elementor-widget-image img{height:210px;width:100%;object-fit:cover} .dk-card h3{font-size:23px;letter-spacing:-.015em;margin:0 0 10px;color:var(--ink)} .dk-card .dk-card-text p{font-size:15.5px;color:var(--ink2);margin:0} .dk-more a{font-weight:600;font-size:15.5px;color:var(--accent)} /* ===== dk: Standorte ===== */ .dk-st{border-bottom:1px solid var(--line);padding:26px 4px} .dk-st h3{margin:0 0 5px;font-size:17px;color:var(--ink)} .dk-st p{margin:0;font-size:14.5px;color:var(--ink2)} .dk-st a{font-size:14.5px;font-weight:600;color:var(--accent);display:inline-block;margin-top:8px} /* ===== dk: Karriere (Ink-Band) ===== */ .dk-ink .dk-kicker p{color:#7cc4e8} .dk-ink .dk-h2 h2{color:#fff} .dk-ink .dk-lead p{color:#c9c9ce} .dk-benefits ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:0;padding:0;list-style:none} .dk-benefits li{font-size:15.5px;color:#e4e4e8;padding-left:28px;position:relative} .dk-benefits li::before{content:"✓";position:absolute;left:0;color:#7cc4e8;font-weight:700} .dk-btn-white .elementor-button{background:#fff;color:var(--ink);border-radius:999px;padding:16px 34px;font-size:17px;font-weight:600} .dk-btn-white .elementor-button:hover{background:#e8e8ec;color:var(--ink)} /* ===== dk: Kontakt ===== */ .dk-tel a{font-size:clamp(34px,5.4vw,54px);font-weight:700;letter-spacing:-.02em;color:var(--accent)} .dk-kontakt p.meta{color:var(--ink2);font-size:18px;margin:0} /* ===== dk: Footer ===== */ .dk-footer{font-size:14px;color:var(--ink2)} .dk-footer h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;font-weight:600} .dk-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .dk-footer a{color:var(--ink2)} .dk-footer a:hover{color:var(--accent)} .dk-footer p{margin:0;line-height:1.7} .dk-legal{border-top:1px solid var(--line);padding-top:26px;font-size:13px} /* ===== Responsive-Feinheiten ===== */ @media (max-width:900px){ .dk-hero h1{font-size:clamp(44px,12vw,72px)} .dk-benefits ul{grid-template-columns:1fr} } /* ===== dk: Hero-Scrim & Layout ===== */ .dk-hero{position:relative} .dk-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,20,28,.42) 0%,rgba(10,20,28,.22) 45%,rgba(10,20,28,.55) 100%)} .dk-hero>.e-con-inner>*,.dk-hero>*{position:relative;z-index:1} /* ===== dk: Prinzipien-Zeilen ===== */ .dk-prow{display:flex;gap:18px;align-items:flex-start;margin:0 0 28px} .dk-prow:last-child{margin-bottom:0} /* ===== dk: Standort-Grid ===== */ .dk-stgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;max-width:1120px;margin:0 auto} @media (max-width:760px){.dk-stgrid{grid-template-columns:1fr}} /* ===== dk: Unterseiten ===== */ .dk-subhero h1{font-size:clamp(40px,6.5vw,64px);line-height:1.03;letter-spacing:-.028em;font-weight:700;color:var(--ink);text-wrap:balance} .dk-checks ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .dk-checks li{font-size:16px;color:var(--ink);padding-left:30px;position:relative} .dk-checks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700} .dk-h3 h3{font-size:23px;letter-spacing:-.015em;color:var(--ink);margin:0} .dk-prose p{font-size:16.5px;color:var(--ink2);line-height:1.65} .dk-prose h3{font-size:22px;letter-spacing:-.015em;margin:1.6em 0 .5em;color:var(--ink)} .dk-prose h4{font-size:18px;letter-spacing:-.01em;margin:1.5em 0 .4em;color:var(--ink)} .dk-prose ul{color:var(--ink2)} .dk-info{background:var(--plane);border-radius:20px;padding:30px 32px} .dk-info h3{margin:0 0 14px;font-size:17px;color:var(--ink)} .dk-info p{margin:0 0 10px;font-size:15px;color:var(--ink2);line-height:1.6} .dk-info a{font-weight:600} .dk-info .lbl{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:16px} .dk-person{background:#fff;border-radius:20px;padding:26px 28px;border:1px solid var(--line)} .dk-person h3{margin:0 0 2px;font-size:17px;color:var(--ink)} .dk-person p{margin:0;font-size:14px;color:var(--ink2)} .dk-person a{font-size:14px;font-weight:600} .dk-table table{width:100%;border-collapse:collapse;font-size:14.5px} .dk-table th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding:10px 12px;border-bottom:1px solid var(--line)} .dk-table td{padding:12px;border-bottom:1px solid var(--plane);color:var(--ink)} .dk-table .tag{display:inline-block;background:var(--plane);border-radius:999px;padding:2px 12px;font-size:12.5px;color:var(--ink2)} .dk-ext{font-size:13px;color:var(--ink2)} /* ===== dk: Hero-Chip (News) unten links im Bild ===== */ .dk-hero .dk-hero-chip{position:absolute!important;left:28px;bottom:28px;top:auto;z-index:2; width:auto!important;max-width:calc(100% - 56px)} .dk-hero .dk-hero-chip p{white-space:nowrap} @media (max-width:760px){ .dk-hero .dk-hero-chip{left:20px;bottom:20px} .dk-hero .dk-hero-chip p{white-space:normal;font-size:13px;padding:8px 18px} } /* ===== dk: Apple-Polish v2 — Flaechen statt Linien ===== */ :root{--srf-shadow:0 10px 30px rgba(0,0,0,.06);--srf-shadow-lg:0 18px 44px rgba(0,0,0,.09)} /* Standort-/Info-Kacheln: Karten statt Hairlines */ .dk-st{background:#fff;border-bottom:none;border-radius:20px;padding:24px 28px;box-shadow:var(--srf-shadow)} .dk-stgrid{gap:16px} /* Personen-Karten: Schatten statt Rand, mit Portraet */ .dk-person{border:none;box-shadow:var(--srf-shadow);display:flex;align-items:center;gap:16px} .dk-person img{width:64px;height:64px;object-fit:cover;border-radius:16px;flex:none} .dk-person>div{min-width:0} /* Info-Karten: leichte Erhebung */ .dk-info{box-shadow:var(--srf-shadow)} /* Check-Listen als weiche Panels */ .dk-checks ul{background:#fff;border-radius:20px;padding:26px 30px;box-shadow:var(--srf-shadow)} /* Tabellen in Karten */ .dk-table{background:#fff;border-radius:20px;padding:16px 22px;box-shadow:var(--srf-shadow);overflow-x:auto} .dk-table td{border-bottom-color:#f0f0f2} .dk-table tr:last-child td{border-bottom:none} /* Links sofort erkennbar: Mail/Tel/Kontakt-Links als Chips */ .dk-info a,.dk-person a,.dk-st a,.dk-checks a, .dk-prose a[href^="mailto:"],.dk-prose a[href^="tel:"], .dk-card .dk-more a,.dk-more a{ display:inline-block;background:#eef6fb;color:var(--accent);font-weight:600; border-radius:999px;padding:4px 14px;line-height:1.5;max-width:100%; overflow:hidden;text-overflow:ellipsis;vertical-align:bottom; transition:background .15s ease} .dk-info a:hover,.dk-person a:hover,.dk-st a:hover,.dk-checks a:hover, .dk-prose a[href^="mailto:"]:hover,.dk-prose a[href^="tel:"]:hover,.dk-more a:hover{background:#dcedf8} /* Grosse Telefonnummer im CTA bleibt frei, aber klar interaktiv */ .dk-tel a{background:none;padding:0;border-radius:0} .dk-kontakt .dk-more a{background:#eef6fb} /* Prose: normale Textlinks farbig + unterstrichen (erkennbar ohne Hover) */ .dk-prose a:not([href^="mailto:"]):not([href^="tel:"]){color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:#b9d9ec;text-underline-offset:3px} /* Footer-Rechtsliste bleibt ruhig, aber erkennbar */ .dk-footer a{text-underline-offset:3px} .dk-footer ul a:hover{text-decoration:underline;text-decoration-color:#b9d9ec} /* Bildband "Einblicke" */ .dk-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .dk-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:20px;box-shadow:var(--srf-shadow);display:block} @media (max-width:760px){.dk-person img{width:56px;height:56px}} /* ===== dk: Kontakt-Kacheln (Startseite) ===== */ .dk-ctgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:980px;margin:0 auto;text-align:left} .dk-ct{background:var(--plane);border-radius:20px;padding:30px 32px;box-shadow:var(--srf-shadow)} .dk-ct .lbl{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:14px;font-weight:600} .dk-ct a.val{display:inline-block;background:#eef6fb;color:var(--accent);font-weight:700;font-size:18px;border-radius:999px;padding:8px 20px;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis} .dk-ct a.val:hover{background:#dcedf8} .dk-ct p{margin:14px 0 0;font-size:14.5px;color:var(--ink2);line-height:1.55} .dk-ct p.big{font-size:18px;font-weight:700;color:var(--ink);margin:0;line-height:1.4;letter-spacing:-.01em;padding:8px 0} /* ===== dk: Text-Feinschliff (Nicht-Ueberschriften) ===== */ .dk-stats .elementor-counter{text-align:center} .dk-stats .elementor-counter-number-wrapper{justify-content:center} .dk-stats .elementor-counter-title{margin-top:12px;line-height:1.4;text-align:center;max-width:13em;margin-left:auto;margin-right:auto} .dk-card .dk-card-text p,.dk-st p,.dk-info p,.dk-person p,.dk-ct p{line-height:1.5} .dk-hero-sub p{line-height:1.4} /* ===== dk: Spaltenbreiten (deterministisch, statt Elementor-width) ===== */ [class*="dk-w"]{width:auto!important;min-width:0} .e-con:has(> [class*="dk-w"]),.e-con-inner:has(> [class*="dk-w"]){flex-wrap:wrap} .dk-w25{flex:1 1 21%} .dk-w33{flex:1 1 29%} .dk-w38{flex:0 1 38%} .dk-w40{flex:0 1 40%} .dk-w42{flex:0 1 42%} .dk-w45{flex:0 1 45%} .dk-w50{flex:1 1 47%} .dk-w55{flex:1 1 52%} .dk-w58{flex:1 1 55%} .dk-w62{flex:1 1 58%} @media (max-width:900px){ [class*="dk-w"]{flex:1 1 100%!important} .dk-w25,.dk-w33{flex:1 1 46%!important} } @media (max-width:600px){ .dk-w25,.dk-w33{flex:1 1 100%!important} } /* ===== dk: Galerie-Karten mit Beschriftung ===== */ .dk-gallery .dk-gal{position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:var(--srf-shadow)} .dk-gal img{border-radius:0;box-shadow:none;transition:transform .5s ease} .dk-gal:hover img{transform:scale(1.04)} .dk-gal .cap{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px); background:rgba(255,255,255,.78);backdrop-filter:saturate(1.8) blur(12px);-webkit-backdrop-filter:saturate(1.8) blur(12px); border-radius:999px;padding:6px 16px;font-size:13.5px;font-weight:600;color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dk-gal:focus-visible{outline:3px solid var(--accent-b);outline-offset:3px} @media (prefers-reduced-motion:reduce){.dk-gal img{transition:none}.dk-gal:hover img{transform:none}} /* ===== dk: Zahlenband zentriert + mehr Luft ===== */ .dk-stats .e-con:has(> .dk-w25),.dk-stats .e-con-inner:has(> .dk-w25){justify-content:center;gap:56px 96px} .dk-stats .dk-w25{flex:0 1 auto;min-width:170px} @media (max-width:1100px){.dk-stats .e-con:has(> .dk-w25),.dk-stats .e-con-inner:has(> .dk-w25){gap:48px 64px}} @media (max-width:900px){.dk-stats .dk-w25{flex:0 1 40%!important}} @media (max-width:600px){.dk-stats .dk-w25{flex:0 1 100%!important}} /* ===== dk: Mobile-Fixes Header + Zahlenband ===== */ /* Header: eine Zeile, nie umbrechen — Widgets nur so breit wie ihr Inhalt */ .dk-header .e-con,.dk-header .e-con-inner{flex-wrap:nowrap} .dk-header .e-con>.elementor-widget,.dk-header .e-con-inner>.elementor-widget{width:auto;flex:0 0 auto} .dk-header .elementor-widget-nav-menu{flex:1 1 auto;min-width:0} @media (max-width:760px){ .dk-header .elementor-widget-image img{height:34px} .dk-header .elementor-button{padding:7px 15px;font-size:13px} .dk-header .e-con-inner{gap:12px} } /* Zahlenband: Zahl UND Subline immer exakt zentriert */ .dk-stats .dk-w25{display:flex;flex-direction:column;align-items:center} .dk-stats .elementor-widget-counter{width:100%;text-align:center} .dk-stats .elementor-counter-number-wrapper{display:flex;justify-content:center} .dk-stats .elementor-counter-title{display:block;text-align:center;margin-left:auto;margin-right:auto} @media (max-width:600px){ .dk-stats .e-con:has(> .dk-w25),.dk-stats .e-con-inner:has(> .dk-w25){gap:40px} } /* ===== dk: primefolio-Layer BEGIN ===== */ /* Referenz: primefolio.webflow.io — Typo-Skala, Farbtokens, Komponenten. Dieser Block steht bewusst am Ende und ueberschreibt aeltere Regeln. */ :root{ --h-blue:#0A7AB8; /* Headline-Farbe 1: Diakonie-Blau */ --h-gray:#8E9096; /* Headline-Farbe 2: freundliches Grau */ --violet:#551285; /* Violett der „35" im Jubilaeumslogo (Button-Hover) */ --ink:#101114; --ink2:#6E6E73; --ink3:#9B9BA1; --plane:#F2F2F4; --line:#E3E3E7; --r-s:12px; --r-m:16px; --r-l:20px; --r-xl:28px; /* Typo-Skala 1:1 aus dem Style-Guide der Vorlage (primefolio.webflow.io/template-pages/style-guide): H1 82/100%/-3% · H2 64/100%/-2% · H3 42/110%/-2% · H4 32/110%/-1% H5 24/120%/-1% · H6 20/120%/0 Subtitle Large 16/130% · Subtitle Small 14/130% · Caption 14/130% Die Grossbildwerte stehen oben, clamp() faengt schmale Schirme ab. */ --fs-5xl:clamp(40px,7.6vw,82px); /* Header 1 */ --fs-4xl:clamp(34px,5.8vw,64px); /* Header 2 */ --fs-3xl:clamp(27px,3.6vw,42px); /* Header 3 */ --fs-2xl:clamp(24px,2.6vw,32px); /* Header 4 */ --fs-xl:24px; /* Header 5 */ --fs-l:20px; /* Header 6 */ --fs-sub:16px; /* Subtitle Large — Sublines */ --fs-btn:14px; /* Subtitle Small — Buttons */ --fs-cap:14px; /* Caption — Fliesstext */ --lh-s:1; --lh-m:1.1; --lh-l:1.2; --lh-xl:1.3; --ls-2xl:-.03em; --ls-xl:-.02em; --ls-l:-.02em; --ls-s:-.01em; --ls-xs:-.01em; --ls-none:0; --ease:cubic-bezier(.22,.61,.24,1); /* symmetrische Kurve: hin und zurueck fuehlen sich gleich an */ --ease-sym:cubic-bezier(.4,0,.2,1); /* Flaechen, die im Dunkelmodus getauscht werden */ --seite:#FFFFFF; /* Seitengrund */ --karte:#FFFFFF; /* Karten, Tabellen, Listen-Panels */ --tief:#101114; /* dunkle Flaechen (Themenkarte, Hover-Fenster, Up-Knopf) */ --chip:#EEF6FB; /* hellblaue Chips fuer Telefon und E-Mail */ --chip-hover:#DCEDF8; /* Buttonfarbe steht fuer sich: --accent wird im Dunkelmodus aufgehellt (sonst waeren Textlinks dort zu dunkel), die Buttonflaeche muss aber Diakonie-Blau bleiben — weisse Schrift darauf haelt 4,7 : 1, auf dem hellen Blau waeren es nur 2,2 : 1. */ --btn-bg:#0A7AB8; /* Schriftfarbe auf den hellblauen Chips. Das reine Diakonie-Blau haelt dort nur 4,28 : 1 — knapp unter AA. Um 9 % abgedunkelt sind es 5,00 : 1 auf dem Chip, 4,56 : 1 auf dem Hover-Chip und 4,89 : 1 auf der Flaeche. */ --chip-ink:#096FA7; /* Violett als Schrift-/Rahmenfarbe. Auf dunklem Grund haelt #551285 nur 1,5 : 1 — dort steht eine zu 50 % nach Weiss gemischte Fassung. */ --violet-ink:#551285; --menu-shadow:0 18px 48px rgba(0,0,0,.14); } /* ---------- Dunkelmodus ---------- Die Umschaltung setzt data-theme auf ; der Grundzustand kommt aus der Systemeinstellung (siehe Skript in der Kopfzeile). Getauscht werden nur Token — die Bauteile darunter bleiben unveraendert. Alle Paare sind gegen WCAG AA gerechnet (gemessen, nicht geschaetzt): Fliesstext #B9BEC6 auf #0E0F11 = 10,3 : 1 auf Karte #1B1E22 = 9,0 : 1 Gedaempft #9096A0 auf #0E0F11 = 6,4 : 1 auf Flaeche = 5,9 : 1 Ueberschr. #F2F4F6 auf #0E0F11 = 17,4 : 1 Link/Akzent #6FC1EA auf #0E0F11 = 9,6 : 1 auf Karte = 8,4 : 1 Buttonschrift weiss auf #0A7AB8 = 4,7 : 1 Hover violett/weiss = 11,6 : 1 Das Diakonie-Blau bleibt deshalb die Buttonfarbe; fuer Text auf dunklem Grund waere es zu dunkel — dort steht die hellere Variante --h-blue. */ html{color-scheme:light} html[data-theme="dark"]{ color-scheme:dark; --seite:#0E0F11; --plane:#17191C; --karte:#1B1E22; --tief:#07080A; --ink:#F2F4F6; --ink2:#B9BEC6; --ink3:#9096A0; --line:#31353C; --h-blue:#6FC1EA; --h-gray:#A2A8B2; --chip:rgba(111,193,234,.14); --chip-hover:rgba(111,193,234,.26); --srf-shadow:0 12px 34px rgba(0,0,0,.5); --menu-shadow:0 18px 48px rgba(0,0,0,.6); /* Der Akzent wird zur Textfarbe aufgehellt; die Buttonflaeche haengt an --btn-bg und bleibt davon unberuehrt. */ --accent:#6FC1EA; --accent-b:#8ED0F0; --chip-ink:#6FC1EA; --violet-ink:#AA88C2; /* Elementors eigene Globalfarben mitziehen: .elementor-widget-text-editor, die Counter-Titel und die Bildunterschriften holen ihre Farbe von dort, und diese Regeln stehen in den Seiten-CSS, die NACH dem Kit geladen werden. Ohne diesen Tausch blieben sie #1D1D1F — fast schwarz auf fast schwarz. */ --e-global-color-text:#B9BEC6; --e-global-color-secondary:#A2A8B2; --e-global-color-primary:#6FC1EA; --e-global-color-accent:#6FC1EA; --e-global-color-cline:#31353C; --e-global-color-cplane:#17191C; --e-global-color-cwhite:#1B1E22; } /* Eine Schrift fuer alles */ body,.elementor-widget-text-editor,.elementor-widget-button, h1,h2,h3,h4,h5,h6,.elementor-heading-title,button,input,select,textarea, .dk-tel a,.dk-ct p.big,.dk-stats .elementor-counter-number-wrapper{font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif} /* Fliesstext = Caption */ body{font-size:var(--fs-cap);line-height:var(--lh-xl);color:var(--ink2);letter-spacing:var(--ls-none)} /* ---------- Keine Versalien ---------- Gilt fuer Kategorien, Eyebrows, Menue-Dropdowns, Tabellenkoepfe und Labels. */ .dk-kicker p,.dk-kicker h2,.dk-kicker h3,.dk-seccat,.dk-hero .dk-hero-eyebrow p, .dk-footer h4,.dk-info .lbl,.dk-ct .lbl,.dk-table th,.dk-ecard .bereich, .elementor-nav-menu a,.elementor-nav-menu--dropdown a,.elementor-item, .elementor-button,.dk-endband .btn{text-transform:none!important} /* Kleine Labels: dieselbe Stufe wie Buttons, ohne Sperrung. (Die aelteren CSS-Bloecke im Kit setzen hier noch 12 px und .1em Laufweite — dieser Layer steht dahinter und zieht sie gerade.) */ .dk-info .lbl,.dk-ct .lbl,.dk-st .lbl{ font-size:var(--fs-btn);line-height:var(--lh-xl);letter-spacing:var(--ls-none);font-weight:600} /* ---------- Zweifarbige Headlines: 1 Diakonie-Blau, 2 freundliches Grau ---------- */ .elementor-heading-title .c1{color:var(--h-blue)} .elementor-heading-title .c2{color:var(--h-gray)} .dk-ink .elementor-heading-title .c1{color:#7CC4E8} .dk-ink .elementor-heading-title .c2{color:#9A9AA2} /* ---------- Typo-Skala nach Style-Guide ---------- Ueberschriften nach Ebene: h1 = Header 1 … h6 = Header 6. Ausnahme mit Absicht: Ueberschriften *innerhalb* von Fliesstext und in Karten sind Gliederung, keine Abschnittstitel — sie nehmen die kleinen Stufen des Guides (Header 5 / Header 6). Header 3 mit 42 px wuerde neben 14-px-Fliesstext jede Rechtsseite erschlagen. */ h1,.dk-hero h1,.dk-subhero h1,.dk-h1 .elementor-heading-title{ font-size:var(--fs-5xl);line-height:var(--lh-s);letter-spacing:var(--ls-2xl); font-weight:600;text-wrap:balance} h2,.dk-h2 h2,.dk-h2 .elementor-heading-title,.dk-sechead h2{ font-size:var(--fs-4xl);line-height:var(--lh-s);letter-spacing:var(--ls-xl); font-weight:600;text-wrap:balance} h3,.dk-h3 h3,.dk-h3 .elementor-heading-title{ font-size:var(--fs-3xl);line-height:var(--lh-m);letter-spacing:var(--ls-l); font-weight:600;color:var(--ink)} h4,.dk-h4 h4,.dk-h4 .elementor-heading-title{ font-size:var(--fs-2xl);line-height:var(--lh-m);letter-spacing:var(--ls-s); font-weight:600;color:var(--ink)} h5{font-size:var(--fs-xl);line-height:var(--lh-l);letter-spacing:var(--ls-xs);font-weight:600;color:var(--ink)} h6{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-none);font-weight:600;color:var(--ink)} /* Sublines = Subtitle Large */ .dk-lead p,.dk-secsub,.dk-hero .dk-hero-sub p{ font-size:var(--fs-sub);line-height:var(--lh-xl);letter-spacing:var(--ls-none); font-weight:400;color:var(--ink2)} .dk-lead p{max-width:527px} /* Fliesstext = Caption */ .dk-prose p,.dk-prose li,.dk-card-text p,.dk-checks li,.dk-acc .ans,.dk-acc .ans p, .elementor-widget-text-editor p,.elementor-widget-text-editor li{ font-size:var(--fs-cap);line-height:var(--lh-xl);letter-spacing:var(--ls-none);color:var(--ink2)} /* Buttons = Subtitle Small */ .dk-more a{font-size:var(--fs-btn);line-height:var(--lh-xl);letter-spacing:var(--ls-none);font-weight:600} /* Gliederung in Fliesstext und Karten: kleine Stufen des Guides */ .dk-prose h3,.dk-card h3,.dk-acc summary,.dk-awname,.dk-proccard .t{ font-size:var(--fs-xl);line-height:var(--lh-l);letter-spacing:var(--ls-xs);font-weight:600;color:var(--ink)} .dk-prose h4,.dk-st h3,.dk-ecard .name,.dk-awpop .n,.dk-herobox .t,.dk-teamname, .dk-info h3,.dk-person h3{ font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-none);font-weight:600;color:var(--ink)} .dk-footer h4{font-size:var(--fs-sub);line-height:var(--lh-xl);letter-spacing:var(--ls-none)} /* ---------- Zwischenueberschrift ---------- Aufbau und Aussenabstaende wie „Our Process" auf primefolio /about: Kategorie-Zeile (drehender Stern + Text) — 16 px — Header 2 — 24 px — Subline; der ganze Block 50 px vor dem Inhalt. Ueberall derselbe Wert. Zentriert; nur in Abschnitten mit Bild linksbuendig (.links). */ .dk-sechead{width:100%;max-width:760px;margin:0 auto 50px;text-align:center} .dk-sechead.links{margin-left:0;margin-right:auto;text-align:left} .dk-sechead h2{margin:0;color:var(--ink)} .dk-sechead h2 .c1{color:var(--h-blue)} .dk-sechead h2 .c2{color:var(--h-gray)} .dk-ink .dk-sechead h2 .c1{color:#7CC4E8} .dk-ink .dk-sechead h2 .c2{color:#9A9AA2} .dk-seccat{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px; font-size:var(--fs-sub);line-height:var(--lh-xl);letter-spacing:var(--ls-none); font-weight:600;color:var(--h-blue)} .dk-secsub{max-width:527px;margin:24px auto 0} .dk-sechead.links .dk-secsub{margin-left:0} .dk-ink .dk-sechead h2{color:#fff} .dk-ink .dk-seccat{color:#8FD0F0} .dk-ink .dk-secsub{color:#C1C1C6} @media (max-width:760px){.dk-sechead{margin-bottom:36px}} /* Stern vor der Kategorie — dreht sich dauerhaft (Vorlage: primefolio) */ @keyframes dkSpin{to{transform:rotate(360deg)}} .dk-star{flex:none;width:13px;height:13px;display:block;overflow:visible; stroke:var(--h-blue);stroke-width:1.5;fill:none; transform-origin:50% 50%;animation:dkSpin 9s linear infinite} .dk-ink .dk-star{stroke:#8FD0F0} @media (prefers-reduced-motion:reduce){.dk-star{animation:none}} /* ---------- Buttons am Ende des Leseflusses, rechts ---------- */ .dk-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center; gap:14px;width:100%;align-self:stretch;margin-top:50px} .dk-flow .dk-actions{max-width:820px;margin-left:auto;margin-right:auto} .dk-actions>.elementor-widget{width:auto;flex:0 0 auto;margin:0} /* Buttons behalten ihre Eigenbreite — auch mobil. Ein gedehnter Button schoebe den Punkt (::before, im Textfluss) nach rechts, waehrend die Kreisflaeche (::after) bei left:12px stehen bleibt: man saehe zwei Punkte. */ @media (max-width:600px){.dk-actions{justify-content:flex-end}} /* ---------- Hero (Referenz primefolio): Text links, CTA darunter, Bild darunter ---------- */ .dk-hero{height:auto!important;min-height:0!important;background-image:none!important} .dk-hero::before{content:none} .dk-herotop{align-items:flex-end} .dk-heroleft{max-width:681px;flex:1 1 auto} .dk-heroright{max-width:402px;flex:0 0 auto;width:100%} .dk-hero .dk-hero-eyebrow p{display:inline-flex;align-items:center;gap:6px; font-size:var(--fs-sub);line-height:var(--lh-xl);letter-spacing:var(--ls-none);font-weight:600; color:var(--h-blue);margin:0 0 16px;text-shadow:none;text-align:left} .dk-hero h1{font-size:var(--fs-5xl);line-height:1.0;letter-spacing:-.035em;font-weight:600; text-align:left;text-shadow:none;color:var(--h-blue)} .dk-hero h1 .c1{color:var(--h-blue)} .dk-hero h1 .c2{color:var(--h-gray)} .dk-hero .dk-hero-sub p{max-width:527px;margin:24px 0 0; color:#3D3D42;text-shadow:none;text-align:left} .dk-herobtns{margin-top:40px;flex-wrap:wrap} .dk-herobtns>.elementor-widget{width:auto;flex:0 0 auto;margin:0} .dk-heroleft>.elementor-widget{margin:0} .dk-hero h1{margin:0} .dk-herobox{background:var(--plane);border-radius:var(--r-l);padding:29px 34px} .dk-herobox .t{margin:0;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:17px;font-weight:600;letter-spacing:-.018em; color:var(--ink);line-height:1.3} .dk-herobox .tel{display:inline-block;margin-top:16px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:26px;font-weight:600; letter-spacing:-.03em;color:var(--h-blue);text-decoration:none} .dk-herobox .tel:hover{text-decoration:underline;text-underline-offset:4px} .dk-herobox .s{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)} .dk-herobox .n{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px; line-height:1.5;color:var(--ink2)} .dk-herobox .n b{color:var(--ink);font-weight:600} .dk-heromedia{position:relative;width:100%;height:612px;margin-top:60px;border-radius:var(--r-m);overflow:hidden} .dk-heromedia img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover; display:block;will-change:transform} @media (max-width:1100px){.dk-heromedia{height:500px}} @media (max-width:900px){ .dk-herotop{flex-direction:column;align-items:flex-start} .dk-heroleft,.dk-heroright{max-width:none} .dk-heromedia{height:400px;margin-top:44px} .dk-herobtns{margin-top:32px} } @media (max-width:600px){.dk-heromedia{height:300px}} /* ---------- Counter im Referenz-Stil ---------- */ .dk-stats .elementor-counter-number-wrapper{ font-size:clamp(52px,7vw,82px);font-weight:600;letter-spacing:-.035em;line-height:1; color:var(--ink);font-variant-numeric:tabular-nums} .dk-stats .elementor-counter-number-suffix,.dk-stats .elementor-counter-number-prefix{color:var(--h-blue)} .dk-stats .elementor-counter-title{ font-size:14px;font-weight:500;line-height:1.45;color:var(--ink2);margin-top:18px;letter-spacing:-.005em} .dk-stats .dk-w25{position:relative;padding:6px 0} .dk-stats .dk-w25+.dk-w25::before{content:"";position:absolute;left:-48px;top:6px;bottom:6px;width:1px;background:var(--line)} @media (max-width:900px){.dk-stats .dk-w25+.dk-w25::before{display:none}} /* ---------- Themenkarten, die sich beim Scrollen entfalten ---------- Muster: „Our Process" auf primefolio /about (sticky ueber mehrere Viewport- Hoehen, Karten aus dem Stapel). Bewusst ohne Rotation/Flip — reine Verschiebung ueber die Variable --p (0 = gestapelt, 1 = nebeneinander). */ .dk-proc{position:relative;height:250vh} .dk-procstick{position:sticky;top:0;height:100vh;height:100svh; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:46px} /* eine Stufe groesser (32 -> 42 der Typo-Skala) und zweifarbig wie die Headlines */ .dk-proctitle{max-width:760px;margin:0;text-align:center;text-wrap:balance;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size:var(--fs-3xl);line-height:1.18;letter-spacing:-.028em;font-weight:600;color:var(--h-gray)} .dk-proctitle .c1{color:var(--h-blue)} .dk-proctitle .c2{color:var(--h-gray)} .dk-proccards{display:flex;justify-content:center;align-items:center;gap:24px} .dk-proccard{--k:calc(1 - var(--p,0));position:relative;flex:0 0 300px;width:300px;height:430px; display:flex;flex-direction:column;justify-content:space-between;gap:24px; padding:26px;border-radius:var(--r-m);background:var(--ink);color:#fff;text-decoration:none; transition:box-shadow .3s var(--ease)} .dk-proccard.k1{z-index:1;transform:translateX(calc(var(--k) * (100% + 4px)))} .dk-proccard.k2{z-index:3;background:var(--plane);color:var(--ink)} .dk-proccard.k3{z-index:2;transform:translateX(calc(var(--k) * (-100% - 4px)))} .dk-proccard:hover{box-shadow:0 26px 60px rgba(0,0,0,.22)} .dk-proccard .nr{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px; flex:none;border-radius:50%;background:rgba(255,255,255,.14);font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:14px;font-weight:600} .dk-proccard.k2 .nr{background:rgba(0,0,0,.07)} .dk-proccard .body{display:flex;flex-direction:column;gap:10px} .dk-proccard .t{font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:24px;line-height:1.2;letter-spacing:-.024em;font-weight:600} .dk-proccard .d{font-size:14px;line-height:1.5;color:#C1C1C6} .dk-proccard.k2 .d{color:var(--ink2)} .dk-proccard .go{margin-top:10px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:15px;font-weight:600;color:#8FD0F0} .dk-proccard.k2 .go{color:var(--h-blue)} .dk-proccard .go em{font-style:normal;display:inline-block;transition:transform .25s var(--ease)} .dk-proccard:hover .go em{transform:translateY(3px)} @media (max-width:980px){ .dk-proc{height:auto} .dk-procstick{position:static;height:auto;padding:110px 0 30px;gap:36px} .dk-proccards{flex-direction:column;gap:16px;width:100%} .dk-proccard{transform:none!important;flex:0 0 auto;width:100%;max-width:440px;height:auto;gap:20px} } /* ---------- Sprungmarken ---------- Weiches Scrollen erst nach dem Laden (Klasse setzt das JS). Sonst animiert der Browser den Sprung zu einer Marke schon beim Seitenaufruf — und reisst dabei die ganze Sticky-Strecke der Themenkarten durch. */ .dk-anchor{display:block;height:0;scroll-margin-top:110px} html{scroll-behavior:auto} html.dk-smooth{scroll-behavior:smooth} /* ---------- Einrichtungs-Karten mit Bild und Spezifikation ---------- */ .dk-ecards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%} .dk-ecard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden; text-decoration:none;padding-bottom:26px;box-shadow:0 10px 30px rgba(0,0,0,.06); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .dk-ecard:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.10)} .dk-ecard>span{display:block} .dk-ecard>span:not(.pic){margin-left:26px;margin-right:26px} .dk-ecard .pic{position:relative;aspect-ratio:16/10;overflow:hidden} .dk-ecard .pic img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s var(--ease)} .dk-ecard:hover .pic img{transform:scale(1.06)} .dk-ecard .hint{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px); background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-radius:999px;padding:5px 13px;font-size:11.5px;line-height:1.35;color:var(--ink2)} .dk-ecard .bereich{margin-top:22px;font-size:var(--fs-btn);line-height:var(--lh-xl); font-weight:600;letter-spacing:var(--ls-none);color:var(--h-blue)} .dk-ecard .name{margin-top:8px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:20px;line-height:1.2; letter-spacing:-.02em;font-weight:600;color:var(--ink)} .dk-ecard .spec{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink2)} .dk-ecard .adr{margin-top:16px;font-size:14px;line-height:1.5;color:var(--ink3)} .dk-ecard .tel{margin-top:2px;font-size:14px;line-height:1.5;color:var(--ink3)} .dk-ecard .more{margin-top:18px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:15px;font-weight:600;color:var(--h-blue)} @media (max-width:1000px){.dk-ecards{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.dk-ecards{grid-template-columns:1fr}} /* ---------- Telefonnummern und E-Mail-Adressen: reine Textlinks ---------- Der aeltere CSS-Block macht daraus hellblaue Pillen: inline-block mit Polster, fester Zeilenhoehe und vertical-align:bottom. Eine solche Pille kann mitten im Satz gar nicht sauber auf der Grundlinie sitzen — der Kasten ist mit seinem Polster hoeher als die Zeile, die Schrift darin steht zwangslaeufig versetzt. In den Karten schob dasselbe Polster die Nummer ausserdem gegen die Ueberschrift darueber. Deshalb hier ganz zurueckgebaut: kein Kasten, kein Polster, kein Aussenabstand — dieselbe Auszeichnung wie jeder andere Textlink im Fliesstext (blau, halbfett, feiner Unterstrich). Damit sitzt die Schrift automatisch auf der Grundlinie des umgebenden Textes. „Mehr erfahren" behaelt seine Pille: das ist keine Angabe, sondern die Handlungsaufforderung einer Karte. */ .dk-info a,.dk-person a,.dk-st a,.dk-checks a, .dk-prose a[href^="mailto:"],.dk-prose a[href^="tel:"], .dk-ct a.val{ display:inline;background:none!important;padding:0;margin-left:0; border-radius:0;max-width:none;overflow:visible; vertical-align:baseline;line-height:inherit;font-size:inherit; color:var(--chip-ink);font-weight:600; text-decoration:underline;text-decoration-color:#B9D9EC;text-underline-offset:3px} /* Der Wert in den Kontaktkacheln bleibt die groesste Zeile der Kachel */ .dk-ct a.val{font-size:18px;line-height:1.4} .dk-info a:hover,.dk-person a:hover,.dk-st a:hover,.dk-checks a:hover, .dk-prose a[href^="mailto:"]:hover,.dk-prose a[href^="tel:"]:hover, .dk-ct a.val:hover{text-decoration-color:currentColor} html[data-theme="dark"] .dk-info a,html[data-theme="dark"] .dk-person a, html[data-theme="dark"] .dk-st a,html[data-theme="dark"] .dk-checks a, html[data-theme="dark"] .dk-prose a[href^="mailto:"], html[data-theme="dark"] .dk-prose a[href^="tel:"], html[data-theme="dark"] .dk-ct a.val{text-decoration-color:rgba(111,193,234,.45)} /* „Mehr erfahren" bleibt Pille, nimmt aber denselben geprueften Blauton */ .dk-card .dk-more a,.dk-more a{color:var(--chip-ink);vertical-align:baseline} /* Die frueheren negativen Aussenabstaende, die das Chip-Polster ausglichen, sind mit dem Polster entfallen — ohne Kasten stehen Angabe und Ueberschrift von sich aus buendig. */ /* Fotos, die nur klein vorliegen (NWP.jpg, Notunterkunft.jpg: 227x128), stehen begrenzt im Verlauf statt hochskaliert ueber die volle Breite. */ .dk-photo.klein{max-width:360px;margin-left:auto;margin-right:auto} /* ---------- Formular mittig, ohne Sidebar ---------- */ .dk-formwrap{max-width:760px;margin-left:auto;margin-right:auto;width:100%} /* ---------- Zentrierte Check-Liste ---------- */ .dk-checkmid ul{max-width:720px;margin-left:auto;margin-right:auto;text-align:left} /* ---------- Abschlussband: Text links, Button rechts ---------- */ .dk-endband{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between; border-top:1px solid var(--line);padding-top:48px;width:100%} .dk-endband .txt .h{margin:0;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:clamp(26px,3.4vw,40px);line-height:1.1; letter-spacing:-.03em;font-weight:600} .dk-endband .txt .h .c1{color:var(--h-blue)} .dk-endband .txt .h .c2{color:var(--h-gray)} .dk-endband .txt .s{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--ink2)} .dk-endband .txt .s a{color:var(--h-blue);font-weight:600} .dk-endband .act{margin-left:auto} .dk-endband .btn{display:inline-block;background:var(--accent);color:#fff;border-radius:999px; padding:16px 34px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:17px;font-weight:600;text-decoration:none; transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .dk-endband .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,122,184,.28);color:#fff} @media (max-width:700px){ .dk-endband{flex-direction:column;align-items:flex-start} .dk-endband .act{margin-left:0} } /* ---------- Bilder sanft einblenden ---------- Bewusst als Animation und nicht als Transition: viele Bilder tragen bereits eine transition auf transform (Hover-Zoom); die Kurzschreibweise transition wuerde die ueberschreiben. */ @keyframes dkImgIn{from{opacity:0}to{opacity:1}} .dk-img{opacity:0} .dk-img.dk-imgin{animation:dkImgIn .85s var(--ease) forwards} /* ---------- Seitenwechsel: weiches Erscheinen ---------- Der Aufbau laeuft ohne JS: die Animation steht im Head-Stylesheet und startet mit dem ersten Bildaufbau. Ohne fill-mode bleibt kein dauerhafter Stapelkontext zurueck. Das Ausblenden beim Klick setzt das JS. */ @keyframes dkPageIn{from{opacity:0}} [data-elementor-type="wp-page"]{animation:dkPageIn .5s var(--ease)} html.dk-navout [data-elementor-type="wp-page"]{opacity:0;transition:opacity .24s var(--ease)} /* ---------- Zurueck nach oben (rechts, global) ---------- */ .dk-up{position:fixed;right:24px;bottom:24px;z-index:60;width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;padding:0; background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.22); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s,background .2s var(--ease)} .dk-up.on{opacity:1;visibility:visible;transform:none} .dk-up:hover{background:var(--h-blue)} .dk-up svg{width:20px;height:20px;display:block} @media (max-width:760px){.dk-up{right:16px;bottom:16px;width:44px;height:44px}} @media (prefers-reduced-motion:reduce){ html.dk-smooth{scroll-behavior:auto} .dk-proccard,.dk-ecard,.dk-ecard .pic img,.dk-up{transition:none!important} .dk-proccard{transform:none!important} .dk-img{opacity:1;animation:none} [data-elementor-type="wp-page"]{animation:none} html.dk-navout [data-elementor-type="wp-page"]{opacity:1;transition:none} } /* ---------- Teamansicht (Referenz: primefolio /about) ---------- */ .dk-team{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px;width:100%} .dk-teammember{margin:0;display:flex;flex-direction:column;align-items:flex-start} .dk-teamimg{display:block;width:100%;aspect-ratio:4/5;border-radius:var(--r-s); overflow:hidden;background:var(--plane)} .dk-teamimg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block; transition:transform .4s var(--ease)} .dk-teammember:hover .dk-teamimg img{transform:scale(1.135)} .dk-teammember figcaption{display:flex;flex-direction:column;gap:2px;margin-top:10px;width:100%} .dk-teamlink{display:inline-flex;align-items:center;gap:8px;margin-top:8px;max-width:100%; font-size:14px;line-height:1.3;color:var(--ink2);text-decoration:none; background:none;padding:0;border-radius:0;transition:color .2s var(--ease)} .dk-teamlink:first-of-type{margin-top:10px} .dk-teamlink svg{flex:none;width:16px;height:16px;color:var(--h-blue)} .dk-teamlink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-teamlink:hover{color:var(--h-blue);background:none;text-decoration:underline;text-underline-offset:3px} .dk-teamname{font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:16px;line-height:1.3;font-weight:600;color:var(--ink)} .dk-teamrole{font-size:14px;line-height:1.3;letter-spacing:-.03em;color:var(--ink2)} @media (max-width:1100px){.dk-team{grid-template-columns:repeat(3,1fr);gap:30px 16px}} @media (max-width:760px){.dk-team{grid-template-columns:repeat(2,1fr)}} @media (max-width:420px){.dk-team{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.dk-teamimg img{transition:none} .dk-teammember:hover .dk-teamimg img{transform:none}} /* ---------- Akkordeon im Referenz-Stil ---------- */ .dk-acc{display:grid;gap:12px;max-width:860px;margin-left:auto;margin-right:auto;width:100%} .dk-acc.wide{max-width:none} .dk-acc details{background:var(--plane);border-radius:var(--r-m);padding:20px 20px 20px 22px; transition:background .25s var(--ease)} .dk-acc details[open]{background:#EDEDF0} .dk-acc summary{display:flex;align-items:center;justify-content:space-between;gap:24px; cursor:pointer;list-style:none;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:18px;font-weight:600; letter-spacing:-.018em;color:var(--ink)} .dk-acc summary::-webkit-details-marker{display:none} .dk-acc summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%; background: linear-gradient(var(--ink),var(--ink)) center/12px 1.7px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1.7px 12px no-repeat; transition:transform .3s var(--ease)} .dk-acc details[open] summary::after{ background:linear-gradient(var(--ink),var(--ink)) center/12px 1.7px no-repeat; transform:rotate(180deg)} .dk-acc summary:focus-visible{outline:3px solid var(--accent-b);outline-offset:4px;border-radius:8px} .dk-acc .ans{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:62ch} .dk-acc .ans p{margin:0 0 10px;font-size:16.5px;line-height:1.6;color:var(--ink2)} .dk-acc .ans p:last-child{margin-bottom:0} .dk-acc .ans ul{margin:0;padding:0;list-style:none;display:grid;gap:10px} .dk-acc .ans li{position:relative;padding-left:28px} .dk-acc .ans li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px; border-radius:50%;background:var(--h-blue);opacity:.55} .dk-acc .ans a{color:var(--accent);font-weight:600} /* Auf- und Zuklappen uebernimmt das Motion-Skript (Hoehe animiert). Ohne Skript bleibt das Akkordeon voll bedienbar, nur eben ohne Bewegung. */ .dk-acc .ans{will-change:height} /* ---------- Bild-Kollage aller Einrichtungen ---------- */ .dk-collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:168px;gap:16px;width:100%} .dk-collage .dk-gal{position:relative;display:block;border-radius:var(--r-l);overflow:hidden} .dk-collage .dk-gal img{width:100%;height:100%;object-fit:cover;display:block} .dk-ca{grid-column:span 3;grid-row:span 2} .dk-cb,.dk-ch,.dk-ci{grid-column:span 3} .dk-cc,.dk-ce,.dk-cf,.dk-cg{grid-column:span 2} .dk-cd{grid-column:span 1} @media (max-width:900px){ .dk-collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px} .dk-collage>.dk-gal{grid-column:span 1;grid-row:span 1} .dk-collage>.dk-ca{grid-column:span 2;grid-row:span 2} } @media (max-width:520px){ .dk-collage{grid-template-columns:1fr;grid-auto-rows:210px} .dk-collage>.dk-gal,.dk-collage>.dk-ca{grid-column:span 1;grid-row:span 1} } /* ---------- Fliesstext-Seiten ohne Sidebar ---------- */ .dk-mid p{max-width:640px;margin-left:auto;margin-right:auto} .dk-logo35{text-align:center} .dk-logo35 img{max-width:240px;height:auto} .dk-caption p{font-size:14px;line-height:1.5;color:var(--ink3)} /* ---------- Tabellen im Referenz-Stil ---------- */ .dk-table{background:#fff;border-radius:var(--r-l);padding:10px 14px 6px; box-shadow:0 10px 30px rgba(0,0,0,.06);overflow-x:auto} .dk-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px} .dk-table th{text-align:left;font-size:var(--fs-btn);line-height:var(--lh-xl);font-weight:600; letter-spacing:var(--ls-none);color:var(--ink3);padding:16px 16px; border-bottom:1px solid var(--line);white-space:nowrap} .dk-table td{padding:16px 16px;border-bottom:1px solid #F0F0F2;color:var(--ink);font-weight:500;vertical-align:middle} .dk-table tbody tr{transition:background .2s var(--ease)} .dk-table tbody tr:hover{background:var(--plane)} .dk-table tbody tr:last-child td{border-bottom:none} .dk-table .tag{display:inline-block;border-radius:999px;padding:4px 14px;font-size:12.5px;font-weight:600; background:#F0F0F3;color:var(--ink2)} .dk-table .tag.free{background:#E7F4EC;color:#1C7A45} /* ---------- Bildeffekte: leichter Zoom ---------- */ .dk-photo,.dk-card .elementor-widget-image,.dk-gal{overflow:hidden} .dk-photo img,.dk-card .elementor-widget-image img,.dk-gal img{ transition:transform .6s var(--ease);will-change:transform} .dk-photo:hover img,.dk-card:hover .elementor-widget-image img,.dk-gal:hover img{transform:scale(1.06)} /* ---------- Scroll-Reveal (Klassen werden per JS gesetzt) ---------- */ .dk-rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .dk-rv.in{opacity:1;transform:none} .dk-rvz img{transform:scale(1.07);transition:transform 1.1s var(--ease)} .dk-rvz.in img{transform:scale(1)} /* ---------- Standorte als Zeilenliste mit Hover-Fenster (Referenz: primefolio /about) ---------- */ .dk-aw{display:flex;flex-direction:column;gap:16px;width:100%} .dk-awrow{position:relative;display:grid;gap:20px;place-items:center stretch;padding-bottom:16px; grid-template-columns:minmax(100px,330fr) minmax(100px,250fr) minmax(100px,270fr) minmax(80px,120fr)} .dk-awrow::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line)} .dk-awrow.head{padding-bottom:14px} .dk-awrow.head::after{background:var(--ink)} .dk-awrow.head .c{font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)} .dk-awname{font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.018em; color:var(--ink);text-decoration:none;align-self:center} .dk-awname:hover{color:var(--h-blue)} .dk-awcell{font-size:20px;line-height:1.2;color:var(--h-gray);align-self:center} .dk-awtag{display:inline-flex;align-items:center;gap:14px;justify-self:start;align-self:center; border-radius:42px;background:var(--plane);padding:9px 16px;font-size:15px;line-height:1.3;color:var(--ink2)} .dk-awdot{width:9px;min-width:9px;height:9px;border-radius:50%;background:var(--h-blue);display:block} .dk-awmore{justify-self:end;align-self:center;font-size:15px;font-weight:600;color:var(--h-blue);text-decoration:none} .dk-awmore:hover{text-decoration:underline;text-underline-offset:4px} .dk-awpop{position:absolute;left:50%;top:100%;z-index:5;width:288px;padding:20px; border-radius:var(--r-l);background:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.25); opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,10px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s} .dk-awrow:hover .dk-awpop,.dk-awrow:focus-within .dk-awpop{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,8px)} .dk-awpop .n{margin:0 0 12px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:18px;line-height:1.2;font-weight:600; letter-spacing:-.018em;color:#fff} .dk-awpop .a{margin:0;font-size:14px;line-height:1.45;color:#C1C1C6} .dk-awpop .p{display:inline-block;margin-top:14px;font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:16px;font-weight:600; letter-spacing:-.02em;color:#8FD0F0;text-decoration:none} .dk-awpop .p:hover{text-decoration:underline;text-underline-offset:4px} /* Ohne Hover (Touch) und auf schmalen Schirmen: Fenster fest eingeblendet, damit Adresse und Rufnummer erreichbar bleiben */ @media (hover:none),(max-width:900px){ .dk-awrow{grid-template-columns:1fr;gap:10px;padding-bottom:22px} .dk-awrow.head{display:none} .dk-awcell{font-size:17px} .dk-awmore{justify-self:start} .dk-awpop{position:static;width:100%;transform:none!important;opacity:1;visibility:visible; pointer-events:auto;background:var(--plane);box-shadow:none;padding:16px 18px;border-radius:var(--r-m)} .dk-awpop .n{display:none} .dk-awpop .a{color:var(--ink2)} .dk-awpop .p{color:var(--h-blue)} } /* ---------- Zahlenband: fuenf Werte in einer Zeile ---------- */ .dk-stats .e-con:has(> .dk-w25),.dk-stats .e-con-inner:has(> .dk-w25){gap:48px 72px} .dk-stats .dk-w25{min-width:150px} @media (max-width:1100px){.dk-stats .e-con:has(> .dk-w25),.dk-stats .e-con-inner:has(> .dk-w25){gap:44px 56px}} /* ---------- Kopfzeile ---------- */ /* Transparenz um 20 % erhoeht: Deckkraft 0,78 -> 0,62. Milchglas und Farbe liegen auf einem ::before, nicht auf der Leiste selbst: ein backdrop-filter macht sein Element zum Bezugsrahmen fuer alles mit position:fixed darin — das Menue-Panel wuerde sonst nur den Kopfstreifen ausfuellen statt den Bildschirm. Das Pseudo-Element hat keine Kinder und kann den Filter deshalb gefahrlos tragen. */ .hd-glass{background:transparent!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .hd-glass::before{content:"";position:absolute;inset:0;z-index:-1; background:rgba(255,255,255,.62); backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px)} /* ---------- Menuezeile am Schirm: Punkte gleichmaessig verteilt ---------- Bisher hingen alle Punkte als Traube am rechten Rand (Elementor setzt .elementor-nav-menu__align-end -> justify-content:flex-end). Jetzt teilen sie sich die freie Breite zwischen Logo und Kontakt-Button gleichmaessig auf. Rechts schliesst die Zeile buendig mit dem Inhalt darunter ab: Kopfzeile und Seitensektionen liegen beide in einem 1260-px-Container mit 28 px Polster, also auf derselben Kante. Ab 1025 px — darunter uebernimmt das Panel. */ @media (min-width:1025px){ /* Alles in der Kopfzeile auf einer Linie: Elementor laesst die Widgets ueber --container-widget-align-self:stretch auf volle Hoehe wachsen, das Menue haengt dann oben statt mittig. */ .dk-header .e-con-inner{align-items:center} .dk-header .e-con-inner>.elementor-widget{align-self:center!important} .dk-header .elementor-nav-menu--main.elementor-nav-menu__container{ display:flex;align-items:center;width:100%} .dk-header .elementor-nav-menu--main .elementor-nav-menu{align-items:center} .dk-header .e-con-inner>.elementor-widget-nav-menu{flex:1 1 auto!important;width:auto;min-width:0} .dk-header .elementor-nav-menu--main .elementor-nav-menu{ display:flex;width:100%;justify-content:space-between;gap:0; /* „Start" beginnt in der Flucht mit dem rechten Ende des Buttons „Kontakt aufnehmen" im Seitenkopf. Nachgerechnet mit der echten Schrift (Inter Tight 600, 14 px, gemessen ueber die Schriftdatei): Angebote entdecken 61 + 132,6 + 12 = 205,6 px Kontakt aufnehmen 61 + 124,5 + 12 = 197,5 px rechte Kante 205,6 + 14 + 197,5 = 417,1 px Menuebeginn Logo 178,6 + Widget-Abstand 26 = 204,6 px noetiges Polster 417,1 - 204,6 = 212,5 px Ab 1316 px steht der Inhalt auf seiner vollen Breite von 1260 px, die Rechnung stimmt also genau; darunter schrumpft der Wert mit. */ padding-left:clamp(24px,16vw,212px)} .dk-header .elementor-nav-menu--main .elementor-nav-menu>li{flex:0 0 auto} } /* ---------- Menuefarben: aus den Token, in beiden Modi ---------- Elementor faerbt die Menuepunkte ueber --e-global-color-text. Diese Regel steht in post-76.css und wird NACH dem Kit geladen — bei gleicher Spezifitaet gewinnt sie. Im Dunkelmodus standen die Punkte deshalb fast schwarz auf fast schwarzem Grund. Hier ausdruecklich und mit !important. */ .dk-header .elementor-nav-menu--main .elementor-item{ color:var(--ink)!important;fill:var(--ink)!important} .dk-header .elementor-nav-menu--main .elementor-item:hover, .dk-header .elementor-nav-menu--main .elementor-item:focus, .dk-header .elementor-nav-menu--main .elementor-item.elementor-item-active{ color:var(--h-blue)!important;fill:var(--h-blue)!important} .dk-header .elementor-nav-menu--main .elementor-item:focus-visible{ outline:3px solid var(--h-blue);outline-offset:4px;border-radius:6px} /* Aufklapp-Menue am Schirm: eine Karte im jeweiligen Modus — hell weiss mit dunkler Schrift, dunkel ein Dunkelgrau mit weisser Schrift. Bewusst ueber .sub-menu ausgewaehlt: die Klasse .elementor-nav-menu--dropdown traegt am Schirm das Untermenue, mobil aber die Vollbild-Flaeche mit dem Schleier — die darf hier nicht mitgefaerbt werden. */ .dk-header .sub-menu.elementor-nav-menu--dropdown{ background-color:var(--karte)!important; border:1px solid var(--line);border-radius:14px;overflow:hidden; box-shadow:var(--menu-shadow);padding:6px} .dk-header .elementor-nav-menu--dropdown .elementor-item{color:var(--ink)!important} .dk-header .elementor-nav-menu--dropdown .elementor-sub-item{color:var(--ink2)!important} .dk-header .elementor-nav-menu--dropdown .elementor-item, .dk-header .elementor-nav-menu--dropdown .elementor-sub-item{ background-color:transparent!important;border-radius:9px} .dk-header .elementor-nav-menu--dropdown .elementor-item:hover, .dk-header .elementor-nav-menu--dropdown .elementor-item:focus, .dk-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .dk-header .elementor-nav-menu--dropdown .elementor-sub-item:hover, .dk-header .elementor-nav-menu--dropdown .elementor-sub-item:focus, .dk-header .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active{ color:var(--chip-ink)!important;background-color:var(--chip)!important} /* ---------- Logo in der halbdurchsichtigen Leiste ---------- Das Weiss steckt jetzt nicht mehr im Bild (siehe mk_logo.py und Schritt 3 weiter unten): die Kopfzeile zeigt eine PNG mit Alphakanal. Der frueher hier stehende mix-blend-mode:multiply konnte das nicht leisten — Multiply gegen einen weissen Untergrund ergibt wieder Weiss, und die Deckkraft der Quelle bleibt 1. Der weisse Block waere geblieben. */ /* ---------- Kopfzeile mobil (Muster: primefolio Startseite) ---------- Hamburger oben rechts — also schraeg ueber dem Logo —, darunter das Logo mittig, darunter rechts der Kontakt-Button in normaler Breite. */ @media (max-width:900px){ .dk-header .e-con-inner{display:grid!important;flex-wrap:wrap; grid-template-columns:1fr auto; grid-template-areas:". burger" "logo logo" ". btn"; align-items:center;gap:6px 8px;padding-top:8px;padding-bottom:12px} .dk-header .elementor-widget-nav-menu{grid-area:burger;justify-self:end;width:auto;flex:0 0 auto} .dk-header .elementor-widget-image{grid-area:logo;justify-self:center;width:auto} .dk-header .elementor-widget-image img{height:55px} /* 46 px + 20 % */ .dk-header .elementor-widget-button{grid-area:btn;justify-self:end;width:auto} } /* ---------- Menue als Panel (Muster: primefolio Startseite) ---------- Dort liegt .sidemenu als fixe Flaeche ueber der Seite (Schleier #0a0a0a33), darin faehrt .navigation-wrapper — weiss, hoechstens 506 px breit, volle Hoehe — von links ein; die Punkte stehen als 24-px-Zeilen untereinander. Elementor bringt dafuer schon alles mit: der Umschalter bekommt beim Tippen die Klasse .elementor-active, das folgende