/* Bau- & Heimwerkerdienste Muschler – Waldgrün, Ziegel, Creme; Oswald (Überschriften) + Lora (Text) */
:root {
  --gruen: #1b3229; --gruen-mittel: #274a38; --gruen-akzent: #366b4e; --gruen-blass: #c5dbd0; --gruen-hauch: #e8f2ec;
  --ziegel: #9e522b; --ziegel-hell: #d98257; --gold: #f6b51b;
  --creme: #f4f0e7; --creme-mittel: #ece6d8; --creme-dunkel: #ddd5c4; --weiss: #faf8f3;
  --tinte: #111812; --tinte-weich: #2c3a2e; --stein: #56665a;
  --display: "Oswald", Impact, "Arial Narrow", sans-serif;
  --text: "Lora", Georgia, serif;
  --radius: 4px;
  --schatten: 0 1px 2px rgb(17 24 18 / .06), 0 14px 32px -18px rgb(17 24 18 / .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--weiss); color: var(--tinte-weich); font: 400 1.09rem/1.75 var(--text); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ziegel); text-underline-offset: .18em; }
a:hover { color: var(--gruen); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.08; color: var(--gruen); margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 8.4vw, 5rem); font-weight: 700; hyphens: auto; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
p, li, .lead { text-wrap: pretty; }   /* keine einzelnen Wörter allein in der letzten Zeile */
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem 1rem; }
.ueber { font-family: var(--display); font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ziegel); display: flex; align-items: center; gap: .8rem; margin: 0 0 .9rem; }
.ueber::before { content: ""; width: 2.2rem; height: 2px; background: currentColor; }
.lead { font-size: 1.2rem; font-style: italic; color: var(--stein); max-width: 44rem; }
.mitte { text-align: center; }
.block { padding-block: clamp(3.5rem, 8vw, 6rem); }
.kopfzeile { max-width: 48rem; margin-bottom: 2.4rem; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .8rem 1.6rem; border-radius: var(--radius);
  font: 500 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.btn-ziegel, .btn-rot { background: var(--ziegel); color: #fff; }
.btn-ziegel:hover, .btn-rot:hover { background: #b25f35; color: #fff; }
.btn-hell, .btn-glas { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.btn-hell:hover, .btn-glas:hover { border-color: var(--gruen-blass); color: #fff; }
.btn-rand { background: transparent; color: var(--gruen); border-color: var(--gruen); }
.btn-rand:hover { background: var(--gruen); color: #fff; }
.voll { width: 100%; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: rgb(27 50 41 / .97); backdrop-filter: blur(6px); border-bottom: 1px solid rgb(255 255 255 / .08); }
.kopf-in { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 76px; }
.logo { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: #fff; }
.logo-mark { width: 48px; height: 48px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
.logo-txt { font: 500 .74rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-blass); }
.logo-txt strong { display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: .06em; line-height: 1.05; color: #fff; }
#nav { display: flex; align-items: center; gap: .3rem; }
#nav a:not(.btn) { color: #e6efe9; text-decoration: none; font: 500 .85rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: .75rem .8rem; border-bottom: 2px solid transparent; }
#nav a:not(.btn):hover, #nav a[aria-current] { color: #fff; border-bottom-color: var(--ziegel-hell); }
.nav-cta { margin-left: .6rem; min-height: 44px; padding: .6rem 1.1rem; }
.menu-btn { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: #fff; }
.menu-btn .i { width: 30px; height: 30px; }
.menu-zu { display: none; }
@media (max-width: 960px) {
  .menu-btn { display: block; }
  #nav[popover] { position: fixed; inset: 0 0 auto auto; height: 100dvh; width: min(340px, 88vw); margin: 0; border: 0; padding: 4.8rem 1.4rem 1.4rem;
    background: var(--gruen); flex-direction: column; align-items: stretch; gap: .2rem; box-shadow: -12px 0 40px rgb(0 0 0 / .4); }
  #nav[popover]:not(:popover-open) { display: none; }
  #nav a:not(.btn) { font-size: 1.05rem; padding: 1rem .4rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .nav-cta { margin: 1rem 0 0; }
  .menu-zu { display: block; position: absolute; top: 1rem; right: 1rem; }
  #nav::backdrop { background: rgb(0 0 0 / .45); }
}
@media (min-width: 961px) { #nav[popover] { all: unset; display: flex; align-items: center; gap: .3rem; } }
@media (max-width: 420px) { .logo-mark { width: 42px; height: 42px; } .logo-txt { font-size: .62rem; } .logo-txt strong { font-size: 1.2rem; } }

/* Startseite: das Schild auf Holz und Ziegel wie auf Florians Logo, darunter der Einstieg auf Grün */
.hero { overflow: hidden; background: url(baustelle.webp) 50% 35% / cover, #8a7a68; box-shadow: inset 0 -30px 40px -30px rgb(0 0 0 / .45); }
.hero-in { min-height: clamp(260px, 42vw, 540px); display: grid; place-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero-schild { display: block; width: min(940px, 108%); max-width: none; height: auto; }   /* image has a shadow margin of ~4 % each side */
.intro { background: var(--gruen); color: #e6efe9; }
.intro-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: end; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 860px) { .intro-in { grid-template-columns: 1fr; } }
.intro .tag { font: 500 .82rem/1.4 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--ziegel-hell); display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.intro-titel { color: #fff; font-size: clamp(2rem, 6vw, 3.8rem); font-weight: 700; margin: 0 0 1rem; hyphens: manual; }
.intro-titel em { font-style: normal; color: var(--ziegel-hell); }
.intro .lead { color: var(--gruen-blass); margin-bottom: 1.6rem; }
.motto { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; font: 500 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0; }
.motto::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.hero-btns { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Über uns + Kontaktkarte */
.zwei { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; } }
.haken-liste { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .6rem; }
.haken-liste li { display: flex; gap: .7rem; align-items: flex-start; }
.haken-liste .i { color: var(--gruen-akzent); margin-top: .3rem; }
.haken-liste.spalten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.kontaktkarte, .seitenkasten { background: var(--gruen-mittel); color: #e6efe9; border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--schatten); border-top: 4px solid var(--ziegel); position: sticky; top: 100px; }
.kontaktkarte h2, .kontaktkarte h3, .seitenkasten h2 { color: #fff; font-size: 1.15rem; letter-spacing: .14em; }
.kontaktkarte ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .8rem; }
.kontaktkarte li { display: flex; gap: .75rem; align-items: flex-start; }
.kontaktkarte .i { color: var(--ziegel-hell); margin-top: .35rem; }
.kontaktkarte a:not(.btn), .seitenkasten a:not(.btn) { color: #fff; }
.seitenkasten p { color: var(--gruen-blass); }
.seitenkasten .btn + .btn { margin-top: .7rem; }
.seitenkasten .btn-rand { color: #fff; border-color: rgb(255 255 255 / .35); }
.seitenkasten .btn-rand:hover { background: rgb(255 255 255 / .08); }
.hinweis { background: #f7ece4; border-left: 4px solid var(--ziegel); padding: 1.2rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .98rem; margin: 2rem 0; }
.hinweis strong:first-child { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ziegel); display: block; margin-bottom: .4rem; font-size: .85rem; }

/* Leistungen */
.band { background: linear-gradient(90deg, rgb(20 38 30 / .95) 45%, rgb(20 38 30 / .62)), url(ziegel.webp) center / 900px, var(--gruen); color: #e6efe9; }
.band h2 { color: #fff; }
.band .lead { color: var(--gruen-blass); }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.2rem; }
.karte { display: grid; align-content: start; gap: .6rem; padding: 1.8rem; background: var(--creme); border-radius: var(--radius); text-decoration: none; color: var(--tinte-weich);
  border-bottom: 4px solid transparent; transition: transform .25s, border-color .25s, box-shadow .25s; box-shadow: var(--schatten); }
.karte:hover { transform: translateY(-4px); border-bottom-color: var(--ziegel); color: var(--tinte-weich); }
.karte-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--gruen); color: var(--gold); display: grid; place-items: center; margin-bottom: .4rem; }
.karte-icon .i { width: 28px; height: 28px; }
.karte h2, .karte h3 { font-size: 1.45rem; margin: 0; }
.karte p { margin: 0; color: var(--stein); }
.mehr { display: inline-flex; align-items: center; gap: .45rem; font: 500 .82rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ziegel); margin-top: .6rem; }
.karte img { border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; margin: -.4rem 0 .6rem; }

/* Unterseiten */
.seitenkopf { background: linear-gradient(90deg, rgb(20 38 30 / .97) 38%, rgb(20 38 30 / .25) 85%), url(kulisse.webp) 45% 25% / auto max(170%, 110vw * 1100 / 2400), var(--gruen); color: #e6efe9; padding-block: clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.seitenkopf h1 { color: #fff; font-size: clamp(2.3rem, 6vw, 4rem); }
.seitenkopf .lead { color: var(--gruen-blass); }
.seitenkopf .ueber { color: var(--ziegel-hell); }
.seitenkopf.mit-bild { padding: 0; display: grid; }
.seitenkopf.mit-bild > img { grid-area: 1 / 1; width: 100%; height: 100%; max-height: 420px; object-fit: cover; opacity: .35; }
.seitenkopf.mit-bild > .wrap { grid-area: 1 / 1; padding-block: clamp(3rem, 7vw, 5rem); position: relative; }
.krumen { font: 500 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-blass); margin-bottom: 1.4rem; }
.krumen a { color: var(--ziegel-hell); text-decoration: none; }
.gross-text { font-size: 1.12rem; }
.angebot { background: var(--creme); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-top: 2rem; }
.angebot h2 { font-size: 1rem; letter-spacing: .2em; color: var(--ziegel); }
.angebot .haken-liste { margin: 0; }
.klein-titel { font-size: 1.1rem; letter-spacing: .18em; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chips a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid var(--creme-dunkel); border-radius: 999px; text-decoration: none; color: var(--gruen);
  font: 500 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.chips a:hover { border-color: var(--ziegel); color: var(--ziegel); }

/* Kontakt */
.kontaktwege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.kontaktwege > * { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; background: var(--creme); border-radius: var(--radius); text-decoration: none; color: var(--tinte-weich); border-bottom: 4px solid transparent; }
.kontaktwege a:hover { border-bottom-color: var(--ziegel); color: var(--tinte-weich); }
.kontaktwege .i { width: 30px; height: 30px; color: var(--ziegel); }
.kontaktwege small { display: block; font: 500 .78rem/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ziegel); margin-bottom: .2rem; }
.kontaktwege span { overflow-wrap: anywhere; }

/* Texte (Impressum, Datenschutz, eigene Seiten) */
.text { max-width: 820px; }
.inhalt-text h2 { font-size: 1.7rem; margin-top: 2.4rem; }
.inhalt-text h2:first-child { margin-top: 0; }
.inhalt-text h3 { margin-top: 1.6rem; font-size: 1.2rem; }
.inhalt-text ul, .inhalt-text ol { padding-left: 1.3rem; margin: 0 0 1em; }
.inhalt-text blockquote { margin: 1.5rem 0; padding: .4rem 0 .4rem 1.2rem; border-left: 4px solid var(--ziegel); font-style: italic; }
.inhalt-text img { border-radius: var(--radius); margin: 1.5rem 0; }
.fussnote { font-size: .85rem; color: var(--stein); margin-top: 2rem; }

/* Galerie + Großansicht */
.galerie { columns: 4 240px; column-gap: .9rem; }
.galerie a { display: block; margin-bottom: .9rem; border-radius: var(--radius); overflow: hidden; break-inside: avoid; background: var(--creme-mittel); }
.galerie img { width: 100%; transition: transform .4s; }
.galerie a:hover img { transform: scale(1.04); }
.galerie.mini { columns: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.galerie.mini a { margin: 0; aspect-ratio: 1; }
.galerie.mini img { height: 100%; object-fit: cover; }
@media (max-width: 700px) { .galerie.mini { grid-template-columns: repeat(2, 1fr); } }
.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; background: rgb(12 20 16 / .95); }
.lightbox::backdrop { background: transparent; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; padding: 3.5rem 1rem; }
.lightbox button { position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0; border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; }
.lightbox button:hover { background: rgb(255 255 255 / .25); }
.lb-zu { top: 1rem; right: 1rem; } .lb-zurueck { left: 1rem; top: 50%; translate: 0 -50%; } .lb-vor { right: 1rem; top: 50%; translate: 0 -50%; }
.preisgruppe { background: var(--creme); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.5rem); }
.preisgruppe dl div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px dashed var(--creme-dunkel); }
.preisgruppe dd { margin: 0; font-weight: 700; white-space: nowrap; color: var(--gruen); }
.partner { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .9rem; }
.partner a, .partner span { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem; background: var(--creme); border-radius: var(--radius); text-decoration: none; color: var(--tinte-weich); }

/* Aufruf + Fuß */
.cta { background: linear-gradient(90deg, rgb(20 38 30 / .94) 30%, rgb(20 38 30 / .55)), url(ziegel.webp) center / 900px, var(--gruen-mittel); color: #e6efe9; }
.cta-in { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; padding-block: clamp(3rem, 7vw, 4.5rem); }
.cta h2 { color: #fff; margin-bottom: .4rem; }
.cta p { color: var(--gruen-blass); margin: 0; max-width: 40rem; }
.cta .ueber { color: var(--ziegel-hell); }
.cta-btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.fuss { background: linear-gradient(#101d17, #101d17) 0 10px / 100% 100% no-repeat, url(ziegel.webp) 0 0 / 450px; background-color: #101d17; color: #b9c9bf; padding-block: 3.5rem 0; font-size: .95rem; }
.fuss-in { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 2.5rem 4rem; align-items: start; }
@media (max-width: 960px) { .fuss-in { grid-template-columns: 1fr 1fr; } .fuss-firma { grid-column: 1 / -1; } }
@media (max-width: 600px) { .fuss-in { grid-template-columns: 1fr; } }
.fuss-schild { width: 100%; max-width: 300px; margin: -.6rem 0 1.2rem -.5rem; }   /* image carries its own shadow margin */
.fuss-firma p { margin: 0; line-height: 1.6; }
.fuss .klein-titel { font: 500 .8rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ziegel-hell); margin: 0 0 1rem; }
.fuss nav, .fuss-kontakt { display: grid; gap: .55rem; align-content: start; }
.fuss-kontakt a { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.fuss-kontakt .i { color: var(--ziegel-hell); }
@media (max-width: 420px) { .fuss-kontakt a { white-space: normal; overflow-wrap: anywhere; } }
.fuss a { color: #e6efe9; text-decoration: none; }
.fuss a:hover { color: var(--gold); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 3rem; padding-block: 1.4rem; border-top: 1px solid rgb(255 255 255 / .1); font-size: .85rem; color: #7f9286; }
.fuss-unten span { white-space: nowrap; }
.fuss-unten nav { display: flex; gap: 1.5rem; }
.mobil-leiste { display: none; }
@media (max-width: 700px) {
  .fuss { padding-bottom: 5.5rem; }
  .mobil-leiste { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: fixed; inset: auto .8rem calc(.8rem + env(safe-area-inset-bottom, 0px)); z-index: 40; }
  .mobil-leiste a { display: flex; justify-content: center; align-items: center; gap: .5em; padding: .95rem; border-radius: var(--radius); background: var(--ziegel); color: #fff;
    font: 500 .9rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 30px -6px rgb(0 0 0 / .45); }
  .mobil-leiste a + a { background: var(--gruen); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Kontakt + eigene Seiten */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .kontakt-raster { grid-template-columns: 1fr; } }
.kontakt-haupt { display: grid; gap: 1.2rem; }
.anruf, .mail { background: var(--creme); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.2rem); }
.anruf { border-left: 5px solid var(--ziegel); }
.klein-titel { font: 500 .82rem/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ziegel); margin: 0 0 .7rem; }
.anruf-nr { display: inline-block; font: 600 clamp(2.2rem, 7vw, 3.4rem)/1.05 var(--display); letter-spacing: .03em; color: var(--gruen); text-decoration: none; white-space: nowrap; margin-bottom: .8rem; }
.anruf-nr:hover { color: var(--ziegel); }
.anruf p:not(.klein-titel), .mail p:not(.klein-titel) { color: var(--stein); max-width: 34rem; }
.anruf-btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.mail-adr { font: 500 clamp(.82rem, 3.9vw, 1.35rem)/1.3 var(--display); letter-spacing: .02em; color: var(--gruen) !important; white-space: nowrap; margin-bottom: .6rem; }
@media (max-width: 340px) { .mail-adr { white-space: normal; overflow-wrap: anywhere; } }
.visitenkarte { position: sticky; top: 100px; background: var(--gruen); color: #e6efe9; border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--schatten); border-top: 4px solid var(--ziegel); }
.visitenkarte img { width: 64px; height: 64px; margin-bottom: 1rem; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
.vk-name { font: 600 1.6rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: #fff; margin: 0 0 .3rem; }
.vk-firma { font-style: italic; color: var(--gruen-blass); margin: 0 0 1.2rem; }
.visitenkarte ul { list-style: none; padding: 1.2rem 0 0; margin: 0; display: grid; gap: .8rem; border-top: 1px solid rgb(255 255 255 / .12); }
.visitenkarte li { display: flex; gap: .75rem; align-items: flex-start; }
.visitenkarte .i { color: var(--ziegel-hell); margin-top: .35rem; }
.visitenkarte a { color: #fff; }
.schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.2rem; counter-reset: s; }
.schritte li { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); border-radius: var(--radius); padding: 1.6rem; }
.schritte span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ziegel); color: #fff; font: 600 1.2rem/1 var(--display); margin-bottom: 1rem; }
.schritte h3 { color: #fff; font-size: 1.25rem; }
.schritte p { color: var(--gruen-blass); margin: 0; }
.werte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.werte-block { background: var(--creme); }
.werte li { display: flex; gap: .8rem; align-items: flex-start; background: var(--weiss); border-bottom: 4px solid var(--ziegel); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--schatten); }
.werte .i { color: var(--gruen-akzent); width: 1.4em; height: 1.4em; margin-top: .1rem; }
.inhalt-text.gross-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 700px) { .seitenkopf { background: linear-gradient(rgb(20 38 30 / .9), rgb(20 38 30 / .78)), url(kulisse.webp) 45% 25% / auto 100%, var(--gruen); } }

/* 5 (oder 4) Leistungen: volle Reihen statt einer Lücke */
@media (min-width: 1000px) {
  .karten { grid-template-columns: repeat(6, 1fr); }
  .karten > * { grid-column: span 2; }
  .karten > :nth-child(4):nth-last-child(2), .karten > :nth-child(5):last-child { grid-column: span 3; }
  .karten > :first-child:nth-last-child(4), .karten > :first-child:nth-last-child(4) ~ * { grid-column: span 3; }
}
.chips-block { padding-top: 0; }

/* 404: Fliesenwand mit einer fehlenden Fliese – dahinter schaut die Ziegelwand raus */
.f404-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 8vw, 5.5rem); }
.fliesen { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; background: #d9d3c6; border-radius: var(--radius); max-width: 420px; width: 100%; justify-self: center; }
.fliesen span { aspect-ratio: 1; border-radius: 2px; background: linear-gradient(135deg, #fbfaf6, #e9e5db); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05); }
.fliesen .weg { background: url(ziegel.webp) center / 220% auto, var(--ziegel); box-shadow: inset 0 3px 8px rgb(0 0 0 / .45); color: transparent; }
.fliesen .lose { position: absolute; width: calc(25% - 6px); right: -10%; bottom: -14%; rotate: 17deg; display: grid; place-items: center;
  font: 600 clamp(1.4rem, 4vw, 2rem)/1 var(--display); color: var(--gruen); box-shadow: 0 12px 20px -8px rgb(0 0 0 / .45); }
@media (max-width: 760px) { .f404-in { grid-template-columns: 1fr; } .fliesen { max-width: 300px; } }