/* ========================================================================== civitas-home.ch · Stile Designkonzept MK-2026-CIVITAS-001: Anthrazit trägt, Rot und Blau führen. Glutrot = Anruf, Notdienst, Ziffern, sonst nirgends (Links, Pfeile, Striche, aktive Punkte in Anthrazit oder Blau, damit der rote Anrufknopf stark bleibt). Kälteblau = Offerte und Links. Eisblau nur im Logo. Jost für Titel und Auszeichnung, Figtree für Text. Alles vom eigenen Server. Ein Abschnitt passt auf eine Bildschirmhöhe; 60 px Rand zu jedem Farbwechsel am Bildschirm. ========================================================================== */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/jost.woff2?v=c6d5aaf8d9") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/figtree.woff2?v=c5fcff680e") format("woff2"); } :root { --anthrazit: #2b2a28; --anthrazit-2: #353431; --anthrazit-3: #45433f; --stahl: #8a8f94; --stahl-dunkel: #5c6166; --weiss: #f4f4f2; --karte: #ffffff; --linie: #dfe1e3; --linie-dunkel: rgba(244, 244, 242, .16); --glut: #c8372d; --glut-tief: #a92c23; --glut-hell: #ee6b5a; --kaelte: #2e5a88; --kaelte-tief: #244a72; --eis: #b6c7d2; --tinte: #2b2a28; --text-leise: #575c61; --hell-text: #e6e7e8; --leisten-schrift: #3f4448; --f-titel: "Jost", "Futura", "Century Gothic", system-ui, sans-serif; --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --kopf-h: 84px; --fuss-h: 60px; --rand: clamp(20px, 4vw, 48px); --breite: 1240px; --sec: clamp(60px, 6.5vw, 92px); --r: 4px; --r-gross: 8px; --schatten: 0 1px 2px rgba(43, 42, 40, .06), 0 10px 30px rgba(43, 42, 40, .08); --ease: cubic-bezier(.22, .61, .24, 1); --h1: clamp(34px, 4vw, 56px); --h2: clamp(26px, 2.6vw, 38px); --h3: clamp(19px, 1.5vw, 23px); --text: 17px; --klein: 14px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); } body { margin: 0; background: var(--weiss); color: var(--tinte); font: 400 var(--text)/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--fuss-h) + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } p { margin: 0; } h1, h2, h3 { margin: 0; font-family: var(--f-titel); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); line-height: 1.2; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--kaelte); outline-offset: 3px; border-radius: 2px; } .sym { width: 20px; height: 20px; flex: none; } .rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding-inline: var(--rand); } .rahmen--schmal { max-width: calc(860px + 2 * var(--rand)); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sprung { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--anthrazit); color: #fff; padding: 10px 16px; border-radius: var(--r); text-decoration: none; } .sprung:focus { top: 12px; } /* ---------------------------------------------------------------- Knöpfe */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--r); font: 600 13px/1 var(--f-titel); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .knopf .sym { width: 18px; height: 18px; } .knopf:active { transform: translateY(1px); } .knopf--glut { background: var(--glut); color: #fff; } .knopf--glut:hover { background: var(--glut-tief); } .knopf--kaelte { background: var(--kaelte); color: #fff; } .knopf--kaelte:hover { background: var(--kaelte-tief); } .knopf--rahmen { border-color: var(--anthrazit); color: var(--anthrazit); background: transparent; } .knopf--rahmen:hover { background: var(--anthrazit); color: #fff; } .knopf--rahmen.knopf--hell { border-color: rgba(244, 244, 242, .55); color: var(--weiss); } .knopf--rahmen.knopf--hell:hover { background: var(--weiss); color: var(--anthrazit); } .knopf--klein { min-height: 40px; padding: 0 18px; font-size: 12px; } .knopfpaar { display: flex; flex-wrap: wrap; gap: 12px; } .textlink { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--f-titel); letter-spacing: .1em; text-transform: uppercase; color: var(--kaelte); text-decoration: none; } .textlink .sym { width: 18px; height: 18px; transition: transform .18s var(--ease); } .textlink:hover .sym { transform: translateX(4px); } .textlink--hell { color: #fff; } .nw { white-space: nowrap; } /* ---------------------------------------------------------------- Kopf (klebt, durchscheinend) */ .kopf { position: sticky; top: 0; z-index: 60; height: var(--kopf-h); background: rgba(244, 244, 242, .88); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid rgba(43, 42, 40, .08); } .kopf__innen { height: 100%; display: flex; align-items: center; gap: 32px; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding-inline: var(--rand); } .kopf__marke { display: block; color: var(--anthrazit); flex: none; } .logo { display: block; height: auto; } .logo-augen { fill: var(--eis); } .kopf__logo { width: auto; height: 36px; } /* Querfassung: Wolf links, Schriftzug rechts */ .kopf__nav { display: flex; gap: 26px; margin-left: auto; } .kopf__nav a { position: relative; padding: 8px 0; font: 600 12.5px/1 var(--f-titel); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--leisten-schrift); } .kopf__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--anthrazit); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); } .kopf__nav a:hover { color: var(--anthrazit); } .kopf__nav a:hover::after, .kopf__nav a.ist-hier::after { transform: scaleX(1); } .kopf__nav a.ist-hier { color: var(--anthrazit); } .kopf__knopf { min-height: 46px; padding: 0 20px; font-size: 12.5px; } .kopf__zurueck, .kopf__titel { display: none; } .menue-knopf { display: none; align-items: center; gap: 8px; min-width: 46px; min-height: 46px; padding: 0 14px; margin-left: 4px; border: 1px solid rgba(43, 42, 40, .2); border-radius: var(--r); background: transparent; color: var(--anthrazit); font: 600 12px/1 var(--f-titel); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } /* ---------------------------------------------------------------- Fussleiste am Bildschirm (fest) */ .leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: calc(var(--fuss-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(244, 244, 242, .92); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid rgba(43, 42, 40, .1); font-size: 13.5px; color: var(--leisten-schrift); } .leiste__innen { height: var(--fuss-h); display: flex; align-items: center; gap: 28px; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding-inline: var(--rand); } .leiste b { color: var(--anthrazit); font-weight: 600; } .leiste a { text-decoration: none; } .leiste a:hover { color: var(--anthrazit); text-decoration: underline; } .leiste__knopf { margin-left: auto; } .reiter { display: none; } /* ---------------------------------------------------------------- Einstieg */ .held { position: relative; isolation: isolate; overflow: hidden; background: var(--anthrazit); color: var(--weiss); } .held__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; } .held__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; } /* Startseite: dunkler Verlauf unten, damit die Faktenzeile auch über hellen Stellen des Videos lesbar bleibt */ .held--gross::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 45%; background: linear-gradient(0deg, rgba(43, 42, 40, .88) 0%, rgba(43, 42, 40, .55) 45%, rgba(43, 42, 40, 0) 100%); pointer-events: none; } /* Seit Variante H2 läuft das Video auch auf dem Telefon; seite.js entfernt es im Datensparmodus */ @media (prefers-reduced-motion: reduce) { .held__video { display: none; } } .held--bild::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 42, 40, .96) 0%, rgba(43, 42, 40, .86) 38%, rgba(43, 42, 40, .38) 68%, rgba(43, 42, 40, .08) 100%); } .held__innen { display: flex; align-items: center; min-height: min(560px, calc(100svh - var(--kopf-h) - var(--fuss-h))); padding-block: 72px; } .held--gross .held__innen { min-height: min(720px, calc(100svh - var(--kopf-h) - var(--fuss-h))); } .held__text { max-width: 640px; display: grid; gap: 22px; } .held h1 { color: #fff; } .held__vorspann { font-size: 19px; line-height: 1.6; color: var(--hell-text); max-width: 34em; } .held__vorspann a { color: #fff; } .held__notdienst { display: flex; align-items: center; gap: 12px; font: 600 12.5px/1.3 var(--f-titel); letter-spacing: .14em; text-transform: uppercase; color: #e3e4e5; } .held__notdienst i { width: 9px; height: 9px; border-radius: 50%; background: var(--glut-hell); box-shadow: 0 0 0 5px rgba(238, 107, 90, .22); animation: puls 2.4s ease-in-out infinite; } @keyframes puls { 50% { box-shadow: 0 0 0 9px rgba(238, 107, 90, .05); } } .held--hell { background: var(--weiss); color: var(--tinte); border-bottom: 1px solid var(--linie); } .held--hell::before { display: none; } .held--hell h1 { color: var(--anthrazit); } .held--hell .held__vorspann { color: var(--text-leise); } .held--hell .held__vorspann a { color: var(--kaelte); } .held--hell .held__innen { min-height: 0; padding-block: 72px 64px; } .krumen ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: rgba(244, 244, 242, .72); } .krumen li + li::before { content: "/"; margin-right: 6px; opacity: .6; } .krumen a { color: inherit; text-decoration: none; } .krumen a:hover { text-decoration: underline; color: #fff; } .held--hell .krumen ol { color: var(--text-leise); } .held--hell .krumen a:hover { color: var(--anthrazit); } /* Einstieg je Seitentyp (Schritt 2, 27.10.2026): Varianten in bausteine.py, Wahl über held["art"] */ .held__foto { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } .held__figur { position: relative; isolation: isolate; } /* Startseite: Faktenzeile unten im Vollbild */ .held--gross .held__innen { flex-wrap: wrap; align-content: center; } .held__fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 56px; border-top: 1px solid rgba(244, 244, 242, .22); } .held__fakten li { display: grid; gap: 4px; padding: 20px 24px 0 0; } .held__fakten b { display: flex; align-items: center; gap: 10px; font: 600 22px/1.15 var(--f-titel); color: #fff; } .held__fakten span { font-size: 14.5px; line-height: 1.4; color: var(--hell-text); } .held__fakten i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--glut-hell); box-shadow: 0 0 0 5px rgba(238, 107, 90, .22); animation: puls 2.4s ease-in-out infinite; } .held__kurz { display: none; } /* Kurzfassung der Fakten nur auf dem Telefon (Variante H2) */ /* Karte: Foto als gerahmte Fläche, Leistungskarte daneben (Heizung, Klima) */ .held--karte { background: transparent; color: var(--tinte); padding: 20px 0 60px; } .held__flaeche { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: 48px; align-items: center; min-height: min(560px, calc(100svh - var(--kopf-h) - var(--fuss-h) - 40px)); padding: 56px clamp(28px, 4vw, 64px); border-radius: 18px; background: var(--anthrazit); color: var(--weiss); } .held__flaeche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 42, 40, .95) 0%, rgba(43, 42, 40, .82) 42%, rgba(43, 42, 40, .3) 76%, rgba(43, 42, 40, .2) 100%); } .held--spiegel .held__flaeche { grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); } .held--spiegel .held__flaeche .held__text { order: 2; justify-self: end; } .held--spiegel .held__flaeche::before { background: linear-gradient(270deg, rgba(43, 42, 40, .95) 0%, rgba(43, 42, 40, .82) 42%, rgba(43, 42, 40, .3) 76%, rgba(43, 42, 40, .2) 100%); } .held--kaelte .held__flaeche::before { background: linear-gradient(270deg, rgba(31, 58, 88, .96) 0%, rgba(36, 74, 114, .84) 42%, rgba(36, 74, 114, .3) 76%, rgba(36, 74, 114, .18) 100%); } .held__flaeche h1 { color: #fff; } .held__karte { display: grid; gap: 14px; padding: 26px 26px 22px; border-radius: 14px; background: #fff; color: var(--tinte); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); } .held__karte-titel { display: flex; align-items: center; gap: 10px; font: 600 19px/1.2 var(--f-titel); color: var(--anthrazit); } .held__karte-titel .sym { width: 22px; height: 22px; color: var(--glut); } .held--kaelte .held__karte-titel .sym { color: var(--kaelte); } .held__punkte { display: grid; gap: 10px; font-size: 15.5px; line-height: 1.4; } .held__punkte li { display: flex; align-items: flex-start; gap: 10px; } .held__punkte .sym { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--kaelte); } .held__karte-tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--linie); font: 600 24px/1 var(--f-titel); color: var(--anthrazit); text-decoration: none; } .held__karte-tel .sym { width: 22px; height: 22px; color: var(--glut); } .held__karte-tel:hover span { text-decoration: underline; text-underline-offset: 4px; } .held__karte-hinweis { font-size: 13.5px; color: var(--text-leise); } /* Rahmen: hell, Foto im Rahmen mit versetzter Fläche und Marke (Sanitär, Service) */ .held--rahmen .held__innen, .held--ueber .held__innen, .held--ort .held__innen, .held--referenzen .held__innen, .held--kontakt .held__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; } .held--rahmen .held__figur { aspect-ratio: 5 / 4; margin: 0 22px 22px 0; } .held--rahmen .held__figur::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border-radius: 14px; background: var(--eis); } .held--rahmen.held--spiegel .held__figur { order: -1; margin: 0 0 22px 22px; } .held--rahmen.held--spiegel .held__figur::before { inset: 22px 22px -22px -22px; } .held__marke { position: absolute; left: -26px; bottom: 30px; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 14px 18px; border-radius: 12px; background: #fff; box-shadow: var(--schatten); font: 600 15px/1.3 var(--f-titel); color: var(--anthrazit); } .held--spiegel .held__marke { left: auto; right: -26px; } .held__marke .sym { flex: none; width: 26px; height: 26px; color: var(--kaelte); } /* Fakten: dunkel geteilt, Leiste mit belegten Fakten (Heizungsersatz, Fernwärme) */ .held--fakten { background: var(--anthrazit); } .held--fakten::after { content: ""; position: absolute; right: -12%; top: -40%; z-index: -1; width: 55%; height: 160%; background: radial-gradient(closest-side, rgba(200, 55, 45, .18), transparent 70%); pointer-events: none; } .held--fakten .held__innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px clamp(40px, 5vw, 72px); align-items: center; min-height: 0; padding-block: 64px; } .held--fakten .held__figur { aspect-ratio: 4 / 3; } .held--fakten.held--spiegel .held__innen { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .held--fakten.held--spiegel .held__figur { order: -1; } .held--fakten.held--spiegel::after { right: auto; left: -12%; } .held__leiste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 24px; border-top: 1px solid var(--linie-dunkel); } .held__leiste li { display: grid; gap: 4px; } .held__leiste b { font: 600 24px/1.15 var(--f-titel); color: #fff; } .held__leiste span { font-size: 14.5px; line-height: 1.45; color: var(--hell-text); } /* Notdienst: dunkel, Nummer gross */ .held--notdienst { background: var(--anthrazit); } .held--notdienst::after { content: ""; position: absolute; left: -10%; top: -50%; z-index: -1; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(200, 55, 45, .24), transparent 70%); pointer-events: none; } .held--notdienst .held__innen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 5vw, 72px); align-items: center; min-height: 0; padding-block: 64px; } .held--notdienst .held__figur { aspect-ratio: 4 / 5; } .held__nummer { display: inline-flex; align-items: center; gap: 18px; justify-self: start; font: 600 clamp(40px, 5vw, 68px)/1 var(--f-titel); letter-spacing: .01em; color: #fff; text-decoration: none; } .held__nummer .sym { width: .8em; height: .8em; padding: .14em; border-radius: 50%; background: var(--glut); color: #fff; box-shadow: 0 0 0 10px rgba(200, 55, 45, .18); } .held__nummer:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .held__zeiten { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--hell-text); } .held__zeiten li { display: flex; align-items: center; gap: 8px; } .held__zeiten .sym { width: 18px; height: 18px; color: var(--glut-hell); } .held--notdienst .knopf { justify-self: start; } /* Ort: Orte als Marken, Sprungmarken auf die Abschnitte der Seite */ .held__orte { display: flex; flex-wrap: wrap; gap: 8px; } .held__orte li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; font-size: 14.5px; color: var(--anthrazit); } .held__orte .sym { width: 16px; height: 16px; color: var(--glut); } .held__sprung { display: grid; gap: 4px; justify-self: end; width: min(100%, 440px); padding: 14px 14px 10px; border-radius: 18px; background: #fff; box-shadow: var(--schatten); } .held__sprung .held__foto { aspect-ratio: 16 / 9; height: auto; border-radius: 12px; } .held__sprung-titel { margin: 12px 8px 2px; font: 600 12.5px/1.3 var(--f-titel); letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); } .held__sprung li + li { border-top: 1px solid var(--linie); } .held__sprung a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 8px; font: 600 16px/1.3 var(--f-titel); color: var(--anthrazit); text-decoration: none; } .held__sprung a .sym { flex: none; width: 18px; height: 18px; color: var(--kaelte); transition: transform .2s var(--ease); } .held__sprung a:hover .sym { transform: translateX(4px); } .held--ort.held--spiegel .held__sprung { order: -1; justify-self: start; } /* Referenzen: die drei Projekte als Kacheln */ .held__kacheln { display: grid; gap: 12px; } .held__kacheln a { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 18px 22px; border-radius: 14px; background: #fff; box-shadow: var(--schatten); color: var(--tinte); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .held__kacheln a:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(43, 42, 40, .06), 0 16px 36px rgba(43, 42, 40, .12); } .held__kacheln b { grid-row: 1 / 3; font: 600 46px/1 var(--f-titel); color: var(--anthrazit); } .held__kacheln span { font: 600 16.5px/1.3 var(--f-titel); color: var(--anthrazit); } .held__kacheln .held__kachel-ort { display: inline-flex; align-items: center; gap: 6px; font: 400 14.5px/1.3 var(--f-text); color: var(--text-leise); } .held__kachel-ort .sym { width: 15px; height: 15px; } /* Über uns: Alex im Bildfenster, drei Fakten */ .held--ueber .held__innen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .held--ueber .held__figur { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf-h) - var(--fuss-h) - 120px); justify-self: start; } .held__schild { position: absolute; right: -28px; bottom: 28px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 12px; background: #fff; box-shadow: var(--schatten); } .held__schild b { font: 600 17px/1.2 var(--f-titel); color: var(--anthrazit); } .held__schild span { font-size: 13.5px; color: var(--text-leise); } .held__fakten--hell { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-top-color: var(--linie); } .held__fakten--hell b { font-size: 30px; color: var(--anthrazit); } /* keine rote Schrift (Wunsch Besim) */ .held__fakten--hell span { color: var(--text-leise); } /* Kontakt: Anrufkarte mit Alex */ .held__anruf { display: grid; gap: 16px; justify-self: end; width: min(100%, 440px); padding: 26px; border-radius: 18px; background: #fff; box-shadow: var(--schatten); } .held__anruf-kopf { display: flex; align-items: center; gap: 14px; } .held__anruf-kopf p { display: grid; gap: 2px; } .held__anruf-kopf b { font: 600 18px/1.2 var(--f-titel); color: var(--anthrazit); } .held__anruf-kopf p span { font-size: 14px; line-height: 1.4; color: var(--text-leise); } .held__anruf-tel { display: inline-flex; align-items: center; gap: 12px; font: 600 clamp(28px, 2.6vw, 36px)/1 var(--f-titel); color: var(--anthrazit); text-decoration: none; } .held__anruf-tel .sym { width: 26px; height: 26px; color: var(--glut); } .held__anruf-tel:hover span { text-decoration: underline; text-underline-offset: 5px; } .held__anruf-zeiten { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 14.5px; color: var(--text-leise); } .held__anruf-zeiten li { display: flex; align-items: center; gap: 10px; } .held__anruf-zeiten .sym { width: 17px; height: 17px; color: var(--stahl-dunkel); } /* Goldene Regel (Besim, 27.10.2026): Jeder Einstieg füllt am Bildschirm genau die Fläche zwischen klebendem Kopf und klebender Fussleiste, Inhalt in der Mitte, Bilder wachsen mit. Auf dem Telefon gilt die Mobile Kompaktheit, dort bleibt der Einstieg so hoch wie sein Inhalt. */ @media (min-width: 761px) { .held { --held-h: calc(100svh - var(--kopf-h) - var(--fuss-h)); } .held__innen, .held--gross .held__innen, .held--hell .held__innen, .held--fakten .held__innen, .held--notdienst .held__innen { min-height: var(--held-h); } .held--hell .held__innen, .held--fakten .held__innen, .held--notdienst .held__innen { padding-block: 56px; align-content: center; } /* die helle Fassung trägt unten eine Trennlinie von 1 px */ .held--hell .held__innen { min-height: calc(var(--held-h) - 1px); } /* Karte: 20 px oben, 60 px Rand unten zum nächsten Abschnitt */ .held__flaeche { min-height: calc(var(--held-h) - 80px); } } @media (min-width: 961px) { .held--rahmen .held__figur { aspect-ratio: auto; height: min(620px, calc(var(--held-h) - 190px)); } .held--fakten .held__figur { aspect-ratio: auto; height: min(540px, calc(var(--held-h) - 320px)); } .held--notdienst .held__figur { aspect-ratio: auto; height: min(640px, calc(var(--held-h) - 150px)); } .held--ueber .held__figur { max-height: min(680px, calc(var(--held-h) - 120px)); } } /* ---------------------------------------------------------------- Abschnitte */ .abschnitt { padding-block: var(--sec); } .abschnitt--hell { background: var(--weiss); } .abschnitt--weiss { background: var(--karte); } .abschnitt--dunkel { background: var(--anthrazit); color: var(--weiss); } .abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; } /* Text unter dem Titel, nicht daneben (Wunsch Besim, 27.10.2026) */ .abschnitt__kopf { display: grid; justify-items: start; gap: 14px; margin-bottom: 40px; } .abschnitt__text { color: var(--text-leise); max-width: 46em; } .abschnitt__fuss { margin-top: 36px; } .abschnitt--hell + .abschnitt--hell, .abschnitt--weiss + .abschnitt--weiss { border-top: 1px solid var(--linie); } /* Karten (Bereiche) */ .karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .karte { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 26px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .karte:hover { border-color: rgba(43, 42, 40, .35); box-shadow: var(--schatten); transform: translateY(-2px); } .karte__oben { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .karte__nr { font: 600 14px/1 var(--f-titel); letter-spacing: .12em; color: var(--anthrazit); } .karte__sym { width: 26px; height: 26px; color: var(--stahl); } .karte h3 a { text-decoration: none; } .karte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .karte p { color: var(--text-leise); font-size: 15.5px; } .karte__liste { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 15px; } .karte__liste li { display: flex; gap: 10px; } .karte__liste li::before { content: ""; width: 10px; height: 1.5px; margin-top: .75em; background: var(--stahl); flex: none; } .karte__mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 600 12.5px/1.3 var(--f-titel); letter-spacing: .12em; text-transform: uppercase; color: var(--kaelte); } .karte__mehr .sym { width: 16px; height: 16px; transition: transform .2s var(--ease); } .karte:hover .karte__mehr .sym { transform: translateX(4px); } /* Text links, Liste rechts */ .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; } .split--um .split__text { order: 2; } .split__text { display: grid; gap: 18px; } .split__text p { color: var(--text-leise); max-width: 36em; } .split__text p a, .punkte a, .frage a, .recht a { color: var(--kaelte); } .abschnitt--dunkel .split__text p { color: var(--hell-text); } .split__text strong { color: var(--tinte); font-weight: 600; } .punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .punkte li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--linie); min-width: 0; } .punkte li > *, .karte > *, .verweis > *, .projekt > *, .schritt > * { min-width: 0; overflow-wrap: break-word; } .punkte li:nth-last-child(-n+2) { border-bottom: 1px solid var(--linie); } .punkte b { font: 600 17px/1.3 var(--f-titel); letter-spacing: -.005em; } .punkte span { font-size: 15.5px; color: var(--text-leise); } .split__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-gross); } /* Zahlen */ /* Zahlenblock (27.10.2026, Wunsch Besim): Kälteblau statt Anthrazit, abgedunkeltes Projektfoto als Struktur, am Bildschirm mindestens 50 vh hoch (Regel weiter unten), Ziffern gross */ .abschnitt--zahlen { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; padding-block: 80px; background: var(--kaelte-tief); color: #fff; } .abschnitt--zahlen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(22, 42, 66, .95) 0%, rgba(36, 74, 114, .86) 48%, rgba(46, 90, 136, .74) 100%); } .zahlen__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); } .zahlen__titel { max-width: 20ch; margin-bottom: clamp(36px, 5vh, 64px); color: #fff; } .zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .zahl { position: relative; display: grid; align-content: start; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .3); } .zahl::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 3px; background: var(--eis); } .zahl b { font: 600 clamp(56px, 6.2vw, 104px)/.92 var(--f-titel); letter-spacing: -.03em; color: #fff; font-variant-numeric: lining-nums; } .zahl span { max-width: 24ch; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .84); } @media (min-width: 761px) { .abschnitt--zahlen { min-height: 50svh; } } /* Inhaltsabschnitte mit Punkten, vier Fassungen (27.10.2026, ersetzen die verbotene Strichliste) */ .mosaik h3, .kacheln h3, .fotokarte h3, .reihe h3 { font: 600 19px/1.2 var(--f-titel); letter-spacing: -.005em; } .mosaik p, .fotokarte p, .reihe p { color: var(--text-leise); } .mosaik a:not(.knopf), .kacheln a, .fotokarte a, .reihe a { color: var(--kaelte); } /* a · Mosaik */ .mosaik { padding-block: 64px; } .mosaik__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .mosaik__haupt { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; align-content: center; gap: 18px; padding: 32px 36px; border-radius: 18px; background: var(--anthrazit); color: #fff; } .mosaik--4 .mosaik__haupt { grid-row: 1 / 4; } .mosaik__haupt h2 { color: #fff; } .mosaik__text { display: grid; align-content: start; gap: 10px; } .mosaik__text p { color: var(--hell-text); } .mosaik__text a { color: #fff; } /* Foto absolut in seiner Fläche: sonst bringt es seine eigene Höhe mit und streckt die Reihe */ .mosaik__foto { position: relative; grid-column: 3 / 5; grid-row: 1 / 2; min-height: 170px; border-radius: 18px; overflow: hidden; } .mosaik__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mosaik__karte { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: var(--schatten); } .mosaik__karte .sym { grid-row: 1 / 3; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: rgba(46, 90, 136, .1); color: var(--kaelte); } .fotokarte__punkt .sym { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(46, 90, 136, .1); color: var(--kaelte); } .mosaik .logos { grid-column: 1 / -1; margin-top: 6px; } /* b · Dunkle Kacheln */ .kacheln { padding-block: 84px; } .kacheln__kopf { margin-bottom: 40px; } /* Fliesstext unter den Kacheln (Wunsch Besim), zwei Absätze nebeneinander */ .kacheln__text { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 48px; margin-top: 32px; } .kacheln__text p { color: var(--hell-text); } .kacheln__text a { color: #fff; } .kacheln__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .kacheln--4 .kacheln__raster, .kacheln--8 .kacheln__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kachel { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; column-gap: 18px; row-gap: 4px; padding: 26px; border: 1px solid rgba(244, 244, 242, .12); border-radius: 18px; background: var(--anthrazit-2); } .kachel .sym { grid-row: 1 / 3; width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: rgba(182, 199, 210, .14); color: var(--eis); } .kachel h3 { color: #fff; } .kachel p { color: var(--hell-text); } .kacheln--4 .kachel, .kacheln--8 .kachel { grid-template-columns: minmax(0, 1fr); } .kacheln--4 .kachel .sym, .kacheln--8 .kachel .sym { grid-row: auto; margin-bottom: 12px; } .kacheln .logos { margin-top: 32px; } /* c · Foto mit Karte, die über das Foto ragt */ .fotokarte__innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .fotokarte__foto { grid-column: 1; grid-row: 1; height: min(560px, calc(100svh - var(--kopf-h) - var(--fuss-h) - 2 * var(--sec))); border-radius: 20px; overflow: hidden; } .fotokarte__foto img { width: 100%; height: 100%; object-fit: cover; } .fotokarte__karte { grid-column: 2; grid-row: 1; position: relative; display: grid; gap: 14px; margin-left: -120px; padding: 40px; border-radius: 20px; background: #fff; box-shadow: 0 2px 4px rgba(43, 42, 40, .06), 0 30px 70px rgba(43, 42, 40, .16); } .fotokarte--um .fotokarte__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .fotokarte--um .fotokarte__foto { grid-column: 2; } .fotokarte--um .fotokarte__karte { grid-column: 1; margin: 0 -120px 0 0; } .fotokarte__punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-top: 6px; } .fotokarte__punkt { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-content: start; } .fotokarte__punkt .sym { grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; border-radius: 50%; } .fotokarte .logos { margin-top: 6px; } .fotokarte { padding-block: 72px; } .fotokarte__karte > p { font-size: 16px; } /* viele Punkte: breitere Karte, Punkte in drei Spalten, damit der Abschnitt in eine Bildschirmhöhe passt */ .fotokarte--viele .fotokarte__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .fotokarte--viele.fotokarte--um .fotokarte__innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .fotokarte--viele .fotokarte__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fotokarte--viele .fotokarte__punkt { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .fotokarte--viele .fotokarte__punkt .sym { grid-row: auto; margin-bottom: 6px; } /* d · zentriert, runde Symbole in einer Reihe */ .reihe { text-align: center; } .reihe__kopf { display: grid; justify-items: center; gap: 14px; max-width: 780px; margin: 0 auto 44px; } .reihe__raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 22px; } .reihe--4 .reihe__raster, .reihe--8 .reihe__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .reihe--5 .reihe__raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } .reihe__punkt { display: grid; justify-items: center; align-content: start; gap: 8px; } .reihe__rund { display: grid; place-items: center; width: 80px; height: 80px; margin-bottom: 8px; border-radius: 50%; background: #fff; box-shadow: var(--schatten); color: var(--kaelte); } .reihe__rund .sym { width: 32px; height: 32px; } .reihe .logos { justify-items: center; margin-top: 36px; } .reihe .logos__liste { justify-content: center; width: 100%; } /* acht Punkte: quer, Symbol links, damit zwei Reihen in eine Bildschirmhöhe passen */ .reihe--8 { padding-block: 72px; } .reihe--8 .reihe__raster { gap: 18px 26px; text-align: left; } .reihe--8 .reihe__punkt { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; column-gap: 14px; row-gap: 2px; } .reihe--8 .reihe__rund { grid-row: 1 / 3; width: 56px; height: 56px; margin: 0; } .reihe--8 .reihe__rund .sym { width: 24px; height: 24px; } /* Boxen einheitlich (Wunsch Besim): Titel immer einzeilig, Text genau zwei Zeilen, in allen vier Fassungen dieselbe Stufe. Werkzeuge/boxen-pruefen.py misst das auf allen Seiten. */ .mosaik__karte h3, .kachel h3, .fotokarte__punkt h3, .reihe__punkt h3 { font-size: 16.5px; line-height: 1.3; white-space: nowrap; } .mosaik__karte p, .kachel p, .fotokarte__punkt p, .reihe__punkt p { font-size: 14.5px; line-height: 1.45; min-height: 2.9em; } /* Logo-Wand: echte Logos, im Bau schwarz-weiss umgefärbt, jedes in einer gleich grossen Kachel */ .logos { display: grid; gap: 14px; text-align: left; } .logos p { font-size: 14.5px; line-height: 1.45; color: var(--text-leise); } .logos__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 12px; } .logos__liste li { display: grid; place-items: center; height: 74px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: var(--schatten); } .logos__liste img { display: block; max-width: 100%; height: auto; } .logos__wort { font: 700 18px/1 var(--f-titel); color: var(--anthrazit); } .fotokarte .logos__liste li { background: var(--weiss); box-shadow: none; } .logos--hell p { color: var(--hell-text); } .logos--hell .logos__liste li { border: 1px solid rgba(244, 244, 242, .12); background: var(--anthrazit-2); box-shadow: none; } .logos--hell .logos__wort { color: #fff; } /* Projekte */ .projekte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .projekt { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--weiss); border-radius: var(--r-gross); border: 1px solid var(--linie); } .projekt__ort { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.35; color: var(--text-leise); } .abschnitt--dunkel .projekt__ort { color: var(--hell-text); } .projekt__ort .sym { width: 16px; height: 16px; color: var(--stahl); } .abschnitt--dunkel .projekt__ort .sym { color: rgba(244, 244, 242, .6); } .projekt__zahl { display: flex; align-items: baseline; gap: 12px; padding-block: 6px 10px; border-bottom: 1px solid var(--linie); } .projekt__zahl b { font: 600 56px/1 var(--f-titel); color: var(--anthrazit); letter-spacing: -.03em; } .projekt__zahl span { font-size: 14.5px; color: var(--text-leise); line-height: 1.35; } .projekt__arbeit { font-weight: 500; } .projekt > p:not([class]) { color: var(--text-leise); font-size: 15.5px; } .projekt__fakten { display: grid; gap: 8px; margin: 4px 0 0; font-size: 14.5px; } .projekt__fakten div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; } .projekt__fakten dt { color: var(--text-leise); } .projekt__fakten dd { margin: 0; } .abschnitt--dunkel .projekt__fakten dt { color: rgba(244, 244, 242, .62); } .projekte--kurz .projekt, .projekte .projekt { padding: 24px; gap: 10px; } .projekte .projekt__zahl b { font-size: 50px; } .projekt-gross { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 80px; align-items: center; } .projekt-gross__zahl { display: grid; gap: 10px; } .projekt-gross__zahl b { font: 600 clamp(110px, 13vw, 190px)/.85 var(--f-titel); letter-spacing: -.05em; color: #fff; } .projekt-gross__zahl span { font: 500 19px/1.35 var(--f-titel); color: var(--hell-text); max-width: 12em; } .projekt-gross__text { display: grid; gap: 18px; } .projekt-gross__text > p:not([class]) { color: var(--hell-text); max-width: 38em; } .projekt-gross .projekt__fakten { padding-top: 16px; border-top: 1px solid var(--linie-dunkel); } /* Ablauf als Strecke */ .ablauf { display: grid; gap: 0 24px; position: relative; counter-reset: s; } .ablauf--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ablauf--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; } .ablauf::before { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; height: 2px; background: var(--linie); } .schritt { position: relative; display: grid; gap: 8px; align-content: start; } .schritt__nr { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--linie); font: 600 17px/1 var(--f-titel); color: var(--anthrazit); } .schritt b { font: 600 18px/1.25 var(--f-titel); } .schritt p { font-size: 15.5px; color: var(--text-leise); } /* Notdienst-Band */ .abschnitt--band { background: var(--anthrazit); color: var(--weiss); position: relative; overflow: hidden; } .abschnitt--band::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(200, 55, 45, .2), transparent 70%); pointer-events: none; } .band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: center; } .band__text { display: grid; gap: 14px; max-width: 46em; } .band h2 { color: #fff; } .band__text > p:last-child { color: var(--hell-text); } .band__aktion { display: grid; gap: 16px; justify-items: start; } /* Verweise */ .verweise { display: grid; gap: 20px; } .verweise--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .verweise--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .verweis { position: relative; display: grid; gap: 8px; padding: 26px 64px 26px 26px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .verweis b { font: 600 21px/1.2 var(--f-titel); } .verweis span { color: var(--text-leise); font-size: 15.5px; } .verweis__pfeil { position: absolute; right: 24px; top: 28px; width: 22px; height: 22px; color: var(--anthrazit); transition: transform .2s var(--ease); } .verweis:hover { border-color: rgba(43, 42, 40, .35); background: var(--karte); } .verweis:hover .verweis__pfeil { transform: translateX(4px); } /* Marken */ .split--marken { align-items: center; } .marken { display: flex; flex-wrap: wrap; gap: 10px; } .marken li { padding: 12px 20px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font: 500 16px/1 var(--f-titel); letter-spacing: .02em; } .marken-zeile { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linie); } .marken-zeile p { font-size: 14.5px; } .marken-zeile ul { display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 15.5px/1.4 var(--f-titel); color: var(--tinte); } .marken-zeile li + li::before { content: "·"; margin: 0 10px; color: var(--stahl); } /* Fragen als Einzelkarten (Variante Q2, Wunsch Besim 27.10.2026): keine Strichliste; die offene Frage hebt sich mit dem blauen Zeichen ab, Plus wird Minus. Am Bildschirm zwei Spalten, im weissen Abschnitt hellgraue Karten, auf dem Telefon weisse Karten auf dem hellen Grund. */ .fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .frage { border-radius: 18px; background: var(--weiss); } .frage summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 24px; cursor: pointer; list-style: none; font: 600 17px/1.35 var(--f-titel); color: var(--anthrazit); } .frage summary::-webkit-details-marker { display: none; } .frage__zeichen { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--anthrazit); transition: background-color .28s var(--ease), color .28s var(--ease); } .frage__zeichen::before, .frage__zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .28s var(--ease); } .frage__zeichen::after { transform: rotate(90deg); } .frage[open]:not(.schliesst) .frage__zeichen { background: var(--kaelte); color: #fff; } .frage[open]:not(.schliesst) .frage__zeichen::after { transform: rotate(0deg); } /* seite.js animiert die Höhe der Antwort (eine Frage offen, sanft auf und zu), darum der Abstand innen */ .frage__antwort { overflow: hidden; color: var(--text-leise); } .frage__antwort > * { padding: 0 24px; } .frage__antwort > :last-child { padding-bottom: 22px; } /* Bildstreifen zwischen zwei Abschnitten: im hellen Grund, mit Rand unten zum nächsten Farbwechsel */ .bildstreifen { background: var(--weiss); padding-bottom: var(--sec); } .bildstreifen img { width: 100%; height: clamp(200px, 28vw, 400px); object-fit: cover; border-radius: var(--r-gross); } /* Galerie: echte Projektfotos, alle im selben Mass (4:3, aufbereitet auf 2400 x 1800) */ .galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; } .abschnitt__kopf--eng { margin-bottom: 24px; } /* zwei Fotoreihen passen so in 1536 x 864 */ .galerie__foto { margin: 0; } .galerie__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); } /* Laufbänder: alle erhaltenen Projektfotos (Wunsch Besim) in drei gegenläufigen Bändern über die ganze Breite. Jede Spur steht doppelt, darum läuft die Schleife ohne Sprung. Beim Darüberfahren halten sie an; bei reduzierter Bewegung stehen sie still und lassen sich seitlich wischen. */ .abschnitt--baender { overflow: hidden; } .laufbaender { display: grid; gap: 10px; } .laufband { display: flex; width: max-content; } .laufband__spur { display: flex; gap: 10px; padding-right: 10px; animation: laufband 240s linear infinite; } .laufband--2 .laufband__spur { animation-direction: reverse; animation-duration: 280s; } .laufband--3 .laufband__spur { animation-duration: 260s; } .laufband li { flex: none; } .laufband img { display: block; width: auto; height: clamp(100px, 14vh, 150px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; } .laufbaender:hover .laufband__spur, body:has(.leuchte[open]) .laufband__spur { animation-play-state: paused; } @keyframes laufband { to { transform: translateX(-100%); } } .laufband__bild { display: block; padding: 0; border: 0; border-radius: 10px; background: none; cursor: zoom-in; overflow: hidden; } .laufband__bild img { transition: transform .35s var(--ease), filter .35s var(--ease); } .laufband__bild:hover img { transform: scale(1.04); } .laufband__bild:focus-visible { outline: 3px solid var(--kaelte); outline-offset: 2px; } /* Foto gross: Fenster über der ganzen Seite, dahinter unscharf (Wunsch Besim), Blättern endlos */ .leuchte { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; } .leuchte[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; animation: leuchte-auf .28s var(--ease); } .leuchte::backdrop { background: rgba(43, 42, 40, .55); backdrop-filter: blur(16px) saturate(.9); -webkit-backdrop-filter: blur(16px) saturate(.9); } .leuchte__rahmen { grid-column: 2; display: grid; justify-items: center; gap: 14px; margin: 0; } .leuchte__bild { display: block; max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } .leuchte__zahl { font: 600 14px/1 var(--f-titel); letter-spacing: .04em; color: #fff; } .leuchte__vor, .leuchte__nach, .leuchte__zu { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--anthrazit); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: transform .2s var(--ease), background-color .2s var(--ease); } .leuchte__vor:hover, .leuchte__nach:hover, .leuchte__zu:hover { background: #fff; transform: scale(1.06); } .leuchte__vor .sym, .leuchte__nach .sym, .leuchte__zu .sym { width: 22px; height: 22px; } .leuchte__vor { grid-column: 1; justify-self: center; } .leuchte__nach { grid-column: 3; justify-self: center; } .leuchte__nach .sym { transform: scaleX(-1); } .leuchte__zu { position: absolute; top: 18px; right: 18px; } @keyframes leuchte-auf { from { opacity: 0; transform: scale(.98); } } @media (max-width: 620px) { .leuchte[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 64px 10px 20px; } .leuchte__rahmen { grid-column: 1; } .leuchte__bild { max-height: calc(100dvh - 190px); border-radius: 14px; } .leuchte__vor, .leuchte__nach { grid-row: 2; width: 48px; height: 48px; } .leuchte__vor { grid-column: 1; justify-self: start; margin-left: 20px; } .leuchte__nach { grid-column: 1; justify-self: end; margin-right: 20px; } .leuchte__zu { top: 10px; right: 10px; width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .leuchte[open] { animation: none; } } @media (prefers-reduced-motion: reduce) { .laufband { width: auto; overflow-x: auto; scrollbar-width: none; } .laufband__spur { animation: none; } .laufband__spur[aria-hidden="true"] { display: none; } } /* Ihr Ansprechpartner: vor dem Fuss auf jeder Inhaltsseite (statt des Schlussbands, 27.10.2026). Vorbild D.O. GipserDesign: Satz und Knöpfe, Bild, Person mit allen Wegen. */ .abschnitt--abschluss { background: var(--weiss); border-top: 1px solid var(--linie); } .ansprech { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 260px) minmax(0, 1fr); background: var(--karte); border-radius: var(--r-gross); box-shadow: var(--schatten); overflow: hidden; } .ansprech__text { display: grid; align-content: center; gap: 16px; padding: 48px clamp(28px, 3.5vw, 52px); } .ansprech__text p { color: var(--text-leise); max-width: 34em; } .ansprech__text .knopfpaar { margin-top: 6px; } .ansprech__bild { position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; background: var(--anthrazit); color: #fff; } .ansprech__wolf { display: grid; place-items: center; width: 44%; } .ansprech__wolf .wolf { width: 100%; height: auto; } .ansprech__bild picture { display: contents; } /* absolut über die ganze Fläche: in der zentrierenden Grid-Zelle griff height: 100% nicht, oben blieb ein Streifen */ .ansprech__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .ansprech__person { display: grid; align-content: center; gap: 6px; padding: 44px clamp(24px, 3vw, 44px); } .ansprech__wer { display: grid; gap: 6px; } .ansprech__name { font: 600 26px/1.15 var(--f-titel); letter-spacing: -.01em; } .ansprech__rolle { font-size: 15px; line-height: 1.45; color: var(--text-leise); } .ansprech__tel { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 12px 0 10px; font: 600 clamp(26px, 2.3vw, 32px)/1 var(--f-titel); letter-spacing: .01em; color: var(--anthrazit); text-decoration: none; } .ansprech__tel .sym { width: 24px; height: 24px; color: var(--glut); } .ansprech__tel:hover span { text-decoration: underline; text-underline-offset: 4px; } .ansprech__wege { display: grid; gap: 8px; font-size: 15px; color: var(--text-leise); } .ansprech__wege li { display: flex; align-items: flex-start; gap: 10px; } .ansprech__wege .sym { width: 18px; height: 18px; margin-top: 3px; color: var(--stahl-dunkel); } .ansprech__weg { display: inline-flex; align-items: flex-start; gap: 10px; text-decoration: none; } .ansprech__wege a:hover { color: var(--anthrazit); text-decoration: underline; } /* Kachel «Anrufen» und die Kacheltitel zeigt nur das Telefon (Variante A4) */ .ansprech__wege .ansprech__weg--tel, .ansprech__wege .ansprech__titel { display: none; } .ansprech__wege b { font-weight: inherit; } .ansprech__bild.ansprech__bild--klein { width: 60px; height: 60px; min-height: 0; flex: none; border-radius: 50%; overflow: hidden; } .ansprech__bild--klein .ansprech__wolf { width: 52%; } .wege__person { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .wege__person p { display: grid; gap: 2px; } .wege__person b { font: 600 18px/1.2 var(--f-titel); } .wege__person p span { font-size: 14px; line-height: 1.4; color: var(--text-leise); } /* Kontakt und Formular */ .abschnitt--kontakt { padding-block: 64px; } .kontakt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 56px; align-items: start; } .formular { display: grid; gap: 18px; padding: 30px 32px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten); } .formular h2 { font-size: clamp(24px, 2.2vw, 30px); } .formular fieldset { margin: 0; padding: 0; border: 0; } .formular legend { margin-bottom: 12px; font: 600 15px/1.3 var(--f-titel); } .wahlen { display: flex; flex-wrap: wrap; gap: 8px; } .wahl { position: relative; } .wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .wahl span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 15px; transition: border-color .15s, background-color .15s, color .15s; } .wahl input:checked + span { border-color: var(--kaelte); background: rgba(46, 90, 136, .1); color: var(--kaelte-tief); font-weight: 600; } .wahl input:focus-visible + span { outline: 3px solid var(--kaelte); outline-offset: 2px; } .felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .feld { display: grid; gap: 6px; } .feld--breit { grid-column: 1 / -1; } .feld label { font: 600 14.5px/1.3 var(--f-titel); } .pflicht { font: 400 12px/1 var(--f-text); color: var(--text-leise); margin-left: 6px; } .feld input, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #c9cdd1; border-radius: var(--r); background: #fff; color: var(--tinte); font: 400 16px/1.4 var(--f-text); transition: border-color .15s; } .feld textarea { resize: vertical; min-height: 110px; } .feld input:focus, .feld textarea:focus { border-color: var(--kaelte); outline: none; box-shadow: 0 0 0 3px rgba(46, 90, 136, .18); } .feld input[aria-invalid="true"] { border-color: var(--glut); } .honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .zustimmung label { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-leise); cursor: pointer; } .zustimmung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--kaelte); flex: none; } .zustimmung a { color: var(--kaelte); } .formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; } .formular__hinweis { font-size: 14.5px; color: var(--text-leise); } .formular__meldung { padding: 14px 16px; border-radius: var(--r); font-size: 15.5px; background: rgba(46, 90, 136, .1); color: var(--kaelte-tief); } .formular__meldung.ist-fehler { background: rgba(200, 55, 45, .1); color: var(--glut-tief); } .formular.ist-gesendet .formular__wahl, .formular.ist-gesendet .felder, .formular.ist-gesendet .zustimmung, .formular.ist-gesendet .formular__fuss { display: none; } .wege { display: grid; gap: 22px; } .wege h2 { font-size: clamp(22px, 2vw, 26px); } .wege__liste { display: grid; gap: 10px; } .wege__liste a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); text-decoration: none; transition: border-color .2s; } .wege__liste a:hover { border-color: var(--kaelte); } .wege__liste .sym { width: 22px; height: 22px; color: var(--anthrazit); } .wege__liste a[href^="tel:"] .sym { color: var(--glut); } .wege__liste span { display: grid; gap: 2px; font-size: 15.5px; overflow-wrap: anywhere; } .wege__liste b { font: 600 13px/1.2 var(--f-titel); letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); } .wege__zeiten { display: grid; gap: 12px; margin: 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 15.5px; } .wege__zeiten dt { font: 600 13px/1.2 var(--f-titel); letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); } .wege__zeiten dd { margin: 4px 0 0; } /* Pläne und Fotos anhängen (Formular und Chat) */ .dateien { display: grid; gap: 8px; } .dateien__titel { font: 600 14.5px/1.3 var(--f-titel); } .dateien__zone { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1.5px dashed #b9bec3; border-radius: var(--r-gross); background: var(--weiss); cursor: pointer; transition: border-color .15s, background-color .15s; } .dateien__zone:hover, .dateien__input:focus-visible + .dateien__zone { border-color: var(--kaelte); background: rgba(46, 90, 136, .06); } .dateien__input:focus-visible + .dateien__zone { outline: 3px solid var(--kaelte); outline-offset: 2px; } .dateien__zone > .sym { width: 24px; height: 24px; color: var(--kaelte); } .dateien__zone span { display: grid; gap: 2px; } .dateien__zone b { font: 600 15px/1.3 var(--f-titel); color: var(--kaelte-tief); } .dateien__zone small { font-size: 13.5px; color: var(--text-leise); } .dateien__liste { display: flex; flex-wrap: wrap; gap: 8px; } .dateien__liste:empty { display: none; } .datei { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 40px 6px 6px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; font-size: 13.5px; } .datei img, .datei__pdf { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; } .datei__pdf { display: grid; place-items: center; background: var(--weiss); font: 600 11px/1 var(--f-titel); letter-spacing: .06em; color: var(--anthrazit); } .datei__name { display: grid; min-width: 0; line-height: 1.3; } .datei__name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em; } .datei__name small { color: var(--text-leise); } .datei__weg { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-leise); cursor: pointer; } .datei__weg:hover { background: var(--weiss); color: var(--glut-tief); } .datei__weg .sym { width: 16px; height: 16px; } .datei.ist-am-laden { opacity: .55; } .dateien__fehler { font-size: 14px; color: var(--glut-tief); } /* Auswahl-Chips (Chat und Einstieg) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linie); border-radius: 999px; background: #fff; color: var(--tinte); font: 500 15px/1.2 var(--f-text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background-color .15s, color .15s; } .chip:hover { border-color: var(--kaelte); } .chip[aria-pressed="true"] { border-color: var(--kaelte); background: rgba(46, 90, 136, .1); color: var(--kaelte-tief); font-weight: 600; } /* Chat auf dem Telefon: eigene Ansicht ohne Kopf, Reiter und Fuss. Das Dokument scrollt (Browserleiste fährt ein), Leiste oben und Eingabe unten kleben. Muster Tanner, neu gebaut. */ .chat-start { display: none; } .chat[hidden] { display: none; } .chat-offen body { padding-bottom: 0; background: var(--weiss); } .chat-offen body > :not(.chat) { display: none !important; } .chat { position: relative; display: flex; flex-direction: column; min-height: 100svh; max-width: 640px; margin: 0 auto; } .chat__leiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px; background: rgba(244, 244, 242, .92); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); } .chat__zu { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--anthrazit); box-shadow: 0 1px 2px rgba(43, 42, 40, .08), 0 4px 12px rgba(43, 42, 40, .08); cursor: pointer; } .chat__zu .sym { width: 18px; height: 18px; } .chat__avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--anthrazit); color: #fff; } .chat__avatar .wolf { width: 21px; height: auto; } .chat__wer { display: grid; min-width: 0; line-height: 1.25; } .chat__wer b { font: 600 15.5px/1.2 var(--f-titel); } .chat__wer span { font-size: 13px; color: var(--text-leise); } .chat__zaehler { margin-left: auto; font: 600 12.5px/1 var(--f-titel); letter-spacing: .04em; color: var(--text-leise); white-space: nowrap; } .chat__balken { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 2px; background: var(--linie); overflow: hidden; } .chat__balken i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--kaelte); transition: width .35s var(--ease); } .chat__haupt { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 14px 14px; } .chat__verlauf { display: flex; flex-direction: column; gap: 8px; } .blase { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 16px; line-height: 1.45; overflow-wrap: break-word; } .blase--bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(43, 42, 40, .06); } .blase--bot + .blase--bot { margin-top: -2px; } .blase--ich { align-self: flex-end; display: grid; gap: 2px; margin: 4px 0 6px; border: 0; background: var(--kaelte); color: #fff; border-bottom-right-radius: 6px; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .blase--ich span { white-space: pre-line; } .blase--ich small { font-size: 12px; opacity: .78; } .chat.ist-gesendet .blase--ich small, .chat.ist-gesendet .uebersicht__aendern { display: none; } .chat.ist-gesendet .blase--ich, .chat.ist-gesendet .uebersicht button { cursor: default; } .blase--hinweis { color: var(--text-leise); font-size: 14.5px; } .blase a { color: var(--kaelte); } .blase--eintritt { animation: blase-ein .28s var(--ease) both; } @keyframes blase-ein { from { opacity: 0; transform: translateY(8px); } } .tippen { display: inline-flex; gap: 5px; padding: 15px 16px; } .tippen i { width: 7px; height: 7px; border-radius: 50%; background: #b9bec3; animation: tippen 1s ease-in-out infinite; } .tippen i:nth-child(2) { animation-delay: .15s; } .tippen i:nth-child(3) { animation-delay: .3s; } @keyframes tippen { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .uebersicht { display: grid; margin: 6px 0 2px; } .uebersicht button { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border: 0; border-top: 1px solid var(--linie); background: none; color: inherit; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; } .uebersicht__was { color: var(--text-leise); font-size: 13px; } .uebersicht__wert { overflow-wrap: anywhere; } .uebersicht__aendern { font-size: 12.5px; color: var(--kaelte); } .chat__eingabe { position: sticky; bottom: 0; z-index: 4; display: grid; gap: 10px; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(43, 42, 40, .08); } .chat__eingabe:empty { display: none; } .tastatur-offen .chat__eingabe { position: static; } .tastatur-offen .chat { padding-bottom: 45svh; } .chat__zeile { display: flex; align-items: flex-end; gap: 8px; } .chat__feld { flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 40svh; padding: 12px 16px; border: 1.5px solid #c9cdd1; border-radius: 24px; background: var(--weiss); color: var(--tinte); font: 400 16px/1.4 var(--f-text); resize: none; } .chat__feld:focus { border-color: var(--kaelte); outline: none; box-shadow: 0 0 0 3px rgba(46, 90, 136, .18); } .chat__feld[aria-invalid="true"] { border-color: var(--glut); } .chat__senden { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--kaelte); color: #fff; cursor: pointer; } .chat__senden .sym { width: 20px; height: 20px; } .chat__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .chat__felder label { display: grid; gap: 4px; font: 600 13px/1.2 var(--f-titel); } .chat__felder .chat__feld { border-radius: 14px; } .chat__felder .ist-breit { grid-column: 1 / -1; } .chat__fehler { font-size: 14px; color: var(--glut-tief); } .chat__fehler:empty { display: none; } .chat__knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; } .chat__knoepfe .knopf { min-width: 0; min-height: 50px; padding: 0 14px; border-radius: 14px; font-size: 12px; letter-spacing: .08em; white-space: normal; text-align: center; line-height: 1.15; } .chat__leise { justify-self: center; min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--text-leise); font: 500 14.5px/1 var(--f-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .chat__klein { font-size: 13px; color: var(--text-leise); text-align: center; } .chat .zustimmung label { font-size: 14px; } .chat .dateien__zone { min-height: 72px; border-radius: 16px; } /* Rechtstexte */ .recht h2 { font-size: clamp(21px, 1.9vw, 25px); margin: 40px 0 12px; } .recht h2:first-child { margin-top: 0; } .recht p { margin: 0 0 14px; color: #3d4145; max-width: 46em; } .recht__tabelle { overflow-x: auto; margin: 6px 0 18px; } .recht table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .recht th, .recht td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; } .recht thead th { font: 600 13px/1.3 var(--f-titel); letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); } .recht tbody th { font-weight: 600; } /* ---------------------------------------------------------------- Grosse Fusszeile */ /* «Notruf-Bühne» (27.10.2026): Nummer als Riesentitel, beide Seiten in der Höhe mittig, viel Luft, eine ruhige Linkzeile, Rechtszeile. Kein Raster aus Linkspalten (verboten), kein Wasserzeichen. */ .fuss { position: relative; overflow: hidden; background: var(--anthrazit); color: var(--hell-text); font-size: 15px; } .fuss a { color: inherit; text-decoration: none; } .fuss__buehne { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px 80px; align-items: center; padding-block: 120px; } .fuss__ruf { display: grid; justify-items: start; gap: 18px; } .fuss__notdienst { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid rgba(238, 107, 90, .45); border-radius: 999px; font: 500 15px/1.2 var(--f-titel); color: #fff; } .fuss__notdienst i { width: 9px; height: 9px; border-radius: 50%; background: var(--glut-hell); box-shadow: 0 0 0 5px rgba(238, 107, 90, .22); animation: puls 2.4s ease-in-out infinite; } .fuss__nummer { font: 600 clamp(44px, 5.8vw, 92px)/.95 var(--f-titel); letter-spacing: -.02em; white-space: nowrap; color: #fff; transition: color .2s var(--ease); } /* immer eine Zeile */ .fuss__nummer:hover { color: var(--eis); } .fuss__mail { display: inline-flex; align-items: center; gap: 12px; font: 500 clamp(18px, 1.6vw, 22px)/1.3 var(--f-titel); color: rgba(244, 244, 242, .86); } .fuss__mail .sym { width: 20px; height: 20px; transition: transform .2s var(--ease); } .fuss__mail:hover { color: #fff; } .fuss__mail:hover .sym { transform: translateX(4px); } .fuss__ort { display: grid; justify-items: start; gap: 14px; padding: 28px 30px; border: 1px solid var(--linie-dunkel); border-radius: 18px; background: var(--anthrazit-2); } .fuss__ort address { display: grid; font-style: normal; line-height: 1.55; color: rgba(244, 244, 242, .82); } /* Knopfpaar unter der Nummer, Symbole und E-Mail in der Karte nur auf dem Telefon (Variante F1) */ .fuss__ruf > .knopfpaar, .fuss__zeile--mail, .fuss__zeile .sym { display: none; } .fuss__ort b { font: 600 17px/1.3 var(--f-titel); color: #fff; } .fuss__ort p { color: rgba(244, 244, 242, .72); } .fuss__route { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.3 var(--f-titel); color: rgba(244, 244, 242, .86); } .fuss__route .sym { width: 17px; height: 17px; } .fuss__route:hover span { text-decoration: underline; text-underline-offset: 4px; } /* eine einzige Zeile, über die ganze Breite gleichmässig verteilt */ .fuss__wege { padding-block: 30px; } /* Trennlinien genau so breit wie der Inhalt, nicht bis in den Seitenrand */ .fuss__wege, .fuss__unten { position: relative; } .fuss__wege::before, .fuss__unten::before { content: ""; position: absolute; top: 0; inset-inline: var(--rand); border-top: 1px solid var(--linie-dunkel); } .fuss__seiten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; font: 500 16px/1.3 var(--f-titel); color: rgba(244, 244, 242, .86); } .fuss__seiten a:hover, .fuss__gebiet a:hover, .fuss__unten a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .fuss__gebiet { display: flex; align-items: flex-start; gap: 10px; max-width: 34em; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: rgba(244, 244, 242, .62); } .fuss__gebiet .sym { flex: none; width: 17px; height: 17px; margin-top: 2px; } .fuss__gebiet a { color: rgba(244, 244, 242, .9); } .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 30px; font-size: 13.5px; color: rgba(244, 244, 242, .56); } .fuss__unten p { display: flex; flex-wrap: wrap; gap: 4px 24px; } .fuss__ort .knopf__zusatz { display: none; } /* «Offerte» und «WhatsApp» nebeneinander */ /* /mkurti: Schriftbrücke ins CI von Civitas */ .mkp { --font-head: "Jost", system-ui, sans-serif; --font-body: "Figtree", system-ui, sans-serif; --font-head-weight: 600; } .mkp-recht { margin: 10px 0 0; font-size: 13px; } .mkp-recht a { color: var(--text-leise); } /* ---------------------------------------------------------------- Telefonmenü (Blatt) */ .blatt-grund { position: fixed; inset: 0; z-index: 90; background: rgba(43, 42, 40, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease); } .blatt-grund.ist-offen { opacity: 1; pointer-events: auto; } .blatt[hidden] { display: none; } .blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; background: var(--weiss); border-top: 3px solid var(--anthrazit); border-radius: 16px 16px 0 0; box-shadow: 0 -24px 60px rgba(43, 42, 40, .3); transform: translateY(101%); transition: transform 380ms var(--ease); } .blatt.wird-gezogen { transition: none; } .blatt.ist-offen { transform: none; } .blatt__griff { flex: none; width: 38px; height: 4px; border-radius: 2px; background: #c9cdd1; margin: 9px auto 0; } .blatt__kopf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px var(--rand) 12px; border-bottom: 1px solid var(--linie); } .blatt__titel { font: 600 13px/1 var(--f-titel); letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise); } .blatt-zu { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); cursor: pointer; } .blatt-zu .sym { width: 18px; height: 18px; } .blatt__rolle { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 var(--rand) calc(22px + env(safe-area-inset-bottom, 0px)); } .blatt__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; } .blatt__kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 11px 12px 12px; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); text-decoration: none; -webkit-tap-highlight-color: transparent; } .blatt__zeichen { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; background: var(--weiss); border-radius: 8px; color: var(--anthrazit); } .blatt__zeichen .sym { width: 18px; height: 18px; } .blatt__wort { font: 600 15px/1.2 var(--f-titel); } .blatt__unter { font-size: 12px; line-height: 1.3; color: var(--text-leise); } .blatt__kachel.ist-hier { border-color: var(--anthrazit); background: #ebebe8; } .blatt__kachel.ist-hier .blatt__zeichen { background: #fff; } .blatt__ruf { display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 0 15px; margin: 0 0 20px; background: var(--kaelte); border-radius: 10px; color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(46, 90, 136, .25); } .blatt__ruf .blatt__zeichen { width: 34px; height: 34px; margin: 0; flex: none; background: rgba(255, 255, 255, .16); color: #fff; } .blatt__ruf b { flex: 1 1 auto; color: #fff; font: 600 15px/1.2 var(--f-titel); letter-spacing: .02em; } .blatt__ruf > .sym { width: 17px; height: 17px; opacity: .85; } .blatt__gruppe { margin-bottom: 18px; } .blatt__gruppentitel { margin: 0 0 9px; font: 600 11.5px/1 var(--f-titel); letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise); } .blatt__reihen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .blatt__reihe { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 11px; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); text-decoration: none; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; } .blatt__reihe .sym { width: 16px; height: 16px; color: var(--stahl-dunkel); } .blatt__reihe--ruf .sym { color: var(--glut); } .blatt__reihe.ist-hier { border-color: var(--anthrazit); background: #ebebe8; } .blatt__reihe--breit, .blatt__reihen > :last-child:nth-child(odd) { grid-column: span 2; } @media (prefers-reduced-motion: reduce) { .blatt { transition: opacity 200ms ease; transform: none; opacity: 0; pointer-events: none; } .blatt.ist-offen { opacity: 1; pointer-events: auto; } } /* ---------------------------------------------------------------- Breiten */ @media (max-width: 1180px) { .kopf__nav { display: none; } .menue-knopf { display: inline-flex; } .kopf__innen > .kopf__knopf { margin-left: auto; } .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss__buehne { grid-template-columns: minmax(0, 1fr); align-items: start; } .fuss__nummer { font-size: clamp(44px, 7.4vw, 92px); } /* volle Breite, darum etwas grösser */ .fuss__ort { width: min(100%, 520px); } .leiste__mail { display: none; } } @media (max-width: 960px) { .split, .split--um, .projekt-gross, .kontakt { grid-template-columns: minmax(0, 1fr); } .split--um .split__text { order: 0; } .abschnitt__kopf { grid-template-columns: minmax(0, 1fr); } .projekte, .verweise--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .projekte > :last-child:nth-child(odd), .verweise--3 > :last-child:nth-child(odd) { grid-column: span 2; } .ablauf--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .ablauf::before { display: none; } .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band { grid-template-columns: minmax(0, 1fr); } .ansprech { grid-template-columns: 220px minmax(0, 1fr); } .ansprech__text { grid-column: 1 / -1; padding-bottom: 12px; } .ansprech__bild { min-height: 0; } /* Einstiege: eine Spalte, Text zuerst */ .held__flaeche, .held--spiegel .held__flaeche { grid-template-columns: minmax(0, 1fr); gap: 28px; } .held--spiegel .held__flaeche .held__text { order: 0; justify-self: start; } .held__karte { max-width: 460px; } .held--rahmen .held__innen, .held--ueber .held__innen, .held--ort .held__innen, .held--referenzen .held__innen, .held--kontakt .held__innen, .held--fakten .held__innen, .held--notdienst .held__innen { grid-template-columns: minmax(0, 1fr); gap: 32px; } .held--fakten.held--spiegel .held__innen { grid-template-columns: minmax(0, 1fr); } .held--rahmen.held--spiegel .held__figur, .held--ueber .held__figur, .held--fakten.held--spiegel .held__figur { order: 0; } .held--ort.held--spiegel .held__sprung { order: 0; } .held--rahmen .held__figur, .held--fakten .held__figur { aspect-ratio: 16 / 9; } .held--notdienst .held__figur { aspect-ratio: 16 / 9; } .held--ueber .held__figur { width: min(100%, 420px); } .held__sprung, .held__anruf { justify-self: start; } } @media (max-width: 960px) { .mosaik__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mosaik__haupt, .mosaik--4 .mosaik__haupt, .mosaik__foto { grid-column: 1 / -1; grid-row: auto; } .mosaik__foto { height: 260px; } .kacheln__kopf { grid-template-columns: minmax(0, 1fr); gap: 16px; } .kacheln__raster, .kacheln--4 .kacheln__raster, .kacheln--8 .kacheln__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fotokarte__innen, .fotokarte--um .fotokarte__innen, .fotokarte--viele .fotokarte__innen, .fotokarte--viele.fotokarte--um .fotokarte__innen { grid-template-columns: minmax(0, 1fr); } .reihe--8 .reihe__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fotokarte__foto, .fotokarte--um .fotokarte__foto { grid-column: 1; grid-row: 1; height: 320px; } .fotokarte__karte, .fotokarte--um .fotokarte__karte { grid-column: 1; grid-row: 2; margin: -70px 20px 0; } .reihe__raster, .reihe--5 .reihe__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .held__karte { display: none; } } @media (max-width: 760px) { :root { --kopf-h: 64px; --fuss-h: 64px; --text: 16px; } .leiste { display: none; } .reiter { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: calc(var(--fuss-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(244, 244, 242, .95); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid rgba(43, 42, 40, .12); } .reiter__punkt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--leisten-schrift); text-decoration: none; font: 500 11px/1 var(--f-text); letter-spacing: .04em; cursor: pointer; -webkit-tap-highlight-color: transparent; } .reiter__punkt .sym { width: 21px; height: 21px; } .reiter__punkt.ist-hier { color: var(--anthrazit); } .reiter__punkt.ist-hier::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 2px; background: currentColor; } .reiter__punkt--ruf { font-weight: 600; } .reiter__punkt--ruf .sym { color: var(--glut); } .kopf__logo { height: 30px; } .kopf__innen { gap: 12px; } .kopf__innen > .kopf__knopf { min-height: 42px; padding: 0 14px; font-size: 11.5px; letter-spacing: .1em; } .kopf__innen > .kopf__knopf .sym { display: none; } .menue-knopf { min-height: 42px; padding: 0 12px; } .menue-knopf span { display: none; } } @media (max-width: 620px) { /* Abstandsskala auf dem Telefon (Wunsch Besim): 10 in einer Box und in Foto- und Logorastern, 20 zwischen Boxen (--box), unter Titeln und zwischen Gruppen, 40 für Abschnitte. 30 war Besim zwischen den Boxen zu viel. boxen-pruefen.mjs meldet jeden anderen Wert über 10 px. */ :root { --sec: 40px; --rand: 18px; --m1: 10px; --m2: 20px; --box: 20px; --m3: 40px; } h1 { font-size: 30px; letter-spacing: -.015em; } h2 { font-size: 23px; } h3 { font-size: 17px; } .held__innen, .held--gross .held__innen { min-height: 0; padding-block: var(--m3); } .held__bild { object-position: 72% 50%; } .held::before { background: linear-gradient(180deg, rgba(43, 42, 40, .56) 0%, rgba(43, 42, 40, .78) 55%, rgba(43, 42, 40, .9) 100%); } .held__text { gap: var(--m2); } .held__vorspann { font-size: 16px; } .held__notdienst { font-size: 11px; letter-spacing: .1em; } .held--hell .held__innen { padding-block: var(--m3); } .knopfpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m1); } .knopfpaar > .knopf { min-width: 0; min-height: 48px; padding: 12px 10px; font-size: 11.5px; letter-spacing: .06em; gap: 7px; white-space: normal; text-align: center; line-height: 1.15; } .knopfpaar > .knopf .sym { width: 16px; height: 16px; } .knopfpaar .knopf__zusatz { display: none; } .abschnitt__kopf { margin-bottom: var(--m2); gap: var(--m1); } .abschnitt__text, .split__text p { font-size: 15.5px; } .karten { gap: var(--box); } .karte { padding: 16px 14px; gap: 6px; } .karte__oben { margin-bottom: 0; } .karte__sym { width: 20px; height: 20px; } .karte p { font-size: 13.5px; line-height: 1.45; overflow-wrap: break-word; } .karte h3 { font-size: 16px; overflow-wrap: break-word; hyphens: auto; } .karte__liste { display: none; } .karte__mehr { font-size: 11px; letter-spacing: .08em; } .split { gap: var(--m2); } .split__text { gap: var(--m1); } .punkte { column-gap: 14px; } .punkte li { padding: 12px 0; gap: 2px; } .punkte b { font-size: 15px; overflow-wrap: break-word; hyphens: auto; } .punkte span { font-size: 13.5px; line-height: 1.45; overflow-wrap: break-word; } /* Punkte-Abschnitte: Zweierreihen, kleiner gesetzt */ .mosaik { padding-block: var(--sec); } .mosaik__raster { gap: var(--box); } .mosaik__haupt { padding: 24px 18px; border-radius: var(--app-r); } .mosaik__foto { height: 190px; min-height: 0; border-radius: var(--app-r); } .mosaik__karte, .kachel { padding: 16px 14px; border-radius: var(--app-r); } .mosaik__karte .sym, .fotokarte__punkt .sym { width: 34px; height: 34px; padding: 7px; margin-bottom: var(--m1); } .mosaik h3, .kacheln h3, .fotokarte h3, .reihe h3 { font-size: 15.5px; white-space: normal; overflow-wrap: break-word; hyphens: auto; } .mosaik__karte p, .kachel p, .fotokarte__punkt p, .reihe__punkt p { font-size: 13.5px; line-height: 1.4; } .mosaik .logos, .kacheln .logos, .reihe .logos, .fotokarte .logos { margin-top: var(--m2); } .kacheln { margin: var(--m1); border-radius: 24px; padding-block: var(--m3); } .kacheln .rahmen { padding-inline: 16px; } .kacheln__kopf { margin-bottom: var(--m2); } .kacheln__text { margin-top: var(--m2); gap: var(--m1); } .kacheln__raster, .kacheln--4 .kacheln__raster, .kacheln--8 .kacheln__raster { gap: var(--box); } .kachel, .kacheln--4 .kachel, .kacheln--8 .kachel { grid-template-columns: minmax(0, 1fr); } .kachel .sym { grid-row: auto; width: 36px; height: 36px; padding: 8px; margin-bottom: var(--m1); } /* Foto oben in der Karte (Wunsch Besim, wirkt hochwertiger): ein einziges weisses Element statt Foto mit überlappender Karte */ .fotokarte .rahmen.fotokarte__innen { width: auto; margin-inline: var(--rand); padding: 0; overflow: hidden; border-radius: var(--app-r); background: #fff; box-shadow: var(--app-schatten); } .fotokarte__foto, .fotokarte--um .fotokarte__foto { height: 210px; border-radius: 0; } .fotokarte__karte, .fotokarte--um .fotokarte__karte { margin: 0; padding: var(--m2) 16px; border-radius: 0; box-shadow: none; } .fotokarte__punkte, .fotokarte--viele .fotokarte__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m2) var(--m1); } .reihe--8 .reihe__punkt { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .reihe--8 .reihe__rund { grid-row: auto; width: 60px; height: 60px; margin-bottom: 4px; } .fotokarte__punkt { grid-template-columns: minmax(0, 1fr); } .fotokarte__punkt .sym { grid-row: auto; } .reihe__kopf { margin-bottom: var(--m2); } .reihe__raster, .reihe--4 .reihe__raster, .reihe--5 .reihe__raster, .reihe--8 .reihe__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m2) var(--m1); } .reihe__rund { width: 60px; height: 60px; margin-bottom: 4px; } .reihe__rund .sym { width: 26px; height: 26px; } .logos { gap: var(--m1); } .logos__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m1); } .logos__liste li { height: 64px; padding: 12px; } .logos__wort { font-size: 15px; } .abschnitt--zahlen { margin: var(--m1); padding-block: var(--m3); border-radius: 24px; } .abschnitt--zahlen .rahmen { padding-inline: 18px; } .zahlen__titel { margin-bottom: var(--m2); } .zahlen { gap: var(--m2) var(--m1); } .zahl { gap: var(--m1); padding-top: var(--m1); } .zahl b { font-size: 40px; } .zahl span { font-size: 13.5px; line-height: 1.4; } .projekte { gap: var(--box); } .projekt, .projekte--kurz .projekt { padding: 16px 14px; gap: 8px; } .projekt__zahl { flex-direction: column; gap: 4px; padding-block: 2px 8px; } .projekt__zahl b { font-size: 40px; } .projekt__zahl span { font-size: 12.5px; } .projekt h3 { font-size: 16px; } .projekt__arbeit, .projekt > p:not([class]) { font-size: 13.5px; line-height: 1.45; } .projekt__ort { font-size: 13.5px; } .projekte:not(.projekte--kurz) { grid-template-columns: minmax(0, 1fr); } .projekte:not(.projekte--kurz) > :last-child:nth-child(odd) { grid-column: auto; } .projekte:not(.projekte--kurz) .projekt__zahl { flex-direction: row; align-items: baseline; gap: 10px; } .projekt-gross { gap: var(--m2); } .projekt-gross__zahl { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--m1); } .projekt-gross__zahl b { font-size: 92px; } .projekt-gross__zahl span { font-size: 15px; } .ablauf--5, .ablauf--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m2) var(--m1); } .ablauf--5 > :last-child { grid-column: span 2; } .ablauf--3 > :last-child { grid-column: span 2; } .schritt__nr { width: 36px; height: 36px; margin-bottom: 4px; font-size: 15px; } .schritt b { font-size: 15.5px; } .schritt p { font-size: 13.5px; line-height: 1.45; } .band__aktion { grid-template-columns: minmax(0, 1fr); justify-items: stretch; width: 100%; } .verweise, .verweise--2, .verweise--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m1); } .verweis { padding: 16px 14px 40px; gap: 4px; } .verweis b { font-size: 16px; overflow-wrap: break-word; hyphens: auto; } .verweis span { font-size: 13.5px; line-height: 1.45; } .verweis__pfeil { top: auto; bottom: 14px; left: 14px; right: auto; width: 18px; height: 18px; } .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m1); } .marken { gap: var(--m1); } .marken li { padding: 10px 14px; font-size: 14px; } .marken-zeile ul { font-size: 14.5px; } .marken-zeile li + li::before { margin: 0 7px; } .fragen { grid-template-columns: minmax(0, 1fr); gap: var(--m1); } .frage summary { padding: 16px; font-size: 15.5px; } .frage__antwort { font-size: 14.5px; line-height: 1.55; } .frage__antwort > * { padding: 0 16px; } .frage__antwort > :last-child { padding-bottom: 16px; } /* Ihr Ansprechpartner (Variante A4, Wunsch Besim 27.10.2026): oben das Angebot als weisse Karte, darunter die Person auf eisblauem Grund mit vier Kontaktkacheln. Die eisblaue Fläche ist .ansprech::before über Reihe 2 und 3, darum steht jedes Teil fest in seiner Zelle. */ .ansprech { grid-template-columns: 80px minmax(0, 1fr); gap: var(--m2) 0; padding: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; } .ansprech::before { content: ""; grid-row: 2 / 4; grid-column: 1 / -1; border-radius: var(--app-r); background: #e6edf2; } .ansprech__text { grid-row: 1; grid-column: 1 / -1; gap: var(--m1); padding: var(--m2) 16px; border-radius: var(--app-r); background: #fff; box-shadow: var(--app-schatten); } .ansprech__text p { font-size: 15px; } .ansprech__text .knopfpaar { margin-top: var(--m1); } .ansprech__bild { grid-row: 2; grid-column: 1; width: 64px; height: 64px; margin: var(--m2) 0 0 16px; align-self: start; border-radius: 18px; } .ansprech__wolf { width: 52%; } .ansprech__person { display: contents; } .ansprech__wer { grid-row: 2; grid-column: 2; align-self: center; gap: 4px; margin: var(--m2) 16px 0 var(--m1); } .ansprech__name { font-size: 19px; } .ansprech__rolle { font-size: 13.5px; line-height: 1.4; } .ansprech__tel, .ansprech__strasse, .ansprech__wege .ansprech__weg--notdienst { display: none; } .ansprech__wege { grid-row: 3; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m1); margin: 0 16px var(--m2); font-size: 12.5px; line-height: 1.35; } .ansprech__wege li, .ansprech__wege .ansprech__weg--tel { display: grid; } .ansprech__weg { display: grid; align-content: start; gap: 2px; padding: 14px 12px; border-radius: 16px; background: #fff; color: var(--text-leise); } .ansprech__wege a:hover { color: var(--text-leise); text-decoration: none; } .ansprech__weg span { overflow-wrap: anywhere; } .ansprech__wege .sym { width: 20px; height: 20px; margin: 0 0 8px; color: var(--kaelte); } .ansprech__weg--tel .sym { color: var(--glut); } .ansprech__wege .ansprech__titel, .ansprech__weg b { display: block; font: 600 15px/1.2 var(--f-titel); color: var(--anthrazit); } .formular { padding: var(--m2) 16px; gap: var(--m2); } .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m1); } .feld label { font-size: 13.5px; } .pflicht { display: block; margin: 2px 0 0; } .wahl span { min-height: 38px; padding: 0 12px; font-size: 14px; } .formular__fuss .knopf { width: 100%; } .wege__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--box); } .wege__liste a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; } .wege__liste span { font-size: 13.5px; } /* Fuss (Variante F1, Wunsch Besim 27.10.2026): Nummer gross, Anrufen und WhatsApp nebeneinander, Adresse, Bürozeiten und E-Mail als dunkle Karte, darunter die Seiten. E-Mail-Zeile, Gebiet, Leitsatz, Offerte und Route entfallen hier. */ .fuss { font-size: 14.5px; } .fuss__buehne { gap: var(--m2); padding-block: var(--m3) var(--m2); } .fuss__ruf { gap: var(--m2); } .fuss__notdienst { font-size: 13.5px; padding: 6px 12px 6px 10px; } .fuss__nummer { font-size: min(44px, 12.5vw); } .fuss__ruf > .knopfpaar { display: grid; width: 100%; } .fuss__mail, .fuss__gebiet, .fuss__slogan, .fuss__ort .knopfpaar, .fuss__route { display: none; } .fuss__ort { width: 100%; padding: var(--m2) 16px; gap: var(--m1); border-radius: var(--app-r); } .fuss__ort address { gap: var(--m1); } .fuss__ort address b { font-size: 16px; } .fuss__zeile, .fuss__zeile--mail { display: flex; align-items: flex-start; gap: var(--m1); color: rgba(244, 244, 242, .72); } .fuss__zeile .sym { display: block; flex: none; width: 17px; height: 17px; margin-top: 2px; color: rgba(244, 244, 242, .6); } .fuss__wege { padding-block: 0; } .fuss__wege::before { display: none; } .fuss__seiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--m1); width: 100%; font-size: 15px; } .fuss__seiten a { display: block; padding: 9px 0; } .fuss__unten { margin-top: var(--m2); font-size: .74rem; padding-block: var(--m2); } .recht table, .recht thead, .recht tbody, .recht tr, .recht th, .recht td { display: block; } .recht thead { display: none; } .recht tr { padding: 12px 0; border-bottom: 1px solid var(--linie); } .recht th, .recht td { border: 0; padding: 2px 0; } .recht td::before { content: attr(data-label) ": "; color: var(--text-leise); font-weight: 600; } /* Skala für alles, was die Bildschirmwerte sonst aufs Telefon mitbringt (boxen-pruefen.mjs) */ .held .held__innen { gap: var(--m2); } .held__fakten { margin-top: var(--m2); row-gap: var(--m1); } .held__figur { margin-bottom: var(--m2); } .held__leiste, .held__nummer, .held__anruf-kopf, .held__anruf-tel { gap: var(--m1); } .held__zeiten { gap: 8px var(--m1); } .held__anruf { gap: var(--m2); } .mosaik__haupt, .reihe__kopf, .fotokarte__karte, .band__text, .band__aktion, .projekt-gross__text { gap: var(--m1); } .mosaik__karte, .kachel, .fotokarte__punkt, .reihe--8 .reihe__punkt { column-gap: var(--m1); } /* Symbol über dem Titel, damit auch lange Titel wie «Unterdruckschweissen» auf eine Zeile passen */ .mosaik__karte { grid-template-columns: minmax(0, 1fr); } .mosaik__karte .sym { grid-row: auto; } .mosaik h3, .kacheln h3, .fotokarte h3, .reihe h3 { font-size: 15px; hyphens: manual; } .kacheln--4 .kachel .sym, .kacheln--8 .kachel .sym { margin-bottom: var(--m1); } .band, .kontakt, .wege { gap: var(--m2); } .wege__zeiten, .chat-start, .chat-start__kopf { gap: var(--m1); } .abschnitt__fuss { margin-top: var(--m2); } .fuss__mail { gap: var(--m1); } .fuss__unten { gap: var(--m1) var(--m2); } .fuss__unten p { gap: 4px var(--m2); } .laufband img { height: 96px; } } /* ---------------------------------------------------------------- Telefon wie eine App Designkonzept S. 9: alles auf dem hellen Grund, Inhalte als weisse, runde Karten mit Abstand, Einstieg und dunkle Bänder als eingerückte Karten, runde Knöpfe im Kopf, Unterseiten mit Zurück-Knopf und Titel. Rot bleibt Anruf, Notdienst und Ziffern vorbehalten. */ @media (max-width: 760px) { .hat-js .chat-start { display: grid; gap: 10px; padding: 18px 16px; background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(43, 42, 40, .05), 0 8px 24px rgba(43, 42, 40, .07); } .hat-js #anfrage { display: none; } .chat-start__kopf { display: flex; align-items: center; gap: 10px; } .chat-start__kopf p { display: grid; gap: 2px; } .chat-start__kopf b { font: 600 17px/1.2 var(--f-titel); } .chat-start__kopf span { font-size: 14px; line-height: 1.4; color: var(--text-leise); } .chat-start__frage { font: 600 15px/1.3 var(--f-titel); } .chat-start .chip { min-height: 42px; padding: 0 14px; font-size: 14.5px; background: var(--weiss); } } @media (max-width: 620px) { :root { --app-r: 20px; --app-schatten: 0 1px 2px rgba(43, 42, 40, .05), 0 8px 24px rgba(43, 42, 40, .07); --rand: 16px; } /* Kopf: Logo oder Zurück und Titel, runder Menüknopf; die Offerte steht unten in der Reiterleiste */ .kopf { border-bottom: 0; } .kopf__innen { position: relative; } .kopf__innen > .kopf__knopf { display: none; } .menue-knopf, .kopf__zurueck { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--anthrazit); box-shadow: 0 1px 2px rgba(43, 42, 40, .08), 0 4px 14px rgba(43, 42, 40, .08); } .menue-knopf { margin-left: auto; } .kopf__zurueck { display: grid; place-items: center; flex: none; } .kopf__zurueck .sym { width: 20px; height: 20px; } /* Unterseiten: Logo in der Mitte zwischen Zurück und Menü (Wunsch Besim); nur /kontakt schlicht mit Titel */ .kopf--unterseite .kopf__marke { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .kopf--schlicht .kopf__marke { display: none; } .kopf--schlicht .kopf__titel { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 var(--f-titel); color: var(--anthrazit); } .krumen { display: none; } /* Einstieg als eingerückte, runde Karte */ .held--bild, .held--fakten, .held--notdienst { margin: 4px 12px 0; border-radius: 24px; } .held--bild .held__innen, .held--fakten .held__innen, .held--notdienst .held__innen { padding: 34px 18px 22px; } .held--hell { background: transparent; border-bottom: 0; } .held--hell .held__innen { padding-block: 20px 8px; } /* Startseite (Variante H2, Wunsch Besim 27.10.2026): Das Video über die volle Breite trägt nur den Titel. Text, Knöpfe und Fakten stehen in einer weissen Karte darunter, nicht im Video. Zusammen höchstens eine Telefonhöhe (375 x 812 mit Kopf und Reiterleiste). Die Karte ist .held__innen::before über Reihe 2 bis 4, darum steht jedes Teil fest in seiner Reihe. */ /* Video eingerückt wie die Karte darunter: 12 px links, rechts und oben, rundum 24 px Ecken (Wunsch Besim) */ .held--gross { --video-h: 300px; margin: 0; padding-top: 12px; overflow: visible; border-radius: 0; background: transparent; color: var(--tinte); } .held--gross .held__bild, .held--gross .held__video, .held--gross::before { inset: 12px auto auto 12px; width: calc(100% - 24px); height: var(--video-h); border-radius: 24px; } .held--gross::before { background: linear-gradient(180deg, rgba(43, 42, 40, .1) 30%, rgba(43, 42, 40, .82) 100%); } .held--gross::after { display: none; } .held--gross .held__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; } .held--gross .held__text { display: contents; } .held--gross h1 { grid-row: 1; grid-column: 1; display: grid; align-content: end; min-height: var(--video-h); margin: 0 12px; padding: 20px 16px; font-size: 27px; line-height: 1.15; } .held--gross .held__innen::before { content: ""; grid-row: 2 / 5; grid-column: 1; align-self: stretch; margin: var(--m2) 12px 0; border-radius: 24px; background: #fff; box-shadow: var(--app-schatten); } .held--gross .held__vorspann { grid-row: 2; grid-column: 1; margin: var(--m3) 28px 0; font-size: 15px; line-height: 1.5; color: var(--text-leise); } .held--gross .held__text > .knopfpaar { grid-row: 3; grid-column: 1; margin: var(--m2) 28px 0; } .held--gross .knopf--rahmen.knopf--hell { border-color: var(--anthrazit); color: var(--anthrazit); } .held--gross .held__fakten { display: none; } .held--gross .held__kurz { grid-row: 4; grid-column: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m1); margin: var(--m2) 28px var(--m2); padding-top: var(--m2); border-top: 1px solid var(--linie); text-align: center; } .held__kurz li { display: grid; gap: 2px; } .held__kurz b { font: 600 15px/1.2 var(--f-titel); color: var(--anthrazit); } .held__kurz span { font-size: 11.5px; line-height: 1.3; color: var(--text-leise); } /* Varianten auf dem Telefon: Text zuerst, Bild klein, Fakten in Zweier- und Dreierreihen */ .held--karte { padding: 4px 0 0; } .held--karte .rahmen { padding-inline: 12px; } .held__flaeche { min-height: 0; padding: 112px 18px 24px; border-radius: 24px; } .held__flaeche::before, .held--spiegel .held__flaeche::before { background: linear-gradient(180deg, rgba(43, 42, 40, .6) 0%, rgba(43, 42, 40, .82) 55%, rgba(43, 42, 40, .92) 100%); } .held--kaelte .held__flaeche::before { background: linear-gradient(180deg, rgba(36, 74, 114, .62) 0%, rgba(36, 74, 114, .84) 55%, rgba(31, 58, 88, .94) 100%); } .held__fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--m2); row-gap: var(--m1); } .held__fakten li { padding: 14px 10px 0 0; } .held__fakten b { font-size: 17px; } .held__fakten span { font-size: 13px; } .held__leiste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m1); padding-top: 16px; } .held__leiste b { font-size: 16px; } .held__leiste span { font-size: 12.5px; line-height: 1.35; } .held--rahmen .held__figur, .held--rahmen.held--spiegel .held__figur, .held--fakten .held__figur { aspect-ratio: 16 / 9; margin: 0; } .held--rahmen .held__figur::before, .held__marke { display: none; } .held--notdienst .held__figur { display: none; } .held__nummer { font-size: 36px; gap: var(--m1); } .held__zeiten { gap: 6px var(--m1); font-size: 14px; } .held__orte li { min-height: 32px; font-size: 13.5px; } .held__sprung { padding: 4px 14px; } .held__sprung .held__foto, .held__sprung-titel { display: none; } .held__sprung a { font-size: 15px; padding: 12px 0; } .held__kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .held__kacheln a { grid-template-columns: 1fr; grid-template-rows: none; gap: 4px; padding: 14px 12px; border-radius: var(--app-r); } .held__kacheln b { grid-row: auto; font-size: 30px; } .held__kacheln span { font-size: 13px; } .held__kacheln .held__kachel-ort { font-size: 12.5px; } .held--ueber .held__figur { order: 1; width: 100%; aspect-ratio: 4 / 3; max-height: none; } .held--ueber .held__foto { object-position: 50% 18%; } .held__schild { right: 12px; bottom: 12px; padding: 10px 14px; } .held__fakten--hell { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4px; } .held__fakten--hell b { font-size: 22px; } .held__anruf { padding: 18px 16px; border-radius: var(--app-r); box-shadow: var(--app-schatten); } .held__anruf-tel { font-size: 26px; } /* Ein Grund für alles, Abschnitte trennen sich durch Abstand statt durch Flächen und Linien */ .abschnitt--hell, .abschnitt--weiss, .abschnitt--abschluss, .bildstreifen { background: transparent; } .abschnitt--hell + .abschnitt--hell, .abschnitt--weiss + .abschnitt--weiss, .abschnitt--abschluss { border-top: 0; } .abschnitt--band, .abschnitt--dunkel { margin: var(--m1); border-radius: 24px; } .abschnitt--band .rahmen, .abschnitt--dunkel .rahmen { padding-inline: 18px; } /* Karten: weiss, rund, ohne Rahmen, mit weichem Schatten */ .karte, .projekt, .projekte--kurz .projekt, .wege__liste a { border: 0; border-radius: var(--app-r); background: #fff; box-shadow: var(--app-schatten); } .karte:hover { transform: none; box-shadow: var(--app-schatten); } .abschnitt--dunkel .projekt { background: var(--anthrazit-2); box-shadow: none; } .karte { padding: 16px 15px; } .punkte { gap: 8px; } .punkte li, .punkte li:nth-last-child(-n+2) { padding: 13px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--app-schatten); } .abschnitt--dunkel .punkte li { background: var(--anthrazit-2); box-shadow: none; } /* Verweise als gruppierte Liste mit Pfeil, wie die Unterleistungen im Konzept */ .verweise, .verweise--2, .verweise--3 { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; background: #fff; border-radius: var(--app-r); box-shadow: var(--app-schatten); } .verweise > :last-child:nth-child(odd) { grid-column: auto; } .verweis { padding: 15px 48px 15px 16px; gap: 2px; border: 0; border-radius: 0; background: transparent; } .verweis + .verweis { border-top: 1px solid var(--linie); } .verweis:hover { background: var(--weiss); } .verweis__pfeil { top: 50%; bottom: auto; left: auto; right: 16px; transform: translateY(-50%); } .verweis:hover .verweis__pfeil { transform: translate(4px, -50%); } /* Fragen als Einzelkarten (Variante Q2): weiss auf dem hellen Grund, das Zeichen hell */ .frage { background: #fff; box-shadow: var(--app-schatten); } .frage__zeichen { background: var(--weiss); } /* Knöpfe, Bilder, Formularteile runder */ .knopf, .knopfpaar > .knopf { border-radius: 14px; } .galerie__foto img { border-radius: 14px; } .split__bild img, .bildstreifen img { border-radius: var(--app-r); } .formular { border: 0; border-radius: var(--app-r); box-shadow: var(--app-schatten); } .feld input, .feld textarea { border-radius: 12px; } .marken li { border: 0; box-shadow: var(--app-schatten); } /* Fusszeile mit runden Ecken, Reiterleiste hell mit Markierung hinter dem Symbol */ .fuss { margin-top: var(--m1); border-radius: 24px 24px 0 0; } .reiter { background: rgba(255, 255, 255, .95); border-top: 0; box-shadow: 0 -1px 0 rgba(43, 42, 40, .06), 0 -8px 24px rgba(43, 42, 40, .06); } .reiter__punkt.ist-hier::before { display: none; } .reiter__punkt .sym { width: 48px; height: 28px; padding: 3px 13px; border-radius: 999px; transition: background-color .2s var(--ease); } .reiter__punkt.ist-hier .sym { background: #ebebe8; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }