/* Prototyp euid.at Stammseite, Fassung 2 (2026-09-26).
   Hausstil nach euid.com: weiß, ruhige Karten, Haarlinien, neutrale Farben.
   Überschriften Barlow Semi Condensed, Text Barlow (beide SIL Open Font License,
   in der Umsetzung per next/font selbst gehostet).
   Farbe kommt nur aus Bildern: die fünf Siegel und die Produktlogos. */

:root {
  --page: #F6F6F4;
  --card: #FFFFFF;
  --ink: #1F2430;
  --ink-2: #4B5563;
  --ink-3: #6B7280;
  --hair: #E6E6E1;
  --mark: #2B303B;
  --tint: #EEF0F3;
  --shadow: 0 1px 2px rgba(31, 36, 48, 0.05), 0 10px 30px rgba(31, 36, 48, 0.07);
  --r-card: 16px;
  --r-btn: 10px;
  --head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --text: "Barlow", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --abstand: 32px; /* ein Abstand für alles: zwischen Blöcken, oben wie unten */
}
@media (max-width: 760px) { :root { --abstand: 20px; } }
[id] { scroll-margin-top: 100px; }

/* Seite als Stapel: gleicher Abstand zwischen allen Blöcken und zu Kopf und Fuß */
.stapel { display: grid; gap: var(--abstand); padding-block: var(--abstand); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #B9BCC4 var(--page); scrollbar-width: thin; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.6 var(--text); }
::selection { background: #D9DEE7; color: var(--ink); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 400; line-height: 1.15; letter-spacing: 0.005em; color: var(--mark); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--r-btn); z-index: 20; }
.skip:focus { top: 16px; }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 1024px) { .wrap { padding-inline: 32px; } }

/* Kopf wie euid.com */
.kopf { position: sticky; top: 0; z-index: 30; background: #FFFFFF; border-bottom: 1px solid var(--hair); }
.kopf__inner { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.marke { display: flex; align-items: flex-end; gap: 12px; text-decoration: none; color: var(--mark); padding-bottom: 6px; border-bottom: 2px solid var(--mark); }
.marke svg { width: 84px; height: auto; }
.marke span { font-size: 14px; color: var(--ink-2); line-height: 1; padding-bottom: 2px; }
.nav { display: flex; gap: 28px; margin-left: auto; font-size: 16px; }
.nav a { text-decoration: none; color: var(--ink); padding-block: 10px; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; }
.kopf__aktionen { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r-btn);
  border: 1px solid #D5D6D2;
  background: #FFFFFF; color: var(--ink);
  font: 600 16px/1 var(--text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn--icon { width: 48px; padding: 0; }
@media (hover: hover) {
  .btn:hover { background: #F3F3F0; }
  .btn--ink:hover { background: #2E3544; }
}
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.link svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.link:hover { text-decoration: underline; }
@media (hover: hover) { .link:hover svg { transform: translateX(3px); } }

.menu { display: none; margin-left: auto; }
@media (max-width: 980px) {
  .nav, .kopf__aktionen .btn--text { display: none; }
  .menu { display: block; }
  .menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #D5D6D2; border-radius: var(--r-btn); font-weight: 600; cursor: pointer; background: #fff; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; left: 0; right: 0; top: 76px; z-index: 10; display: grid; background: #fff; border-bottom: 1px solid var(--hair); box-shadow: var(--shadow); }
  .menu nav a { padding: 14px 20px; border-top: 1px solid var(--hair); text-decoration: none; }
  .kopf__inner { position: relative; gap: 12px; }
}

.karte { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow); }

/* Einstieg */
.einstieg {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--abstand);
  align-items: end;
}
.einstieg h1 { font-weight: 400; font-size: clamp(38px, 3.8vw, 52px); line-height: 1.1; letter-spacing: 0.01em; }
.leitsatz-ww { color: #A3A7AF; }
/* Das S von schabkar.com (Original, 152 px) links neben dem Leitsatz; multiply lässt den weißen Grund im Seitengrund aufgehen */
.leitsatz { display: flex; align-items: center; gap: 14px; margin-left: -4px; }
.leitsatz-s { width: 112px; height: 112px; flex: none; mix-blend-mode: multiply; }
@media (max-width: 760px) {
  .leitsatz { gap: 8px; margin-left: 0; }
  .leitsatz-s { width: 76px; height: 76px; }
}
.einstieg p { font-size: 19px; color: var(--ink-2); max-width: 54ch; margin-top: 16px; }

.einstieg p strong { font-weight: 600; color: var(--ink); }

.kunden { padding: 26px 28px; display: grid; gap: 10px; }
.kunden h2 { font-size: 24px; font-weight: 500; }
.kunden p { color: var(--ink-2); font-size: 16px; }
.kunden__zeile { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 6px; }
.kunden__zeile a:not(.btn) { font-size: 15px; color: var(--ink-2); }
.kunden__zeile .btn svg { width: 18px; height: 18px; }
/* Kontakt auf der Rückseite des Kundenbereichs (Betreiber 2026-09-26 22:58): Knopf „Kontakt“ dreht die Karte,
   die Karte wird dadurch nicht höher. Die Daten stehen trotzdem im HTML und im JSON-LD (Suchmaschinen, KI). */
.kunden.flip { display: block; padding: 0; perspective: 1400px; }
.kunden .flip__seite { padding: 26px 28px; gap: 10px; border-radius: calc(var(--r-card) - 1px); }
.kunden .flip__hinten { grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); align-items: center; align-content: center; gap: 0 22px; padding: 26px 28px; }
.kontakt__foto { width: 96px; height: auto; border-radius: 12px; }
.kontakt__text { display: grid; gap: 2px; min-width: 0; }
.kontakt__text h2 { margin-bottom: 4px; padding-right: 40px; }
.kontakt__ort { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 760px) {
  .kunden .flip__hinten { grid-template-columns: 76px minmax(0, 1fr); gap: 0 16px; padding: 22px 20px; }
  .kontakt__foto { width: 76px; }
}
.kunden .flip__hinten .flip__dreh { top: 18px; right: 18px; }
.kontakt { display: grid; font-style: normal; }
.kontakt__weg { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; justify-self: start; }
.kontakt__weg svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
@media (hover: hover) { .kontakt__weg:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Ebene 1: euid.com mit der Siegelfamilie */
.ebene1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 44px 48px;
}
.ebene1 h2 { font-size: 34px; font-weight: 400; }
.ebene1__text { display: grid; gap: 16px; }
.ebene1__text p { color: var(--ink-2); }
.ebene1__aktionen { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 8px; }
/* Siegelwahl (Betreiber 2026-09-26 23:24): feste Höhe, Siegel bleiben stehen; die Tafel liegt über der Textspalte
   neben allen fünf Siegeln, die Kurztexte gleiten weg (oberhalb nach oben, unterhalb nach unten). */
.siegelwahl { position: relative; }
.siegelwahl__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.siegelwahl__liste > li + li { border-top: 1px solid var(--hair); transition: border-color 240ms ease; }
.siegelwahl[data-aktiv] .siegelwahl__liste > li + li { border-top-color: transparent; }
.siegelwahl__knopf { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; min-height: 44px; padding: 11px 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.siegelwahl__knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.siegelwahl__knopf img { width: 52px; height: 52px; transition: transform 200ms var(--ease-out), opacity 240ms ease; }
.siegelwahl__text { display: grid; transition: transform 340ms var(--ease-out), opacity 220ms ease; }
.siegelwahl__text strong { font-family: var(--head); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--mark); }
.siegelwahl__text span { font-size: 15px; color: var(--ink-3); }
.siegelwahl[data-aktiv] .siegelwahl__text { opacity: 0; }
.siegelwahl__knopf[data-richtung="oben"] .siegelwahl__text { transform: translateY(-36px); }
.siegelwahl__knopf[data-richtung="unten"] .siegelwahl__text { transform: translateY(36px); }
.siegelwahl[data-aktiv] .siegelwahl__knopf[aria-expanded="false"] img { opacity: 0.45; }
.siegelwahl__knopf[aria-expanded="true"] img { transform: scale(1.08); }
@media (hover: hover) { .siegelwahl__knopf:hover img { transform: scale(1.08); opacity: 1; } }
.siegelwahl__tafel { position: absolute; top: 0; bottom: 0; left: 68px; right: 0; pointer-events: none; }
.siegelwahl__seite { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 0; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 240ms ease, transform 320ms var(--ease-out), visibility 0s linear 320ms; }
.siegelwahl__seite.ist-aktiv { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 120ms, 120ms, 0s; }
.siegelwahl__seite h3 { font-size: 21px; font-weight: 500; color: var(--mark); padding-right: 48px; }
.siegelwahl__seite p { font-size: 15px; color: var(--ink-2); }
.siegelwahl__seite h4 { font-family: var(--text); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-3); margin: 4px 0 0; }
.siegelwahl__seite ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.siegelwahl__seite li { position: relative; padding: 2px 0 2px 14px; font-size: 15px; line-height: 1.45; color: var(--ink); break-inside: avoid; }
.siegelwahl__seite li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.siegelwahl__seite .link { margin-top: auto; font-size: 15px; pointer-events: auto; }
.siegelwahl__zu { position: absolute; top: 4px; right: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D5D6D2; border-radius: 50%; background: #FFFFFF; color: var(--ink); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.siegelwahl__zu svg { width: 18px; height: 18px; }
.siegelwahl[data-aktiv] .siegelwahl__zu { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 120ms, 0s; }
@media (hover: hover) { .siegelwahl__zu:hover { border-color: var(--ink); } }
@media (max-width: 760px) { .siegelwahl__seite { padding: 6px 0; gap: 4px; } .siegelwahl__seite ul { columns: 1; } .siegelwahl__seite h3 { font-size: 19px; } .siegelwahl__seite h4 { margin-top: 0; } .siegelwahl__seite li { padding-block: 1px; } }
@media (prefers-reduced-motion: reduce) {
  .siegelwahl__text, .siegelwahl__knopf img, .siegelwahl__seite, .siegelwahl__zu, .siegelwahl__liste > li + li { transition: none; }
  .siegelwahl__knopf[data-richtung] .siegelwahl__text { transform: none; }
}


/* Ebene 2 */
.ebene2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); }
.produkt { position: relative; padding: 30px 32px; display: grid; gap: 14px; align-content: start; transition: box-shadow 200ms ease, transform 200ms var(--ease-out); }
.produkt__kopf { display: flex; gap: 16px; align-items: center; }
.produkt__kopf img { width: 56px; height: 56px; border-radius: 13px; object-fit: contain; }
.produkt h2 { font-size: 28px; font-weight: 400; }
.produkt h2 a { text-decoration: none; }
.produkt h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.produkt p { color: var(--ink-2); }
.produkt__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; position: relative; z-index: 1; }
@media (hover: hover) {
  .produkt:hover { box-shadow: 0 1px 2px rgba(31, 36, 48, 0.05), 0 16px 40px rgba(31, 36, 48, 0.10); transform: translateY(-2px); }
}

/* Ebene 3 */
.ebene3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.klein { position: relative; padding: 26px; display: grid; gap: 10px; align-content: start; }
.klein + .klein { border-left: 1px solid var(--hair); }
.klein__kopf { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.klein__kopf img { height: 44px; width: auto; border-radius: 10px; flex: none; }
.klein__kopf--wort img { height: 34px; border-radius: 0; }
.klein h2 { font-size: 22px; font-weight: 500; }
.klein h2 a { text-decoration: none; }
.klein h2 a::after { content: ""; position: absolute; inset: 0; }
.klein p { font-size: 15px; color: var(--ink-2); }
.status { display: inline-block; font-size: 13px; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 10px; justify-self: start; }
@media (hover: hover) { .klein:hover h2 a { text-decoration: underline; } }

/* Abschnitte */
.abschnitt { margin: 0; }
.abschnitt__kopf { display: grid; gap: 12px; max-width: 720px; margin-bottom: var(--abstand); }
.abschnitt__kopf h2 { font-size: 32px; }
.abschnitt__kopf p { color: var(--ink-2); font-size: 18px; }

/* Leistungen */
.leistungen { padding: 0 40px; }
.karte__kopf { display: grid; gap: 10px; padding: var(--abstand) 0; border-bottom: 1px solid var(--hair); }
.karte__kopf h2 { font-size: 32px; }
.karte__kopf p { color: var(--ink-2); max-width: 64ch; }
.leistung { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; padding: 28px 0; }
.leistung + .leistung { border-top: 1px solid var(--hair); }
.leistung h3 { font-size: 26px; font-weight: 500; }
.leistung p { color: var(--ink-2); max-width: 64ch; grid-column: 1; }
.leistung .link { grid-column: 1; }
.leistung__preis { grid-column: 2; grid-row: 1 / span 3; text-align: right; display: grid; gap: 2px; align-content: start; }
.leistung__preis strong { font-family: var(--head); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--mark); }
.leistung__preis span { font-size: 14px; color: var(--ink-3); }

/* Web-Fullstack (Betreiber 2026-09-26 23:08): Kompetenzen aus Lebenslauf und Projektliste, mit Foto des Gründers */
.koennen { padding: 0 40px; }
.koennen__kopf { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 28px; align-items: center; padding: var(--abstand) 0; border-bottom: 1px solid var(--hair); }
.koennen__kopf img { width: 110px; height: auto; border-radius: 12px; }
.koennen__kopf h1, .koennen__kopf h2 { font-size: clamp(30px, 3vw, 38px); }
.koennen__kopf p { color: var(--ink-2); max-width: 64ch; margin-top: 10px; }
.koennen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 8px 0 var(--abstand); list-style: none; }
.koennen__liste li { display: grid; gap: 6px; align-content: start; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.koennen__liste li:nth-last-child(-n + 3) { border-bottom: 0; }
.koennen__liste h3 { font-size: 21px; font-weight: 500; }
.koennen__liste p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 1100px) {
  .koennen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .koennen__liste li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--hair); }
  .koennen__liste li:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .koennen { padding: 0 24px; }
  .koennen__kopf { grid-template-columns: 80px minmax(0, 1fr); gap: 18px; }
  .koennen__kopf img { width: 80px; }
  .koennen__kopf h1, .koennen__kopf h2 { font-size: 26px; }
  .koennen__liste { grid-template-columns: minmax(0, 1fr); }
}

