/* handwerksdigitalisierer.de · Gestaltung nach Marke/marke_hd.json (Vorschlag 0.1, 15.11.2026) */
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-var.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
:root {
  --navy: #000247; --tuerkis: #1FC7A8; --tuerkis-text: #0A6E60; --grund: #F5F7F9; --karte: #FFFFFF; --flaeche: #E9EEF2;
  --linie: #DCE3E8; --text: #14161F; --grau: #4F5662; --r: 8px; --takt: cubic-bezier(.2,.7,.1,1);
  --kopf: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --koerper: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font: 17px/1.6 var(--koerper); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--kopf); color: var(--navy); margin: 0 0 .5em; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; font-weight: 750; letter-spacing: -.035em; }
h2 { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.08; font-weight: 700; }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 2px; }
.innen { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.schmal { max-width: 800px; }
.springen { position: absolute; left: -9999px; } .springen:focus { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.marke { text-decoration: none; color: var(--navy); line-height: 1.05; }
.marke b { font: 800 19px var(--kopf); letter-spacing: -.02em; }
.marke b span { font-weight: 400; }
.marke b::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tuerkis); margin-right: 7px; vertical-align: 1px; }
.marke small { display: block; font-size: 12px; color: var(--grau); margin: 3px 0 0 17px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a { font: 600 15px var(--kopf); text-decoration: none; padding: 6px 0; background: linear-gradient(var(--tuerkis), var(--tuerkis)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--takt); }
.nav a:hover, .nav a[aria-current] { background-size: 100% 2px; }
.nav .knopf { padding: 0 18px; min-height: 42px; background-size: auto; }
.menue-schalter { position: absolute; left: -9999px; }
.menue-knopf { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--linie); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; width: 20px; height: 2px; background: var(--navy); position: relative; transition: transform .25s; }
.menue-knopf span::before, .menue-knopf span::after { content: ''; position: absolute; left: 0; }
.menue-knopf span::before { top: -6px; } .menue-knopf span::after { top: 6px; }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knoepfe.mitte { justify-content: center; }
.knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--tuerkis); color: var(--navy); font: 700 16px var(--kopf); text-decoration: none; transition: transform .35s var(--takt), box-shadow .35s; }
.knopf::after { content: '→'; transition: transform .35s var(--takt); }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--tuerkis) 40%, transparent); }
.knopf:hover::after { transform: translateX(4px); }
.knopf.zweit { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy); }
.knopf.zweit:hover { box-shadow: inset 0 0 0 1.5px var(--navy), 0 10px 24px rgba(0,2,71,.12); }
.nav .knopf::after { content: none; }
.pfeil-link { font: 700 16px var(--kopf); color: var(--tuerkis); text-decoration: none; }
.pfeil-link::after { content: ' →'; }

/* Rubrik */
.kicker { font: 700 13px var(--kopf); letter-spacing: .08em; text-transform: uppercase; color: var(--tuerkis-text); margin-bottom: 14px; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tuerkis); margin-right: 8px; vertical-align: 1px; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--grau); max-width: 60ch; }

/* Bühne */
.buehne { padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 4vw, 56px); background: radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--tuerkis) 22%, var(--grund)), var(--grund) 55%); overflow: hidden; }
.buehne-raster { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.buehne h1 { max-width: 19ch; hyphens: manual; font-size: clamp(34px, 4.6vw, 60px); }
.geraet { background: #fff; border-radius: 16px; box-shadow: 0 40px 80px rgba(0,2,71,.18), 0 0 0 1px var(--linie); overflow: hidden; transform: rotate(1.5deg); }
.geraet-leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--flaeche); font-size: 12px; color: var(--grau); }
.geraet-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); }
.geraet-leiste span { margin-left: 8px; }
.geraet-seite { padding: 14px; display: grid; gap: 10px; }
.gs-kopf { display: flex; align-items: center; gap: 8px; } .gs-kopf b { width: 70px; height: 10px; background: var(--navy); border-radius: 3px; }
.gs-kopf i { width: 26px; height: 6px; background: var(--linie); border-radius: 3px; } .gs-kopf i:first-of-type { margin-left: auto; }
.gs-kopf em { width: 46px; height: 16px; border-radius: 99px; background: var(--tuerkis); }
.gs-buehne { background: var(--navy); border-radius: 10px; padding: 26px 18px; display: grid; gap: 8px; }
.gs-buehne b { height: 14px; background: #fff; border-radius: 3px; } .gs-buehne .w80 { width: 80%; } .gs-buehne .w60 { width: 55%; }
.gs-buehne em { width: 80px; height: 20px; border-radius: 99px; background: var(--tuerkis); margin-top: 8px; animation: hd-puls 2.4s ease-in-out infinite; }
.gs-kacheln { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; } .gs-kacheln i { height: 54px; border-radius: 8px; background: var(--flaeche); }
.geraet-preis { display: flex; justify-content: space-between; align-items: baseline; background: var(--navy); color: #fff; padding: 12px 16px; }
.geraet-preis span { font-size: 13px; color: #C9D3DC; } .geraet-preis strong { font: 700 20px var(--kopf); color: var(--tuerkis); }
@keyframes hd-puls { 50% { transform: scale(1.06); } }
.belege { list-style: none; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); }
.belege li { padding: 18px 18px 0 0; font-size: 14px; color: var(--grau); }
.belege li + li { padding-left: 18px; border-left: 1px solid var(--linie); }
.belege strong { display: block; font: 700 20px var(--kopf); color: var(--navy); margin-bottom: 2px; }

/* Abschnitte */
.abschnitt { padding: clamp(56px, 9vw, 112px) 0; }
.abschnitt.flaeche { background: var(--flaeche); }
.kopfzeile { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.kopfzeile > p { color: var(--grau); margin: 0; }
.seitenkopf { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--tuerkis) 18%, var(--grund)), var(--grund) 55%); }
.seitenkopf h1 { max-width: 18ch; }
.seitenkopf.klein h1 { font-size: clamp(30px, 4vw, 48px); }

