/* ==========================================================================
   Menke-Theme – Grundlagen
   Aufbau: 1. Schriften  2. Variablen  3. Reset  4. Typografie  5. Layout
   ========================================================================== */

/* 1. Schriften (lokal, keine Verbindung zu Google) ------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

/* 2. Variablen – hier zentral ändern, wirkt überall ----------------------- */
:root {
  /* Farben */
  --menke-blue: #009de0;       /* Markenfarbe: Flächen, Buttons, große Schrift */
  --menke-blue-text: #0076a8;  /* dunkler: für Links/kleinen Text (Kontrast 5:1) */
  --text: #141617;
  --grey-dark: #434549;
  --surface: #f9f9fb;
  --petrol: #15313c;
  --white: #fff;

  /* Schriften */
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Größen (clamp = wächst flüssig zwischen Handy und Desktop) */
  --fs-body: 1.0625rem;
  --fs-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);

  /* Abstände und Breiten */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: clamp(3rem, 2rem + 4vw, 6rem);
  --container: 88rem;           /* 1408 px – breiter Inhaltsbereich */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --radius: 0.5rem;
}

/* 3. Reset (schlank) ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 4. Typografie ----------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }

/* Abstand zwischen aufeinanderfolgenden Elementen */
:where(h1, h2, h3, h4, p, ul, ol, figure) + :where(h1, h2, h3, h4, p, ul, ol, figure) {
  margin-top: var(--space-s);
}

a { color: var(--menke-blue-text); text-underline-offset: 0.15em; }
a:hover { color: var(--petrol); }
:focus-visible { outline: 3px solid var(--menke-blue); outline-offset: 2px; }

strong, b { font-weight: 600; }

/* Nur für Screenreader sichtbar (z. B. Texte zu Icons) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Zusätzliche Variablen aus dem Entwurf */
:root {
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --line: #e4e7ec;
  --blue-soft: #e5f5fc;
  --r-l: 1.5rem;
  --shadow: 0 24px 48px -28px rgba(21,49,60,.45);
}

/* 5. Layout: Kopf, Navigation, Inhalt, Fuß ------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sprunglink „Zum Inhalt“ – erscheint nur bei Tastaturbedienung */
.skip-link {
  position: absolute; left: var(--space-s); top: -100px; z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--petrol); color: var(--white);
}
.skip-link:focus { top: var(--space-s); }

/* Kopfbereich: volle Breite, gerade Kanten, großes Logo, nur Menü-Button */
/* Hinweis: kein backdrop-filter am Header – sonst sitzt das Vollbild-Menü (position: fixed) im Header fest */
:root { --header-h: 6.75rem; }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); padding-block: .6rem; }
.logo { display: block; line-height: 0; }
.logo img { width: clamp(170px, 12vw + 80px, 230px); height: auto; }

/* Telefon und E-Mail neben dem Menü-Button */
.header-right { display: flex; align-items: center; gap: clamp(.75rem, .5rem + 1.5vw, 2rem); }
.header-contact { display: flex; align-items: center; gap: clamp(.75rem, .5rem + 1.5vw, 2rem); list-style: none; padding: 0; margin: 0; }
.header-contact a { display: inline-flex; align-items: center; gap: .55rem; font: 700 1rem/1 var(--font-head); color: var(--text); text-decoration: none; }
.header-contact a:hover { color: var(--menke-blue-text); }
.header-contact svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--menke-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Tablet: E-Mail nur als Symbol */
@media (max-width: 1100px) { .header-contact__text--mail { display: none; } }
/* Handy: beide nur als runde Symbol-Buttons */
@media (max-width: 760px) {
  .header-contact__text { display: none; }
  .header-contact a { width: 2.75rem; height: 2.75rem; justify-content: center; border: 2px solid var(--line); border-radius: 50%; }
  .header-contact svg { width: 1.25rem; height: 1.25rem; }
}
@media (max-width: 380px) { .header-contact li + li { display: none; } }