.koennen__weiter { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 0 var(--abstand); }
.legacy__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Legacy */
.legacy {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  padding: 36px 44px;
}
.legacy h2 { font-size: 32px; }
.legacy p { color: var(--ink-2); margin-top: 10px; max-width: 60ch; }

/* Firmendaten */
.firma { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.firma > div { padding: 22px 28px; }
.firma > div:nth-child(n + 4) { border-top: 1px solid var(--hair); }
.firma > div:not(:nth-child(3n + 1)) { border-left: 1px solid var(--hair); }
.firma dt { font-size: 14px; color: var(--ink-3); margin-bottom: 6px; }
.firma dd { margin: 0; font-size: 18px; font-weight: 500; }
.firma address { font-style: normal; }
.offen { color: #8A5A00; }

/* Fuß */
.fuss { margin-top: 0; background: #FFFFFF; border-top: 1px solid var(--hair); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px; padding-block: 44px 28px; }
.fuss__marke { display: grid; gap: 14px; align-content: start; color: var(--mark); }
.fuss__marke svg { width: 64px; height: auto; }
.fuss__marke p { font-size: 15px; color: var(--ink-2); max-width: 40ch; }
.fuss nav { display: grid; gap: 6px; align-content: start; font-size: 15px; }
.fuss nav h2 { font: 600 15px/1.3 var(--text); color: var(--ink); margin-bottom: 4px; }
.fuss nav a { text-decoration: none; color: var(--ink-2); }
.fuss nav a:hover { text-decoration: underline; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 0 30px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-3); }

/* Inhaltsseiten */
.pfad { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-3); }
.pfad li + li::before { content: "/"; margin-right: 8px; color: #C4C7CD; }
.pfad a { color: var(--ink-2); }
.seitenkopf { display: grid; gap: 14px; max-width: 800px; }
.seitenkopf h1 { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; }
.seitenkopf p { font-size: 19px; color: var(--ink-2); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #D5D6D2; border-radius: 999px; background: #fff; text-decoration: none; font-size: 15px; }
.filter a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter a:hover { border-color: var(--ink-2); }

.werke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand); }
.werke--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.werk { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: box-shadow 200ms ease, transform 200ms var(--ease-out); }
.werk__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); border-bottom: 1px solid var(--hair); }
.werk__bild img { width: 100%; height: 100%; object-fit: cover; }
.werk__tafel { aspect-ratio: 4 / 3; display: grid; align-content: end; gap: 6px; padding: 20px 22px; background: var(--tint); border-bottom: 1px solid var(--hair); }
.werk__tafel strong { font-family: var(--head); font-weight: 400; font-size: 36px; line-height: 1; color: var(--mark); }
.werk__tafel span { font-size: 14px; color: var(--ink-2); }
.werk__tafel--logo { align-content: center; justify-items: center; background: #FFFFFF; }
.werk__tafel--logo img { width: 58%; height: auto; }
.werk__text { display: grid; gap: 6px; padding: 18px 20px 22px; align-content: start; }
.werk__art { font-size: 14px; color: var(--ink-3); }
.werk__text h3 { font-size: 22px; font-weight: 500; line-height: 1.25; }
.werk__text h3 a { text-decoration: none; }
.werk__text h3 a::after { content: ""; position: absolute; inset: 0; }
.werk__text p { font-size: 15px; color: var(--ink-2); }
@media (hover: hover) {
  .werk:hover { box-shadow: 0 1px 2px rgba(31, 36, 48, 0.05), 0 16px 40px rgba(31, 36, 48, 0.10); transform: translateY(-2px); }
  .werk:hover h3 a { text-decoration: underline; }
}

.kurzliste { list-style: none; margin: 0; padding: 8px 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.kurzliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.kurzliste li:nth-last-child(-n + 2) { border-bottom: 0; }
.kurzliste h3 { font-size: 21px; font-weight: 500; line-height: 1.3; }
.kurzliste h3 a { text-decoration: none; }
.kurzliste h3 a:hover { text-decoration: underline; }
.kurzliste p { grid-column: 1 / -1; font-size: 15px; color: var(--ink-2); }

.broschuere { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; padding: 32px 40px; }
.broschuere h2 { font-size: 28px; }
.broschuere__intro { display: grid; gap: 12px; align-content: start; }
.broschuere__intro p { color: var(--ink-2); }
.namen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.namen h3 { font: 600 15px/1.3 var(--text); color: var(--ink); margin-bottom: 8px; }
.namen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 16px; color: var(--ink-2); }

.projekt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--abstand); align-items: start; }
.projekt__inhalt { display: grid; gap: var(--abstand); }
.projekt__inhalt > section { padding: 30px 34px; }
.projekt__inhalt h2 { font-size: 28px; margin-bottom: 10px; }
.projekt__inhalt p { color: var(--ink-2); max-width: 68ch; }
.bild { margin: 0; overflow: hidden; }
.bild img { width: 100%; }
.bild figcaption { padding: 12px 18px; font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--hair); }
.bilderpaar { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--abstand); align-items: start; }
.platzhalter { padding: 16px 18px; border: 1px dashed #B9BCC4; border-radius: 12px; background: #FAFAF8; font-size: 15px; color: var(--ink-2); }
.steckbrief { position: sticky; top: 100px; }
.steckbrief h2 { font-size: 22px; padding: 20px 24px 12px; }
.steckbrief dl { margin: 0; padding: 0 24px; }
.steckbrief dl > div { padding: 12px 0; border-top: 1px solid var(--hair); }
.steckbrief dt { font-size: 14px; color: var(--ink-3); }
.steckbrief dd { margin: 2px 0 0; font-weight: 500; }
.steckbrief__aktion { padding: 18px 24px 24px; border-top: 1px solid var(--hair); }

@media (max-width: 1100px) {
  .ebene1 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .legacy { grid-template-columns: 180px minmax(0, 1fr); }
  .legacy .legacy__aktionen { grid-column: 1 / -1; }
  .werke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projekt { grid-template-columns: minmax(0, 1fr); }
  .steckbrief { position: static; }
  .broschuere { grid-template-columns: minmax(0, 1fr); }
  .fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .einstieg { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .ebene1 { padding: 28px 24px; }
  .ebene1 h2 { font-size: 30px; }
  .ebene2 { grid-template-columns: minmax(0, 1fr); }
  .produkt { padding: 24px; }
  .ebene3 { grid-template-columns: minmax(0, 1fr); }
  .klein + .klein { border-left: 0; border-top: 1px solid var(--hair); }
  .leistungen { padding: 0 24px; }
  .leistung { grid-template-columns: minmax(0, 1fr); }
  .leistung__preis { grid-column: 1; grid-row: auto; text-align: left; }
  .legacy { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 18px; }
  .legacy img { max-width: 180px; }
  .firma { grid-template-columns: minmax(0, 1fr); }
  .firma > div:not(:first-child) { border-top: 1px solid var(--hair); border-left: 0; }
  .werke, .werke--drei { grid-template-columns: minmax(0, 1fr); }
  .kurzliste { grid-template-columns: minmax(0, 1fr); padding: 4px 24px; }
  .kurzliste li:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
  .namen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .broschuere { padding: 24px; }
  .projekt__inhalt > section { padding: 24px; }
  .bilderpaar { grid-template-columns: minmax(0, 1fr); }
  .fuss__raster { grid-template-columns: minmax(0, 1fr); }
  .marke span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .link svg, .produkt, .werk { transition: none; }
  .produkt:hover, .werk:hover { transform: none; }
}

/* Ende stammseite.css */

/* Kinder des Stapels dürfen schrumpfen (breite Tabellen scrollen in ihrem Rahmen) */
.stapel > * { min-width: 0; }

/* Status in der Kopfzeile einer kleinen Kachel: rechts oben */
.klein__kopf .status { margin-left: auto; align-self: center; }
/* Claim von jobtimo aus den eigenen PDFs, rechts neben der Wortmarke wie dort im Kopf (Betreiber 2026-09-26 23:43) */
.klein__kopf--wort { align-items: baseline; }
/* Grundlinie: das Bild sitzt mit seiner Unterkante auf der Linie, die Schriftlinie von „timo“ liegt 30/131 der Bildhöhe darüber */
.klein__claim { margin-left: auto; position: relative; top: calc(-34px * 30 / 131); font-family: var(--head); font-size: 17px; line-height: 1; color: var(--ink-2); white-space: nowrap; }

/* Visitkarten-Flip wie auf euid.com (components/site/visitkarte.css): Drehung um die Y-Achse, 600 ms.
   Beide Seiten liegen im selben Rasterfeld, die Kachel nimmt die Höhe der höheren Seite; kein fixes Maß. */
.klein.flip { padding: 0; perspective: 1400px; align-content: stretch; grid-template-rows: minmax(0, 1fr); }
/* Beide Seiten liegen in derselben Rasterzelle: die Karte ist so hoch wie die höhere Seite und wächst beim Drehen nicht
   (vorher lag die Rückseite absolut über der Vorderseite und schnitt bei kurzem Vordertext die Galerie ab, 2026-09-26). */
.flip__innen { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.4, 0.2, 0.2, 1); }
.flip[data-umgedreht="true"] .flip__innen { transform: rotateY(180deg); }
.flip__seite { grid-area: 1 / 1; position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; background: var(--card); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__hinten { transform: rotateY(180deg); }
.flip__vorne .klein__kopf { padding-right: 52px; }
.flip__dreh {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D5D6D2; border-radius: 50%; background: #FFFFFF; color: var(--ink);
  cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms ease;
}
.flip__dreh svg { width: 18px; height: 18px; }
.flip__dreh:active { transform: scale(0.95); }
@media (hover: hover) { .flip__dreh:hover { border-color: var(--ink); } }
.flip__titel { font-size: 22px; font-weight: 500; padding-right: 52px; }
/* Rückseite: exakt so hoch wie die Vorderseite (liegt absolut darüber), Galerie scrollt waagrecht, Untertext einzeilig, eine Zeile „Mehr“ */
.flip__hinten { position: relative; grid-area: 1 / 1; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; align-content: stretch; padding-block: 22px; }
.galerie { display: flex; gap: 8px; min-height: 0; height: 100%; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #B9BCC4 transparent; }
.galerie li { flex: 0 0 auto; height: 100%; scroll-snap-align: start; }
.galerie a { display: block; height: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); }
.galerie img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 200ms var(--ease-out); }
@media (hover: hover) { .galerie a:hover img { transform: scale(1.04); } }
.flip__hinweis { font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip__hinten .link { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .flip__innen { transition: none; }
  .flip__dreh, .galerie img { transition: none; }
}

/* Flipsymbol erst beim Überfahren (Betreiber 2026-09-26); per Tastatur beim Fokus sichtbar, auf Touch-Geräten immer */
@media (hover: hover) and (pointer: fine) {
  .flip__dreh { opacity: 0; transition: opacity 160ms ease, transform 160ms var(--ease-out), border-color 160ms ease; }
  .flip:hover .flip__dreh, .flip:focus-within .flip__dreh { opacity: 1; }
}
/* Rückseite: Titelzeile so hoch wie der Drehknopf, damit die Galerie darunter frei bleibt */
.flip__hinten { padding-top: 14px; }
.flip__hinten .flip__dreh { top: 14px; }
.flip__hinten .flip__titel { min-height: 44px; display: flex; align-items: center; }

/* Rückseite, Fassung 2 (Betreiber 22:15): drei Bilder in voller Breite sichtbar, weitere per waagrechtem Scrollen;
   eine Zeile Untertext (mit Titel), eine Zeile „Mehr“ mit dem Drehknopf rechts. Höhe bleibt die der Vorderseite. */
.flip__hinten { grid-template-rows: auto auto 1fr; gap: 10px; padding: 22px 26px; align-content: stretch; }
.galerie { height: auto; padding-bottom: 4px; }
.galerie li { flex: 0 0 calc((100% - 16px) / 3); height: auto; }
.galerie a { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.flip__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; align-self: end; }
.flip__fuss .flip__dreh { position: static; }

/* Galerie-Popup: nativer Dialog (Fokus bleibt drin, Esc schließt, Fokus kehrt zum Bild zurück) */
.lightbox { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-card); background: #FFFFFF; box-shadow: 0 24px 80px rgba(20, 24, 32, 0.28); overflow: hidden; }
.lightbox::backdrop { background: rgba(20, 24, 32, 0.72); }
.lightbox[open] { animation: lightbox-auf 220ms var(--ease-out); }
@keyframes lightbox-auf { from { opacity: 0; transform: scale(0.96); } }
.lightbox__buehne { position: relative; display: grid; place-items: center; background: #F3F3F0; min-height: 240px; }
.lightbox__buehne img { max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; }
.lightbox__leiste { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-top: 1px solid var(--hair); }
.lightbox__titel { flex: 1; min-width: 0; font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox__zahl { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lightbox button { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #D5D6D2; background: #FFFFFF; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.lightbox button svg { width: 20px; height: 20px; }
.lightbox button:active { transform: scale(0.95); }
.lightbox__pfeil { position: absolute; top: 50%; margin-top: -22px; box-shadow: 0 2px 10px rgba(20, 24, 32, 0.15); }
.lightbox__pfeil:active { transform: scale(0.95); }
.lightbox__zurueck { left: 12px; }
.lightbox__weiter { right: 12px; }
@media (hover: hover) { .lightbox button:hover { border-color: var(--ink); } }
body:has(.lightbox[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } .lightbox button { transition: none; } }

.bereiche__hinweis { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-3); }
.galerie--mitte img { object-position: center; }

/* Startseite, Reihen neu geordnet (Betreiber 2026-09-28 18:40): AIProject und PimConnect bleiben, darunter ebromsolar mit
   drei Produktkacheln (Carport, Speicher, farbige Module), darunter dignis und jobtimo im großen Format mit Flip. */
.ebene1__schwerpunkte strong { font-weight: 600; color: var(--ink); }


/* dignis und jobtimo als große Produktkarten: Flip wie bei den kleinen Kacheln, Innenmaß wie AIProject/PimConnect */
.produkt.flip { padding: 0; perspective: 1400px; align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.produkt.flip .flip__seite { padding: 30px 32px; gap: 14px; border-radius: calc(var(--r-card) - 1px); }
.produkt.flip .flip__hinten { padding: 24px 32px; gap: 10px; }
.produkt.flip .flip__vorne > .flip__dreh { top: 36px; right: 26px; }
.flip__vorne .produkt__kopf { padding-right: 52px; }
.produkt__links button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
/* jobtimo: Wortmarke statt Signet, Claim auf der Schriftlinie von „timo“ (30/131 der Bildhöhe über der Unterkante) */
.produkt__kopf--wort { align-items: baseline; padding-block: 7px; }
.produkt__kopf--wort h2 a, .produkt__kopf--wort img { display: block; }
.produkt__kopf--wort img { width: auto; height: 42px; border-radius: 0; }
/* Claim direkt neben der Wortmarke, nicht an den Kartenrand geschoben (Betreiber 20:06: schwebte in der Kopfzeile) */
.produkt__kopf--wort .klein__claim { top: calc(-42px * 30 / 131); font-size: 19px; margin-left: 4px; }
@media (max-width: 760px) {
  .produkt.flip .flip__seite { padding: 24px; }
  .produkt.flip .flip__hinten { padding: 20px 24px; }
  .produkt.flip .flip__vorne > .flip__dreh { top: 30px; right: 18px; }
  .produkt__kopf--wort img { height: 34px; }
  .produkt__kopf--wort .klein__claim { top: calc(-34px * 30 / 131); font-size: 17px; }
}

/* Wort mit Bindestrich, das nicht umbrechen soll (LKW-tauglich) */
.am-stueck { white-space: nowrap; }

/* ebromsolar-Reihe, Fassung 3 (Betreiber 2026-09-28 20:06 „müll“, 20:08 „mach“): vier eigene Karten im Hausstil, gleicher
   Abstand und etwa gleiche Höhe wie AIProject/PimConnect. Produktkarte: Bild über die volle Kartenbreite auf hellem Grund
   (multiply lässt das Weiß der Produktfotos aufgehen), darunter Titel und Text. Klick aufs Bild öffnet die Galerie der
   Themenwelt, Klick auf die übrige Karte führt in die Themenwelt. Keine Zählmarken. */
.pv-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand); }
.pv-marke { padding: 26px; }
.pv { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: box-shadow 200ms ease, transform 200ms var(--ease-out); }
.pv__bild { position: relative; z-index: 1; display: block; height: 110px; background: #F3F3F0; border-bottom: 1px solid var(--hair); overflow: hidden; cursor: zoom-in; }
.pv__bild img { position: absolute; inset: 10px 14px; width: calc(100% - 28px); height: calc(100% - 20px); object-fit: contain; mix-blend-mode: multiply; transition: transform 200ms var(--ease-out); }
.pv__text { display: grid; gap: 4px; align-content: start; padding: 14px 18px 18px; }
.pv h3 { font-size: 20px; font-weight: 500; }
.pv h3 a { text-decoration: none; }
.pv h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.pv p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (hover: hover) {
  .pv:hover { box-shadow: 0 1px 2px rgba(31, 36, 48, 0.05), 0 16px 40px rgba(31, 36, 48, 0.10); transform: translateY(-2px); }
  .pv:hover h3 a { text-decoration: underline; }
  .pv__bild:hover img { transform: scale(1.04); }
}
@media (max-width: 1100px) { .pv-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pv-reihe { grid-template-columns: minmax(0, 1fr); }
  .pv { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: none; }
  .pv__bild { height: auto; min-height: 104px; border-bottom: 0; border-right: 1px solid var(--hair); }
  .pv__bild img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .pv__text { padding: 12px 16px 14px; align-content: center; }
  .pv h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .pv, .pv__bild img { transition: none; } .pv:hover { transform: none; } }