/* Angebote */
.angebote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.angebot { position: relative; background: var(--karte); border-radius: 16px; padding: 28px; box-shadow: 0 0 0 1px var(--linie); display: flex; flex-direction: column; transition: transform .45s var(--takt), box-shadow .45s; }
.angebot.verfuegbar { box-shadow: 0 0 0 2px var(--navy), 0 24px 50px rgba(0,2,71,.12); }
.angebot.verfuegbar:hover { transform: translateY(-4px); }
.angebot .bereich { font: 700 12px var(--kopf); letter-spacing: .08em; text-transform: uppercase; color: var(--tuerkis-text); }
.angebot .status { position: absolute; top: 24px; right: 24px; font: 700 12px var(--kopf); padding: 5px 10px; border-radius: 99px; }
.angebot.verfuegbar .status { background: var(--tuerkis); color: var(--navy); }
.angebot.vorbereitung .status { background: var(--flaeche); color: var(--grau); }
.angebot h3 { font-size: 24px; margin: 14px 0 10px; }
.angebot p { color: var(--grau); flex: 1; }
.angebot.vorbereitung h3 { color: var(--grau); }
.angebot .knopf { align-self: flex-start; }

/* Ablauf */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: s; }
.ablauf li { counter-increment: s; position: relative; padding: 64px 20px 0 0; }
.ablauf li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--tuerkis); font: 800 18px var(--kopf); z-index: 1; }
.ablauf li::after { content: ''; position: absolute; top: 22px; left: 44px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 12px); opacity: .35; }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { margin-bottom: 6px; }
.ablauf p { font-size: 15px; color: var(--grau); }
.ablauf li:first-child::before { background: var(--tuerkis); color: var(--navy); }

/* Punkte */
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.punktkarte { background: var(--karte); border-radius: 16px; padding: 26px; box-shadow: 0 0 0 1px var(--linie); }
.punktkarte .nr { font: 800 14px var(--kopf); color: var(--tuerkis-text); }
.punktkarte h3 { margin: 12px 0 8px; }
.punktkarte p { color: var(--grau); font-size: 15px; margin: 0; }