/* Menü-Button (Burger) */
.nav-toggle { display: inline-flex; align-items: center; gap: .75rem; padding: .85rem 1.2rem; border: 0; border-radius: .4rem; background: var(--petrol); color: var(--white); font: 700 .85rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.nav-toggle:hover { background: var(--menke-blue); color: var(--text); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 1.4rem; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -7px; } .nav-toggle-icon::after { top: 7px; }
.nav-open .nav-toggle-icon { background: transparent; }
.nav-open .nav-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

/* Menü als Vollbild-Ebene (öffnet über den Button) */
.site-nav { display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 29; background: var(--petrol); color: #c6d5db; overflow-y: auto; }
.nav-open .site-nav { display: block; }
html.menu-open { overflow: hidden; }
.site-nav__inner { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--space-l); align-items: center; padding-block: clamp(2rem, 1rem + 5vw, 5rem); min-height: 100%; }
.site-nav .mod_navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.site-nav .mod_navigation li { margin: 0; }
.site-nav .mod_navigation a,
.site-nav .mod_navigation strong { display: inline-block; padding: .35rem 0; font: 800 clamp(2rem, 1.2rem + 3.5vw, 4.25rem)/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--white); text-decoration: none; }
.site-nav .mod_navigation a:hover { color: var(--menke-blue); }
.site-nav .mod_navigation strong.active { color: var(--menke-blue); }
.site-nav .mod_navigation li.nav-cta { margin-top: 1rem; }
.site-nav .mod_navigation .nav-cta > a,
.site-nav .mod_navigation .nav-cta > strong { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: .06em; padding: 1rem 1.6rem; border-radius: .4rem; background: var(--menke-blue); color: var(--text); }
.site-nav .mod_navigation .nav-cta > a:hover { background: var(--white); color: var(--text); }
.site-nav .mod_navigation .invisible { position: absolute; left: -9999px; }
.site-nav__contact { font-size: 1rem; line-height: 1.8; }
.site-nav__contact b { display: block; color: var(--white); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: .5rem; }
.site-nav__contact a { color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .nav-open .site-nav { animation: menu-in .25s ease-out; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  :root { --header-h: 5rem; }
  .logo img { width: 150px; }
  .nav-toggle { padding: 0; width: 2.75rem; height: 2.75rem; justify-content: center; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-nav__inner { grid-template-columns: 1fr; align-items: start; gap: 2.5rem; }
}

/* Inhalt: Contao-Artikel = Abschnitt; Inhalt darin auf Containerbreite */
main .mod_article { padding-block: var(--space-l); padding-inline: var(--gutter); }
main .mod_article > :not(.mod_article__inner),
main .mod_article__inner > * { max-width: var(--container); margin-inline: auto; }
/* Abstand zwischen Elementen innerhalb eines Artikels */
main .mod_article > * + *:not(.mod_article__inner),
main .mod_article__inner > * + * { margin-top: 2rem; }
.content-text > :is(h2, h3) + * { margin-top: .75rem; }
.content-text > :is(h2, h3) + * p { max-width: 42rem; color: var(--grey-dark); }
/* Rechtstexte (Impressum, Datenschutz) – beim Artikel CSS-Klasse „legal“ eintragen */
.legal .content-text > * { max-width: 46rem; }
.legal h2 { font-size: 1.15rem; margin: 2.25rem 0 .5rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.legal p, .legal li { color: var(--grey-dark); line-height: 1.65; }
.legal p + p { margin-top: .6rem; }
.legal a { overflow-wrap: anywhere; }
/* Hintergründe für Abschnitte – im Backend beim Artikel unter „CSS-Klasse“ eintragen:
   bg-surface (hellgrau) · bg-blue-soft (hellblau) · bg-petrol (dunkel) · bg-blue (Menke-Blau)
   section-tight = wenig Abstand oben/unten (z. B. für schmale Leisten) */
main .mod_article.bg-surface { background: var(--surface); }
main .mod_article.bg-blue-soft { background: var(--blue-soft); }
main .mod_article.bg-blue { background: var(--menke-blue); color: var(--text); }
main .mod_article.bg-petrol { background: var(--petrol); color: #c6d5db; }
main .mod_article.section-tight { padding-block: 1.6rem; }
main .mod_article.bg-surface + .bg-surface, main .mod_article.bg-blue-soft + .bg-blue-soft { border-top: 1px solid var(--line); }

/* Anpassungen auf dunklem Hintergrund */
.bg-petrol :is(h1, h2, h3, h4) { color: var(--white); }
.bg-petrol p, .bg-petrol .code-block__text > p, .bg-petrol .about-block > p:not(.stellwerk) { color: #c6d5db; }
.bg-petrol .kicker { color: var(--menke-blue); }
.bg-petrol a:not(.btn) { color: var(--white); }
.bg-petrol .steps li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #d7e3e8; }
.bg-petrol .steps b { color: var(--white); }
.bg-petrol .steps li span { color: var(--menke-blue); }
.bg-petrol .editor { background: #0b1d24; border: 1px solid rgba(255,255,255,.1); }
.bg-petrol .mark--soft::before { background: var(--menke-blue); }
/* Auf Menke-Blau: dunkle Schrift, Marker in Weiß */
.bg-blue :is(h1, h2, h3, h4), .bg-blue .kicker { color: var(--text); }
.bg-blue .mark::before { background: var(--white); }
/* Auf Hellblau: Marker etwas kräftiger */
.bg-blue-soft .mark--soft::before { background: #9fdcf6; }

/* Fußbereich: vier Spalten auf dunklem Grund */
.site-footer { background: #0f1a1f; color: #9fb0b7; font-size: .95rem; padding-block: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem); }
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: 180px; height: auto; }
.footer-claim { color: #e3ebee; font-size: 1.05rem; line-height: 1.6; margin-top: 1.25rem; max-width: 26rem; }
.footer-region { font-size: .9rem; margin-top: 1rem; max-width: 26rem; }
.footer-icons { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.site-footer .footer-icons a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--menke-blue); transition: background .2s, border-color .2s; }
.site-footer .footer-icons a:hover { background: var(--menke-blue); border-color: var(--menke-blue); color: var(--text); }
.footer-icons svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-title { font: 600 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--white); margin: .6rem 0 1.25rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.site-footer a { color: #e3ebee; text-decoration: none; }
.site-footer .footer-col a:hover { color: var(--menke-blue); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font: .8rem/1.4 var(--mono); color: #9fb0b7; }
.footer-heart { color: var(--menke-blue); }
@media (prefers-reduced-motion: reduce) { .footer-icons a { transition: none; } }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
}

/* 6. Buttons --------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; font: 700 .9rem/1 var(--font-body); border-radius: 999px; text-decoration: none; border: 2px solid transparent; }
.btn--primary { background: var(--menke-blue); color: var(--text); }
.btn--primary:hover { background: var(--petrol); color: var(--white); }
.btn--ghost { border-color: var(--line); color: var(--text); background: var(--white); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); }
.btn--light { background: var(--white); color: var(--text); }
.btn .arrow { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(0,0,0,.08); }

/* 7. Komponenten (für die eigenen Inhaltselemente) ------------------------- */
/* Gemeinsame Bausteine */
.kicker { display: inline-flex; align-items: center; gap: .6rem; font: 600 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--menke-blue-text); }
.kicker::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-m); margin-bottom: var(--space-m); flex-wrap: wrap; }
.section-head h2 { margin-top: .75rem; max-width: 22ch; }
.section-head p { max-width: 34rem; color: var(--grey-dark); margin: 0; }
/* Marker-Hervorhebung: leicht schief, wie von Hand */
.mark { position: relative; display: inline-block; z-index: 0; padding: 0 .15em; }
.mark::before { content: ""; position: absolute; inset: .12em -.05em .02em; background: var(--menke-blue); border-radius: .2em; transform: rotate(-1.5deg); z-index: -1; }
.mark--soft::before { background: #bfe8fa; }
.ph { background: repeating-linear-gradient(135deg, #dde2e9 0 12px, #e8ebf0 12px 24px); display: grid; place-items: center; text-align: center; color: var(--grey-dark); font: 600 .85rem/1.4 var(--mono); padding: 1rem; }

/* Hero */
/* Hero (Inhaltselement menke_hero) – steht in einem Artikel, der schon Abstand und Breite vorgibt */
main { overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-l); align-items: center; }
.claim { font: 800 .9rem/1 var(--font-head); letter-spacing: .16em; color: var(--grey-dark); margin-bottom: 1.25rem; }
.claim b { color: var(--menke-blue); }
.hero h1 { font-size: clamp(2rem, 1.1rem + 2.7vw, 3.3rem); line-height: 1.08; }
.hero h1 .mark { color: var(--text); }
.hero .lead { font-size: 1.2rem; color: var(--grey-dark); max-width: 34rem; margin-top: 1.5rem; }
.hero .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-visual { position: relative; isolation: isolate; }
.hero-visual .blob { position: absolute; width: 115%; aspect-ratio: 1; right: -30%; top: 50%; transform: translateY(-50%); background: var(--menke-blue); border-radius: 50%; z-index: -1; }
.hero-visual figure { margin: 0; }
.hero-visual img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--shadow); }
.stamp { position: absolute; left: -2.2rem; top: 2rem; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--petrol); color: var(--white); display: grid; place-items: center; text-align: center; transform: rotate(-10deg); box-shadow: var(--shadow); }
.stamp strong { display: block; font: 800 1.8rem/1 var(--font-head); color: var(--menke-blue); }
.stamp small { display: block; font: 600 .7rem/1.15 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.note-card { position: absolute; right: 1.25rem; bottom: -1.5rem; background: var(--white); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: var(--shadow); max-width: 15rem; font-size: .9rem; }
.note-card b { display: block; font-family: var(--font-head); font-size: .95rem; }

/* Technik-Leiste (Inhaltselement menke_techstrip) */
.tech-strip { display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.tech-strip .kicker { margin: 0; }
.tech-strip ul { display: flex; flex-wrap: wrap; gap: .75rem 2rem; list-style: none; padding: 0; margin: 0; }
.tech-strip li { font: 700 clamp(1rem, .9rem + .4vw, 1.2rem)/1 var(--font-head); color: #8a9099; }
.bg-petrol .tech-strip li { color: var(--white); }
.tech-strip a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .15rem; transition: color .15s, border-color .15s; }
.tech-strip a:hover, .tech-strip a:focus-visible { color: var(--menke-blue); border-bottom-color: currentColor; }
.bg-petrol .tech-strip li::after { content: "·"; margin-left: 2rem; color: var(--menke-blue); }
.bg-petrol .tech-strip li:last-child::after { content: none; }
@media (max-width: 760px) {
  .tech-strip { gap: .9rem; }
  .tech-strip ul { gap: .6rem 1.25rem; }
  .bg-petrol .tech-strip li::after { content: none; }
}

/* Leistungen */
/* Leistungskacheln: Elementgruppe mit CSS-Klasse „services“ = Raster */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.services > :is(h1, h2, h3, h4) { grid-column: 1 / -1; margin: 0 0 1rem; }
.service { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.75rem; display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; color: inherit; }
.service .icon img { width: 2rem; height: 2rem; }
.service .icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--blue-soft); display: grid; place-items: center; font: 700 .65rem/1 var(--mono); color: var(--menke-blue-text); }
.service :is(h2, h3, h4) { margin: 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.service p { color: var(--grey-dark); margin: 0; font-size: .95rem; }
.service .go { margin-top: auto; padding-top: .5rem; font: 700 .85rem/1 var(--font-body); color: var(--menke-blue-text); }
.service--main { grid-row: span 2; background: var(--petrol); color: var(--white); border-color: var(--petrol); }
.service--main :is(h2, h3, h4) { color: var(--white); font-size: 1.6rem; }
.service--main p { color: #c6d5db; font-size: 1.05rem; }
.service--main .icon { background: rgba(0,157,224,.25); color: #bfe8fa; }
.service--main .go { color: var(--menke-blue); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .25rem 0 0; }
.chips li { font: .75rem/1 var(--mono); padding: .45rem .65rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--grey-dark); }
.service--main .chips li, .case .chips li { background: rgba(255,255,255,.1); border-color: transparent; color: #d5e3e9; }

/* Fallbeispiel Kursimple */
.case { background: var(--petrol); color: #c6d5db; border-radius: 2rem; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-l); align-items: center; position: relative; overflow: hidden; }
.case::after { content: ""; position: absolute; width: 28rem; height: 28rem; border-radius: 50%; background: var(--menke-blue); opacity: .18; right: -8rem; bottom: -14rem; }
.case > * { position: relative; z-index: 1; }
.case .badge-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font: .75rem/1 var(--mono); color: #8fb0bd; }
.badge { font: 700 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: .45rem .65rem; border-radius: 999px; background: var(--menke-blue); color: var(--text); }
.case:not(:has(.browser)) { grid-template-columns: 1fr; }
.case :is(h2, h3, h4) { color: var(--white); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); text-transform: none; letter-spacing: -.01em; margin-top: 1rem; }
.case p { margin-top: 1rem; }
.case .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.case .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.3); }
.case .btn--ghost:hover { border-color: var(--white); color: var(--white); }
.browser { background: #0d2129; border-radius: 1rem; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.browser-bar { display: flex; gap: .4rem; padding: .7rem .9rem; background: #12303b; }
.browser-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: #2f5260; }
.browser figure { margin: 0; }
.browser img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.browser .ph { aspect-ratio: 16/10; background: repeating-linear-gradient(135deg, #18394a 0 12px, #1c4152 12px 24px); color: #8fb0bd; }
/* Produktkarten: Elementgruppe mit CSS-Klasse „products“ = Raster */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
main .mod_article__inner > .case + .products, main .mod_article > .case + .products { margin-top: 1rem; }
.products > :is(h1, h2, h3, h4) { grid-column: 1 / -1; }
.product { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.4rem 1.5rem; background: var(--white); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .4rem; transition: border-color .2s; }
.product:hover { border-color: var(--menke-blue); color: inherit; }
.product .badge { align-self: flex-start; }
.product :is(h2, h3, h4) { margin: 0; text-transform: none; letter-spacing: 0; font-size: 1.15rem; }
.product :is(h2, h3, h4) span { font-weight: 700; color: var(--grey-dark); }
.product p { color: var(--grey-dark); margin: 0; font-size: .9rem; }
.product--all { background: var(--blue-soft); border-color: transparent; justify-content: center; }
.product--all .product__count { font: 800 1.8rem/1 var(--font-head); }
.product--all .product__count span { color: inherit; }

/* Quellcode */
/* Code-Abschnitt (Inhaltselement menke_code) */
.code-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: center; }
.code-block :is(h2, h3) { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); margin-top: .75rem; }
.code-block__text > p { color: var(--grey-dark); margin-top: 1rem; }
.editor { margin: 0; }
.editor code { font: inherit; }
.steps { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: .6rem; counter-reset: s; }
.steps li { display: flex; gap: 1rem; align-items: baseline; background: var(--white); border: 1px solid var(--line); border-radius: 1rem; padding: .9rem 1.1rem; }
.steps li span { font: 600 .8rem/1 var(--mono); color: var(--menke-blue-text); }
.steps b { font-weight: 600; }
.editor { background: var(--petrol); border-radius: var(--r-l); overflow: hidden; font: .95rem/1.75 var(--mono); box-shadow: var(--shadow); transform: rotate(1.2deg); }
.editor-bar { display: flex; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); align-items: center; }
.editor-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: #2f5260; }
.editor-bar small { margin-left: auto; color: #6f8c97; font-size: .75rem; }
.editor pre { margin: 0; padding: 1.5rem; overflow-x: auto; color: #d7e3e8; }
.c-com { color: #7f9ca6; } .c-key { color: #7fd0f3; } .c-str { color: #b6e3a4; } .c-fn { color: var(--menke-blue); }

/* Referenzen als Bildkarten */
/* Referenzen: Elementgruppe mit CSS-Klasse „refs“ = Raster */
.refs { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.refs > :is(h1, h2, h3, h4) { grid-column: 1 / -1; }
.ref { position: relative; border-radius: var(--r-l); overflow: hidden; text-decoration: none; color: var(--white); min-height: 15rem; display: block; }
.ref { background: var(--petrol); }
.ref__media, .ref__media figure { position: absolute; inset: 0; margin: 0; }
.ref__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.ref:hover .ref__media img { transform: scale(1.03); }
.ref .ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #2b4a57 0 12px, #305260 12px 24px); color: #a9c2cc; place-items: start end; }
.ref .ph span { padding: .25rem; }
.ref .overlay { position: absolute; inset: auto 0 0 0; padding: 3rem 1.5rem 1.5rem; background: linear-gradient(transparent, rgba(13,33,41,.75) 35%, rgba(13,33,41,.95)); }
.ref .overlay small { font: .75rem/1 var(--mono); color: #bfe8fa; }
.ref .overlay :is(h2, h3, h4) { margin: 0; color: var(--white); text-transform: none; letter-spacing: 0; font-size: 1.35rem; margin-top: .4rem; }
.ref .overlay p { color: #d5e3e9; font-size: .9rem; margin-top: .3rem; max-width: 32rem; }
.ref--big { grid-row: span 2; min-height: 32rem; }
.ref:hover .overlay :is(h2, h3, h4) { text-decoration: underline; text-underline-offset: .2em; }
.quote { margin-top: 1rem; background: var(--blue-soft); border-radius: var(--r-l); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.quote .qmark { font: 800 5rem/0.6 var(--font-head); color: var(--menke-blue); }
.quote blockquote { margin: 0; font: 700 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.4 var(--font-head); }
.quote cite { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; font: normal .9rem/1.3 var(--font-body); color: var(--grey-dark); }
.quote cite span { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #bcc7d3; }

/* Team + Kontakt */
/* Über uns + Kontaktkarte: Elementgruppe mit CSS-Klasse „about“ = zwei Spalten */
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-l); align-items: start; }
.about > :is(h1, h2, h3) { grid-column: 1 / -1; }
.about-block :is(h2, h3) { margin-top: .75rem; }
.about-block > p:not(.stellwerk) { color: var(--grey-dark); margin-top: 1rem; }
.owner figure { margin: 0; }
.owner { position: relative; margin: 2rem 0 0; }
.owner img { width: 100%; border-radius: var(--r-l); box-shadow: var(--shadow); }
.owner figcaption { position: relative; margin: -3.5rem 1.5rem 0; background: var(--white); border-radius: 1.25rem; padding: 1.4rem 1.6rem; box-shadow: var(--shadow); }
.owner blockquote { margin: 0 0 .9rem; font: 700 1.1rem/1.45 var(--font-head); }
.owner b { display: block; font-family: var(--font-head); }
.owner span { color: var(--grey-dark); font-size: .9rem; }
.stellwerk { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; border: 1px dashed #b9c2cc; border-radius: 1rem; padding: 1rem 1.25rem; font-size: .95rem; }
.stellwerk b { font-family: var(--font-head); }
.contact { background: var(--petrol); color: #c6d5db; border-radius: 2rem; padding: 2rem; position: sticky; top: 7rem; }
.contact .person { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.contact .person img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--menke-blue); }
.contact .person b { display: block; color: var(--white); font-family: var(--font-head); }
.contact :is(h2, h3) { margin: 0; color: var(--white); font-size: 1.6rem; text-transform: none; letter-spacing: 0; }
.contact a:not(.btn) { color: var(--white); }
.contact p { color: #c6d5db; margin-top: 1rem; }
.contact .btn { margin-top: 1.5rem; }



/* Call-to-Action-Streifen (Inhaltselement menke_cta) – Artikel mit CSS-Klasse „bg-blue“ */
main .mod_article.bg-blue {
  background-color: var(--menke-blue);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 3px, transparent 3px 90px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 55%);
}
.cta-strip { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.cta-strip :is(h2, h3) { margin: 0; color: var(--white); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.05; }
.cta-strip .mark { color: var(--white); }
.cta-strip .mark::before { background: var(--petrol); }
.cta-strip p { color: var(--text); font-size: 1.15rem; margin-top: 1rem; max-width: 36rem; }
.cta-strip__image img { display: block; width: clamp(8rem, 6rem + 6vw, 12rem); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 6px solid rgba(255,255,255,.9); box-shadow: 0 24px 48px -24px rgba(21,49,60,.6); }
.cta-strip__actions { display: flex; flex-direction: column; gap: .75rem; }
.btn--outline-dark { border-color: var(--text); color: var(--text); background: transparent; justify-content: center; }
.btn--outline-dark:hover { background: var(--text); color: var(--white); }
.btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta-strip .btn--light { justify-content: center; }
@media (max-width: 900px) {
  .cta-strip { grid-template-columns: 1fr; }
  .cta-strip__image { order: -1; }
  .cta-strip__actions { flex-direction: row; flex-wrap: wrap; }
}

/* Seitenkopf (Inhaltselement menke_pagehead) – meist in Artikel mit bg-petrol */
.page-head :is(h1, h2) { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); max-width: 18ch; margin-top: 1rem; }
.page-head .lead { font-size: 1.2rem; max-width: 42rem; margin-top: 1.5rem; color: var(--grey-dark); }
.bg-petrol .page-head .lead { color: #c6d5db; }

/* Referenzen: Filter */
.ref-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.ref-filter button { font: 700 .85rem/1 var(--font-body); padding: .75rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--text); cursor: pointer; }
.ref-filter button:hover { border-color: var(--text); }
.ref-filter button[aria-pressed="true"] { background: var(--menke-blue); border-color: var(--menke-blue); color: var(--text); }

/* Referenzen: Übersicht (Nachrichtenliste mit Template news_referenz) */
.ref-list { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.ref-item__link { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; color: inherit; text-decoration: none; }
.ref-item:not(.ref-item--featured):nth-child(even) .ref-item__link { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
.ref-item:not(.ref-item--featured):nth-child(even) .ref-item__media { order: 2; }
.ref-item__media { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; background: var(--blue-soft); box-shadow: var(--shadow); }
.ref-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ref-item__link:hover .ref-item__media img { transform: scale(1.03); }
.ref-item__cats { font: 600 .78rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--menke-blue-text); margin: 0; }
.ref-item__title { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); text-transform: none; letter-spacing: -.01em; margin-top: .6rem; }
.ref-item__link:hover .ref-item__title { color: var(--menke-blue-text); }
.ref-item__teaser { color: var(--grey-dark); margin-top: .75rem; }
.ref-item__teaser p { margin: 0; }
.ref-item .chips { margin-top: 1rem; }
.ref-item .go { display: inline-flex; gap: .5rem; margin-top: 1.25rem; font: 700 .95rem/1 var(--font-body); color: var(--menke-blue-text); }
.ref-item[hidden] { display: none; }
/* Top-Projekt: groß, Text auf dem Bild */
.ref-item--featured .ref-item__link { display: block; position: relative; border-radius: var(--r-l); overflow: hidden; color: var(--white); box-shadow: var(--shadow); }
.ref-item--featured .ref-item__media { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; }
.ref-item--featured .ref-item__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(13,33,41,.92)); }
.ref-item--featured .ref-item__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.ref-item--featured .badge { display: inline-block; margin-bottom: .75rem; }
.ref-item--featured .ref-item__cats { color: #bfe8fa; }
.ref-item--featured .ref-item__title { color: var(--white); font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4.5rem); text-transform: uppercase; }
.ref-item--featured .ref-item__teaser { color: #e3ebee; font-size: 1.1rem; max-width: 46rem; }
.ref-item--featured .chips li { background: rgba(255,255,255,.12); border-color: transparent; color: #e3ebee; }
.ref-item--featured .go { color: var(--menke-blue); }

/* Referenzen: Detailseite (Nachrichtenleser mit Template news_referenz_full) */
.ref-detail__head h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); margin-top: .75rem; }
.ref-detail__head .chips { margin-top: 1.25rem; }
.ref-detail__hero { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); }
.ref-detail__hero img { width: 100%; height: auto; }
.ref-detail__text { max-width: 46rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); font-size: 1.15rem; }
.ref-detail__text p { color: var(--grey-dark); }
.ref-detail__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.ref-detail__gallery figure { margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--blue-soft); }
.ref-detail__gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.ref-detail__back { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

@media (prefers-reduced-motion: reduce) { .ref-item__media img { transition: none; transform: none !important; } }
@media (max-width: 900px) {
  .ref-item__link, .ref-item:not(.ref-item--featured):nth-child(even) .ref-item__link { grid-template-columns: 1fr; }
  .ref-item:not(.ref-item--featured):nth-child(even) .ref-item__media { order: 0; }
}
@media (max-width: 760px) {
  /* Top-Projekt auf dem Handy: Bild oben, Text darunter auf dunklem Grund */
  .ref-item--featured .ref-item__link { background: var(--petrol); }
  .ref-item--featured .ref-item__media { aspect-ratio: 16 / 10; }
  .ref-item--featured .ref-item__media::after { display: none; }
  .ref-item--featured .ref-item__body { position: static; }
  .ref-detail__gallery { grid-template-columns: 1fr; }
}

/* 8. Responsiv ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .service, .service:hover, .ref__media img, .ref:hover .ref__media img { transition: none; transform: none; } }
@media (max-width: 1024px) {
  .services { grid-template-columns: 1fr 1fr; }
  .service--main { grid-row: auto; grid-column: 1 / -1; }
  .products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero__grid, .case, .code-block, .about { grid-template-columns: 1fr; }
  .hero-visual { max-width: 26rem; margin-inline: auto; }
  .refs { grid-template-columns: 1fr; }
  .ref--big { grid-row: auto; min-height: 20rem; }
  .contact { position: static; }
  .editor { transform: none; }
}
@media (max-width: 760px) {
  .services, .products { grid-template-columns: 1fr; }
  .service--main { grid-row: auto; }
  .owner figcaption { margin: -2rem .75rem 0; }
  .stamp { left: -.5rem; }
  .quote { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Bildraster (menke_gallery) – z. B. „Gestaltung zum Anfassen“
   Kachelgrößen: .wide = 2 Spalten, .tall = 2 Zeilen (Muster im Template)
   ------------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15rem; gap: 1rem; }
.gallery figure { margin: 0; position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--white); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: .75rem; bottom: .75rem; background: rgba(13,33,41,.85); color: var(--white); font: 600 .8rem/1.2 var(--font-body); padding: .5rem .7rem; border-radius: .4rem; }
.gallery .wide { grid-column: span 2; }
.gallery .tall { grid-row: span 2; }

/* ------------------------------------------------------------------
   Logowand (menke_logos) – Logos sind runde weiße Plaketten
   ------------------------------------------------------------------ */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 2vw, 2.5rem); justify-items: center; list-style: none; padding: 0; margin: 2rem 0 0; }
.logos li { width: 100%; max-width: 9.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: 0 16px 32px -20px rgba(21,49,60,.45); overflow: hidden; transition: transform .25s; }
.logos li:hover { transform: translateY(-4px); }
.logos img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .gallery img, .logos li { transition: none; transform: none !important; }
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gallery { grid-auto-rows: 9rem; gap: .6rem; }
  .gallery figcaption { left: .5rem; bottom: .5rem; font-size: .72rem; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   Hero, Darstellung „50/50“ (menke_hero, Feld „Darstellung“ = split)
   Links Text auf Petrol, rechts Foto bis an den Bildschirmrand.
   Der Artikel drumherum verliert dafür automatisch seinen Innenabstand.
   ------------------------------------------------------------------ */
main .mod_article:has(.hero--split) { padding: 0; background: var(--petrol); }
main .mod_article .hero.hero--split { max-width: none; margin: 0; }
.hero--split .hero__grid { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; min-height: clamp(34rem, calc(100svh - var(--header-h) - 4rem), 48rem); }
.hero--split .hero__text { align-self: center; padding-block: var(--space-l); padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-inline-end: clamp(2.5rem, 1rem + 5vw, 7rem); }
.hero--split .claim { color: #c6d5db; }
.hero--split h1, .hero--split h1 .mark { color: var(--white); }
.hero--split .lead { color: #c6d5db; }
.btn--outline-light { border-color: rgba(255,255,255,.55); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--text); }
.hero--split .hero-visual { min-height: 22rem; }
.hero--split .hero-visual figure { position: absolute; inset: 0; }
/* object-position hält beide Personen im Bild, auch bei schmalen Fenstern */
.hero--split .hero-visual img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 75% 35%; border-radius: 0; box-shadow: none; }
.hero--split .stamp { left: -3.75rem; top: 3rem; background: var(--menke-blue); color: var(--text); z-index: 1; }
.hero--split .stamp strong { color: var(--white); }
.hero--split .note-card { left: -3rem; right: auto; bottom: 3rem; z-index: 1; }
/* Folgt direkt ein petrolfarbener Abschnitt (Technik-Leiste), feine Trennlinie */
main .mod_article:has(.hero--split) + .bg-petrol { border-top: 1px solid rgba(255,255,255,.12); }

@media (max-width: 900px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero--split .hero-visual { order: -1; max-width: none; margin: 0; min-height: 0; aspect-ratio: 4 / 3; }
  .hero--split .hero__text { padding: 3rem var(--gutter) 3.5rem; }
  .hero--split .stamp { left: auto; right: var(--gutter); top: auto; bottom: -2.75rem; width: 6rem; height: 6rem; }
  .hero--split .stamp strong { font-size: 1.5rem; }
  .hero--split .stamp small { font-size: .56rem; letter-spacing: .04em; }
  .hero--split .note-card { display: none; }
}

/* ------------------------------------------------------------------
   Sprunganker (z. B. /leistungen#software): Platz für den festen Header
   ------------------------------------------------------------------ */
main .mod_article[id] { scroll-margin-top: var(--header-h); }

/* ------------------------------------------------------------------
   Leistungsabschnitt (menke_servicedetail)
   ------------------------------------------------------------------ */
.svc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-l); align-items: center; }
.svc-detail__text h2 { margin-top: .75rem; max-width: 24ch; }
.svc-detail__body { margin-top: 1.25rem; color: var(--grey-dark); }
.svc-detail__body > * + * { margin-top: 1rem; }
.svc-detail__body strong { color: var(--text); }
.svc-detail__body ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.svc-detail__body li { position: relative; padding-left: 1.6rem; }
.svc-detail__body li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; border-radius: 50%; background: var(--menke-blue); }
.svc-detail .chips { margin-top: 1.5rem; }
.svc-detail__body blockquote { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--menke-blue); background: var(--blue-soft); border-radius: 0 1rem 1rem 0; font: 600 1.15rem/1.45 var(--font-head); color: var(--text); }
.svc-detail__body blockquote p { margin: 0; }
.svc-detail__media { margin: 0; position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); background: var(--white); }
.svc-detail__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.svc-detail__media a:hover img { transform: scale(1.03); }
.svc-detail__ref { position: absolute; left: 1rem; bottom: 1rem; background: var(--white); color: var(--text); padding: .65rem 1rem; border-radius: 999px; font: 600 .85rem/1 var(--font-body); box-shadow: var(--shadow); }
.svc-detail__media a:hover .svc-detail__ref { background: var(--menke-blue); }
.bild-links .svc-detail__media { order: -1; }

/* ------------------------------------------------------------------
   Ablauf (menke_process) – Schritte als Karten
   ------------------------------------------------------------------ */
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.process li { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.5rem; background: var(--white); }
.process__no { font: 600 .85rem/1 var(--mono); color: var(--menke-blue-text); }
.process h3 { margin-top: 1rem; font-size: 1.15rem; }
.process p { margin-top: .6rem; color: var(--grey-dark); font-size: .95rem; }
.bg-petrol .process li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.bg-petrol .process__no { color: var(--menke-blue); }
.bg-petrol .process p { color: #c6d5db; }
.bg-petrol .section-head p { color: #c6d5db; }

@media (prefers-reduced-motion: reduce) { .svc-detail__media img { transition: none; transform: none !important; } }
@media (max-width: 1024px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .svc-detail { grid-template-columns: 1fr; gap: 2rem; }
  .bild-links .svc-detail__media { order: 0; }
}
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   Kontaktseite: Elementgruppe mit CSS-Klasse „contact-layout“
   links das Formular (weiße Karte), rechts die Kontaktkarte
   ------------------------------------------------------------------ */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: var(--space-m); align-items: start; }
.contact-layout > :is(h1, h2, h3) { grid-column: 1 / -1; }
.contact-layout > :not(.contact):not(:is(h1, h2, h3)) { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.contact-layout > * > :is(h2, h3):first-child { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------
   Formulare (Contao-Formulargenerator)
   Feld-Klasse „half“ (im Formularfeld unter „CSS-Klasse“) = halbe Breite
   ------------------------------------------------------------------ */
form .formbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
form .formbody > * { grid-column: 1 / -1; }
form .formbody > .widget.half { grid-column: auto; }
form .widget > label, form .widget > fieldset > legend { display: block; font: 600 .85rem/1.3 var(--font-body); color: var(--text); margin-bottom: .4rem; }
form .widget label .mandatory { color: var(--menke-blue-text); margin-left: .15rem; }
form .invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form :is(input.text, textarea, select) { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); font: inherit; color: var(--text); transition: border-color .2s, box-shadow .2s, background .2s; }
form textarea { min-height: 9rem; resize: vertical; }
form :is(input.text, textarea, select):focus { outline: none; border-color: var(--menke-blue); background: var(--white); box-shadow: 0 0 0 3px rgba(0,157,224,.2); }
form ::placeholder { color: #8a9099; }
form p.error { color: #b42318; font-size: .85rem; margin: 0 0 .35rem; }
form :is(input, textarea).error { border-color: #b42318; }
form .widget-explanation p { font-size: .85rem; color: var(--grey-dark); margin: 0; }
form .widget-explanation a { color: var(--menke-blue-text); }
form button.submit { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border: 0; border-radius: 999px; background: var(--menke-blue); color: var(--text); font: 700 .9rem/1 var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
form button.submit:hover, form button.submit:focus-visible { background: var(--petrol); color: var(--white); }
/* Bestätigung nach dem Absenden (Contao gibt sie als .form-confirmation aus)
   Häkchen im blauen Kreis, erster fetter Satz wird zur Überschrift, alles mittig */
.form-confirmation { text-align: center; max-width: 30rem; margin-inline: auto; padding: 1rem 0 .5rem; color: var(--grey-dark); font-size: 1.05rem; }
.form-confirmation::before { content: ""; display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; border-radius: 50%; box-shadow: 0 0 0 .6rem var(--blue-soft);
  background: var(--menke-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315313c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 2.2rem no-repeat; }
.form-confirmation strong { display: block; margin-bottom: .5rem; font: 800 1.5rem/1.2 var(--font-head); color: var(--text); }
/* Nach dem Absenden die Formular-Überschrift ausblenden */
.contact-layout > :has(.form-confirmation) > :is(h2, h3):first-child { display: none; }
/* Danke-Karte so hoch wie die Kontaktkarte, Inhalt mittig */
.contact-layout > :has(.form-confirmation) { align-self: stretch; display: grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .form-confirmation { animation: confirm-in .45s ease-out both; }
  .form-confirmation::before { animation: confirm-pop .5s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes confirm-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@keyframes confirm-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  form .formbody { grid-template-columns: 1fr; }
  form .formbody > .widget.half { grid-column: 1 / -1; }
}

/* ==================================================================
   AKZENTE „aus dem Raster“ (Wunsch Jens: weniger glatt, nicht nach KI)
   Jeder Block steht für sich und kann einzeln gelöscht werden.
   ================================================================== */

/* 1. Code-Editor („Ist Quellcode cool?“): deutlich schräg, rechts aus dem Raster, leichter Schatten */
.code-block .editor { transform: rotate(-8deg) translateX(clamp(1rem, 4vw, 5rem)); transform-origin: 30% 50%; box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); }

/* 2. Notiz „Ist Quellcode cool?“ im Einstieg: wie ein aufgeklebter Zettel */
.note-card { transform: rotate(-4deg); }

/* 3. Leistungsabschnitte: Bilder leicht gekippt, abwechselnd in die andere Richtung */
.svc-detail__media { transform: rotate(1.5deg); }
.bild-links .svc-detail__media { transform: rotate(-1.5deg); }

/* 4. Ablauf-Karten: versetzt statt in Reih und Glied */
@media (min-width: 1025px) {
  .process li:nth-child(even) { transform: translateY(1.5rem); }
  .process { padding-bottom: 1.5rem; }
}

/* 5. Referenzen: „Top-Projekt“ als schräg aufgeklebter Sticker */
.ref-item--featured .badge { transform: rotate(-6deg); padding: .55rem .85rem; font-size: .8rem; box-shadow: 0 .5rem 1rem -.5rem rgba(0, 0, 0, .5); }

/* 6. Gestaltung zum Anfassen: Bildunterschriften wie schräg aufgeklebte Etiketten */
.gallery figcaption { transform: rotate(-3deg); transform-origin: left bottom; }
.gallery figure:nth-child(even) figcaption { transform: rotate(2deg); }

/* 7. Logowand: Plaketten wie locker aufgeklebte Sticker, beim Drüberfahren gerade */
.logos li:nth-child(4n+1) { transform: rotate(-6deg) translateY(.5rem); }
.logos li:nth-child(4n+2) { transform: rotate(4deg) translateY(-.6rem); }
.logos li:nth-child(4n+3) { transform: rotate(-3deg) translateY(.8rem); }
.logos li:nth-child(4n) { transform: rotate(7deg) translateY(-.3rem); }
.logos li:hover { transform: rotate(0) translateY(-4px); }

/* 8. Referenz-Detailseite: weitere Bilder leicht gegeneinander gekippt */
.ref-detail__gallery figure:nth-child(odd) { transform: rotate(-1deg); }
.ref-detail__gallery figure:nth-child(even) { transform: rotate(1.2deg); }

/* 9. Produkte (und Startseite): Kursimple-Screenshot schräg in der dunklen Karte */
.case .browser { transform: rotate(3deg); }

/* 10. Über uns: Jens' Zitat kippt leicht und ragt links aus der Textspalte */
@media (min-width: 901px) {
  .svc-detail__body blockquote { transform: rotate(-1.5deg); margin-left: -2rem; box-shadow: 0 1rem 2rem -1.25rem rgba(21, 49, 60, .35); }
}

/* 11. Kontakt: Kontaktkarte schräg neben dem geraden Formular */
.contact-layout .contact { transform: rotate(2deg); box-shadow: 0 2rem 3rem -1.5rem rgba(21, 49, 60, .45); }

@media (max-width: 900px) {
  /* Auf schmalen Bildschirmen weniger schräg und nicht seitlich versetzt */
  .case .browser { transform: rotate(1.5deg); }
  .contact-layout .contact { transform: rotate(1deg); }
  .code-block .editor { transform: rotate(-3deg); }
  .svc-detail__media, .bild-links .svc-detail__media { transform: rotate(-1deg); }
}

/* ==========================================================================
   404-Seite „Hier endet das Gleis“
   Kopf-Artikel: CSS-Klasse „bg-petrol page-404“ · Link-Artikel: „page-404-links“
   ========================================================================== */
.page-404 { position: relative; overflow: hidden; }
.page-404 .page-head { position: relative; }
/* große, schräg gestellte 404 als Akzent */
.page-404 .page-head::after {
  content: "404"; position: absolute; right: 0; top: 50%;
  font: 800 clamp(6rem, 3rem + 14vw, 16rem)/1 var(--font-head);
  color: transparent; -webkit-text-stroke: 2px var(--menke-blue); opacity: .55;
  transform: translateY(-50%) rotate(-8deg); pointer-events: none;
}
/* Schienen am unteren Rand */
.page-404::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1.25rem; height: 14px;
  background:
    linear-gradient(#c6d5db, #c6d5db) 0 0 / 100% 2px no-repeat,
    linear-gradient(#c6d5db, #c6d5db) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(198,213,219,.5) 0 6px, transparent 6px 34px);
  opacity: .35;
}
.page-404-links .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.page-404-links .rte > p:first-child { color: var(--grey-dark); max-width: 42rem; }
@media (max-width: 700px) {
  .page-404 .page-head::after { position: static; display: block; transform: rotate(-6deg); margin-top: 1.5rem; font-size: 6rem; }
}