/* Dunkel, Porträt */
.dunkel { background: var(--navy); color: #E7EBF2; }
.dunkel h2 { color: #fff; } .dunkel .kicker { color: var(--tuerkis); }
.dunkel a.pfeil-link { color: var(--tuerkis); }
.zweispaltig { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.zweispaltig.oben { grid-template-columns: 1fr 1fr; align-items: start; }
.portrait { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Website-Seite */
.liste-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.liste-raster li { background: var(--karte); border-radius: 14px; padding: 20px; box-shadow: 0 0 0 1px var(--linie); font-size: 15px; color: var(--grau); }
.liste-raster strong { display: block; font: 700 17px var(--kopf); color: var(--navy); margin-bottom: 6px; }
.stilwelten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.stil { background: var(--karte); border-radius: 14px; padding: 14px 14px 18px; box-shadow: 0 0 0 1px var(--linie); }
.stil i { display: block; height: 110px; border-radius: 8px; margin-bottom: 14px; }
.stil h3 { font-size: 18px; margin-bottom: 6px; } .stil p { font-size: 14px; color: var(--grau); margin: 0; }
.s-bild i { background: linear-gradient(transparent 50%, rgba(0,2,71,.85)), repeating-linear-gradient(135deg, #5b6b7d 0 10px, #4a5868 10px 20px); }
.s-typo i { background: linear-gradient(var(--navy) 0 0) 12px 18px / 75% 18px no-repeat, linear-gradient(var(--navy) 0 0) 12px 42px / 50% 18px no-repeat, repeating-linear-gradient(var(--linie) 0 1px, transparent 1px 10px) 12px 76px / 85% 28px no-repeat, #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.s-mag i { background: linear-gradient(var(--navy) 0 0) 12px 22px / 45% 10px no-repeat, linear-gradient(var(--navy) 0 0) 12px 40px / 38% 10px no-repeat, repeating-linear-gradient(135deg, #c9d3dc 0 6px, #dfe6ec 6px 12px) right 12px top 12px / 36% 86px no-repeat, #FBF8F2; box-shadow: inset 0 0 0 1px var(--linie); }
.s-mod i { background: linear-gradient(var(--navy) 0 0) center 20px / 50% 10px no-repeat, linear-gradient(var(--tuerkis) 0 0) 12px 60px / 40% 38px no-repeat, linear-gradient(var(--flaeche) 0 0) right 12px top 60px / 44% 38px no-repeat, #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.s-kraft i { background: linear-gradient(#F2C200 0 0) 0 74px / 100% 16px no-repeat, linear-gradient(#fff 0 0) 12px 18px / 70% 14px no-repeat, linear-gradient(#fff 0 0) 12px 40px / 50% 14px no-repeat, #23272B; }
.haken { list-style: none; padding: 0; margin: 0; background: var(--karte); border-radius: 16px; padding: 10px 26px; box-shadow: 0 0 0 1px var(--linie); }
.haken li { padding: 12px 0 12px 32px; border-bottom: 1px solid var(--linie); position: relative; }
.haken li:last-child { border-bottom: 0; }
.haken li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 14px; height: 8px; border-left: 2.5px solid var(--tuerkis-text); border-bottom: 2.5px solid var(--tuerkis-text); transform: rotate(-45deg); }
.preise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.preiskarte { background: var(--karte); border-radius: 16px; padding: 24px; box-shadow: 0 0 0 1px var(--linie); }
.preiskarte span { font: 700 13px var(--kopf); letter-spacing: .06em; text-transform: uppercase; color: var(--tuerkis-text); }
.preiskarte strong { display: block; font: 800 34px/1.1 var(--kopf); color: var(--navy); margin: 10px 0; letter-spacing: -.03em; }
.preiskarte p { font-size: 14px; color: var(--grau); margin: 0; }
.preiskarte.hervor { background: var(--navy); box-shadow: none; } .preiskarte.hervor span { color: var(--tuerkis); } .preiskarte.hervor strong { color: #fff; } .preiskarte.hervor p { color: #C9D3DC; }
details { background: var(--karte); border-radius: 12px; margin: 10px 0; box-shadow: 0 0 0 1px var(--linie); }
summary { cursor: pointer; padding: 18px 54px 18px 22px; font: 700 17px var(--kopf); color: var(--navy); list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 22px; top: 12px; font-size: 26px; color: var(--tuerkis-text); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 22px 18px; margin: 0; color: var(--grau); }
.recht h2 { font-size: 22px; margin-top: 1.6em; }
.recht p { color: #2A2E38; }

/* Schluss, Fuß */
.schluss { background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--tuerkis) 24%, var(--grund)), var(--grund) 65%); }
.schluss-innen { text-align: center; max-width: 760px; }
.schluss-innen p { color: var(--grau); }
.fuss { background: var(--navy); color: #C9D3DC; padding: 56px 0 28px; font-size: 15px; }
.fuss .innen { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.fuss .marke { color: #fff; } .fuss .marke small { color: #C9D3DC; }
.fuss a { color: #fff; text-decoration: none; display: block; padding: 3px 0; }
.fuss a:hover { color: var(--tuerkis); }
.fuss .klein { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: 13px; }

/* Einblenden beim Scrollen (hd.js setzt .js) */
.js [data-ein] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--takt), transform .8s var(--takt); }
.js [data-ein].da { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .buehne-raster, .kopfzeile, .zweispaltig, .zweispaltig.oben { grid-template-columns: 1fr; }
  .buehne-bild { max-width: 460px; }
  .angebote, .vier, .preise { grid-template-columns: 1fr 1fr; }
  .stilwelten, .liste-raster { grid-template-columns: 1fr 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li { padding: 4px 0 28px 64px; }
  .ablauf li::after { top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(var(--navy) 0 6px, transparent 6px 12px); }
  .portrait { max-width: 380px; }
}
@media (max-width: 760px) {
  .menue-knopf { display: flex; }
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--linie); padding: 8px 16px 16px; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--linie); background: none; }
  .nav .knopf { margin-top: 12px; justify-content: center; border-bottom: 0; }
  .menue-schalter:checked ~ .nav { display: flex; }
  .menue-schalter:checked ~ .menue-knopf span { background: transparent; }
  .menue-schalter:checked ~ .menue-knopf span::before { transform: translateY(6px) rotate(45deg); }
  .menue-schalter:checked ~ .menue-knopf span::after { transform: translateY(-6px) rotate(-45deg); }
  .angebote, .vier, .preise, .stilwelten, .liste-raster, .fuss .innen { grid-template-columns: 1fr; }
  .belege { grid-template-columns: 1fr 1fr; }
  .belege li:nth-child(3) { padding-left: 0; border-left: 0; }
  .knoepfe .knopf { width: 100%; justify-content: center; }
  .geraet { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-ein] { opacity: 1; transform: none; transition: none; }
  .gs-buehne em { animation: none; }
  .knopf, .angebot { transition: none; }
}
.fuss a.inline { display: inline; }
[id] { scroll-margin-top: 88px; }
@media (max-width: 760px) { .nav a.knopf { background: var(--tuerkis); border-radius: 999px; padding: 0 18px; } }