/* =====================================================================
   CNC-Gravuren Riedel — Projekt-CSS
   Baut auf assets/css/base.css auf. Gesperrte Struktur-Regeln des
   Fundaments (Nav-Grid, Hero-Höhe/Anschluss, Anker-Landung, z-Skala,
   Scroll-Pfeil, Mobil-Komposition) werden hier NICHT überschrieben.
   Nur Tokens, Farben, Typo, Feinheiten.
   ===================================================================== */

:root {
  /* ---- Markenfarben: 1:1 aus dem Logo und dem CSS der alten Website
         (#39739C Wortmarke/Fließtext, #7199B3 und #7D8CA5 Sekundärtöne,
         #58B8F0 Lichtblau, Seitenhintergrund #F7F7F7). ---- */
  --bg: #f5f7f9;
  --bg-2: #eaeff4;
  --bg-3: #e1e8ef;
  --surface: #ffffff;
  --surface-2: #f2f5f8;

  --text: #15202b;
  --muted: #4f5d6b;
  --dim: #5b6874;

  --brand: #2a6e99;            /* Markenblau (Logo-Wortmarke) */
  --acc: #2a6e99;
  --acc-text: #1d5174;         /* dunklere Stufe fuer kleine Schrift auf Weiss */
  --brand-ink: #ffffff;
  --brand-soft: rgba(42, 110, 153, .10);
  --brand-line: rgba(42, 110, 153, .38);
  --rare: #58b8f0;             /* Zweitakzent, max. 2x pro Seite */
  --acc-2: #58b8f0;

  --line: rgba(21, 32, 43, .12);
  --line-2: rgba(21, 32, 43, .2);

  --on-brand: #ffffff;
  --on-brand-mute: rgba(255, 255, 255, .88);

  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

  /* Typo-Skala: klare Hierarchie, grosszuegiger Weissraum (Kundenvorgabe
     "MODERN & KLAR"). */
  --fs-hero: clamp(2.35rem, 5.6vw, 4.1rem);
  --fs-h2: clamp(1.75rem, 3.3vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.38rem);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 46px rgba(21, 32, 43, .09);
  --shadow-lg: 0 30px 70px rgba(21, 32, 43, .16);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  letter-spacing: -.005em;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  letter-spacing: -.025em;
  line-height: 1.12;
}
h2 { line-height: 1.14; }
p { line-height: 1.62; }

/* ---------- Kopfleiste ---------- */
.nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 1px 0 var(--line); }
.nav-logo img { height: 30px; width: auto; }
.nav-links a { font-weight: 600; font-size: .96rem; }
.nav-cta { font-size: .93rem; }

/* ---------- Sektionskopf (R1: zentriert) ---------- */
.kicker {
  display: inline-block; font-size: .74rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--acc-text);
  margin-bottom: 14px;
}
.section-head { text-align: center; max-width: 62ch; margin-inline: auto; }
.section-head p { color: var(--muted); margin-top: 14px; }
/* Farbflächen-Gesetz: die eigene .section-head-Regel oben ist spezifischer als
   `.band-brand p` aus dem Fundament und würde den Untertext grau auf Markenblau
   setzen. Deshalb hier mit höherer Spezifität zurückbiegen. */
.band-brand .kicker,
.band-brand .section-head .kicker { color: var(--on-brand); }
.band-brand .section-head p,
.band-brand .section-head h2 { color: var(--on-brand-mute); }
.band-brand .section-head h2 { color: var(--on-brand); }

/* ---------- Hero ---------- */
.hero .eyebrow {
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(42, 110, 153, .3);
  color: var(--acc-text);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero h1 .ln { display: block; }
.hero-content p.lead { color: #22313f; font-weight: 500; }
/* Vertrauenszeile: Pillen, damit sie auf dem Bild lesbar bleiben. */
.hero .trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 34px; padding: 0;
}
.hero .trust li {
  font-size: .84rem; font-weight: 700; color: var(--acc-text);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(42, 110, 153, .22);
  border-radius: 999px; padding: 8px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Flache Bildschirme: Kür-Elemente sparen statt abschneiden.
   Faellt die Vertrauenszeile weg, ist der Pfeil das letzte Element im Hero.
   Er braucht dann seine eigene Mitte: gemessen lagen 31px Luft darueber und
   127px darunter - ein freistehendes Element, das oben klebt und unter sich
   ein leeres Band hat, laesst die Seite unfertig wirken (gelernte Regel
   "freistehende Elemente optisch mittig in ihrer Luecke"). Der Zuschlag
   verteilt die Restluft gleichmaessig, ohne den Pfeil aus dem ersten
   Screen zu schieben. */
@media (max-height: 760px) and (min-width: 769px) {
  .hero .trust { display: none; }
  .scroll-down { margin-top: 74px; }
}

/* Helle Vignette, aber so dosiert, dass das Motiv nicht ausgewaschen wird. */
.hero-veil.light {
  background:
    radial-gradient(ellipse 70% 58% at 50% 46%,
      rgba(245, 247, 249, .90) 0%, rgba(245, 247, 249, .78) 36%,
      rgba(245, 247, 249, .38) 64%, rgba(245, 247, 249, 0) 88%),
    linear-gradient(180deg, rgba(245, 247, 249, .72) 0%, rgba(245, 247, 249, 0) 20%,
      rgba(245, 247, 249, 0) 66%, rgba(245, 247, 249, .92) 100%);
}

/* ---------- Kacheln ---------- */
.tile { min-height: 340px; }
.tile-content { min-height: 340px; }
.tile-bg { filter: saturate(.7) contrast(1.02) brightness(.92); }
.tile:hover .tile-bg { filter: saturate(1) contrast(1.06) brightness(.98); }
.tile-veil {
  background: linear-gradient(180deg, rgba(9, 22, 33, .18) 0%, rgba(9, 22, 33, .62) 52%, rgba(9, 22, 33, .93) 100%);
}
.tile-content h3 { color: #fff; }
.tile-content p { color: rgba(255, 255, 255, .9); font-size: .96rem; max-width: 34ch; }
.tile-kicker {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #b9ddf5; margin-bottom: 10px;
}
.tile-link { color: #fff; margin-top: 16px; }

/* ---------- Arbeitsbeispiele (Originalfotos, nie über native Auflösung) ---------- */
.werk-grid {
  display: grid; gap: 22px;
  /* ACHTUNG: repeat(auto-fit, minmax(0, X)) laesst die Spalten auf 0 schrumpfen —
     auf dem Tablet standen dadurch acht 44px-Briefmarken in einer Reihe.
     Deshalb feste Spaltenzahl. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1120px; margin-inline: auto;
}
.werk {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-align: center;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.werk:hover { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.werk img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 4;
  object-fit: cover; background: var(--surface-2);
  border-bottom: 0;
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.werk:nth-child(-n + 3) img {
  filter: saturate(.72) brightness(.82) contrast(1.14) hue-rotate(-18deg);
}
.werk span { display: block; padding: 10px 12px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.werk-note { text-align: center; color: var(--dim); font-size: .86rem; margin-top: 22px; }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); max-width: 1060px; margin-inline: auto; }
.schritt {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 24px; text-align: center; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.schritt b {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--acc-text);
  font-size: 1.02rem; font-variant-numeric: tabular-nums;
}
.schritt h3 { font-size: 1.05rem; margin: 0; }
.schritt p { color: var(--muted); font-size: .94rem; margin: 0; }
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }

/* ---------- Vertiefung "Über uns" ---------- */
.split {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; max-width: 1080px; margin-inline: auto;
}
.split > div { min-width: 0; }
.split .text { text-align: center; }
.split .text p { color: var(--muted); margin-bottom: 1rem; }
.split figure { margin: 0; }
/* Originalfotos sind klein: nie über ihre native Breite dehnen (PIXELIG). */
.split figure img {
  width: 100%; max-width: 520px; height: auto; margin-inline: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.split figure img.laser-image { width: 50%; max-width: 260px; }
.split figure.laser-figure { transform: translateX(-32px); }
.split figcaption { margin-top: 10px; font-size: .84rem; color: var(--dim); text-align: center; }
.laser-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 920px;
  margin: 34px auto 0;
}
.laser-example {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.laser-example img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.laser-example-hover { opacity: 0; transition: opacity .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .laser-example:hover .laser-example-hover,
  .laser-example:focus-within .laser-example-hover { opacity: 1; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split figure.laser-figure { transform: none; }
}
@media (max-width: 600px) {
  .laser-gallery { grid-template-columns: 1fr; max-width: 420px; gap: 16px; }
}

/* ---------- Karten / Kontakt ---------- */
.card h3 { font-size: 1.1rem; }
.card-stainless {
  background-image: linear-gradient(rgba(9, 22, 33, .58), rgba(9, 22, 33, .78)), url('../media/lasergravur-edelstahl-werkstueck.jpg');
  background-position: center;
  background-size: cover;
  color: #fff;
}
.card-aluminium {
  background-image: linear-gradient(rgba(9, 22, 33, .58), rgba(9, 22, 33, .78)), url('../media/lasergravur-eloxiertes-aluminium.jpg');
  background-position: center;
  background-size: cover;
  color: #fff;
}
.card-parts {
  background-image: linear-gradient(rgba(9, 22, 33, .58), rgba(9, 22, 33, .78)), url('../media/lasergravur-beigestellte-teile.jpg');
  background-position: center;
  background-size: cover;
  color: #fff;
}
.card-stainless h3,
.card-stainless p,
.card-aluminium h3,
.card-aluminium p,
.card-parts h3,
.card-parts p { color: #fff; }
.card-stainless:hover {
  background-image: linear-gradient(rgba(9, 22, 33, .48), rgba(9, 22, 33, .72)), url('../media/lasergravur-edelstahl-werkstueck.jpg');
}
.card-aluminium:hover {
  background-image: linear-gradient(rgba(9, 22, 33, .48), rgba(9, 22, 33, .72)), url('../media/lasergravur-eloxiertes-aluminium.jpg');
}
.card-parts:hover {
  background-image: linear-gradient(rgba(9, 22, 33, .48), rgba(9, 22, 33, .72)), url('../media/lasergravur-beigestellte-teile.jpg');
}
.contact-item { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin-inline: auto;
}
.contact-item .icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--acc-text); flex: 0 0 auto;
}
.contact-item .icon svg { width: 22px; height: 22px; }
.contact-item strong { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.contact-item a, .contact-item span { font-size: 1.04rem; font-weight: 600; color: var(--text); }
.contact-item small { color: var(--muted); font-size: .9rem; font-weight: 400; display: block; }

/* ---------- Anfrage-Formular (baut eine E-Mail, kein Server, kein Tracking) ---------- */
.anfrage { max-width: 620px; margin-inline: auto; text-align: left; }
.anfrage .feld { display: block; margin-bottom: 16px; }
.anfrage .feld span { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 6px; }
.anfrage input, .anfrage textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color .2s var(--ease-ui);
}
.anfrage input[type="file"] { padding: 9px 10px; }
.anfrage .feld small { display: block; color: var(--dim); font-size: .82rem; margin-top: 6px; }
.anfrage input:focus-visible, .anfrage textarea:focus-visible { border-color: var(--brand); }
.anfrage textarea { min-height: 130px; resize: vertical; }
.anfrage .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.anfrage .zeile > * { min-width: 0; }
@media (max-width: 560px) { .anfrage .zeile { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }
.anfrage .cta-block { margin-top: 8px; }
.anfrage-note { color: var(--dim); font-size: .86rem; margin-top: 14px; text-align: center; }
.consent-field { text-align: left; }
.consent-field span { display: flex !important; align-items: flex-start; gap: 8px; }
.consent-field input { width: auto; flex: 0 0 auto; margin-top: 5px; }

/* Ein allein stehender Knopf sitzt mittig (fehlt im Fundament). */
.cta-block { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- CTA-Band ---------- */
.cta-band.band-brand { background: linear-gradient(135deg, #2a6e99 0%, #1d5174 100%); }
.cta-band .cta-actions {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 14px; margin-top: 30px; justify-content: center;
}
@media (max-width: 560px) { .cta-band .cta-actions { grid-auto-flow: row; width: 100%; } }

/* ---------- Seitenkopf der Unterseiten ---------- */
.page-head {
  margin-top: var(--nav-h); padding-block: clamp(3.4rem, 9vw, 5.6rem) clamp(1.6rem, 4vw, 2.4rem);
  text-align: center; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 18ch; margin-inline: auto; }
.page-head p { color: var(--muted); margin-top: 16px; max-width: 58ch; margin-inline: auto; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); }
.footer-logo { height: 26px; width: auto; margin-bottom: 14px; }
.footer p { color: var(--muted); font-size: .93rem; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--acc-text); }
.site-footer {
  background: #1d2a32;
  color: #fff;
  padding: 22px 0;
}
.site-footer .container {
  overflow: hidden;
}
.footer-inner {
  padding-left: 22px;
}
.footer-inner > div {
  float: left;
  width: 20%;
  padding-left: 10px;
}
.footer-inner > div:first-child {
  padding-left: 0;
}
.footer-inner h4 {
  margin-top: 0;
  margin-bottom: 8px;
}
.footer-inner a {
  color: #dfeaf1;
}
.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links li {
  margin-bottom: 2px;
}
.footer-inner p {
  margin: 0 0 2px 0;
  line-height: 1.5;
}
/* ---------- Rechtsseiten ----------
   Die Spalte muss genau so breit sein wie der Text darin. Das Fundament gibt
   .legal 75ch, die Absaetze sind global aber auf 65ch gedeckelt: der Textblock
   stand dadurch linksbuendig in einer zu breiten Spalte und lag gemessen 51px
   links der Seitenmitte, waehrend die zentrierte H1 exakt mittig sass. Sichtbar
   als "leicht schief" - genau der Unterschied, den ein Kunde bemerkt. */
.legal { max-width: 66ch; margin-inline: auto; }
.legal p, .legal li { max-width: none; }
.legal p, .legal li { color: var(--muted); }
.legal h2 { color: var(--text); }
.legal a { color: var(--acc-text); }

/* ---------- Mobil / schmale Fenster ----------
   Die Mobil-Komposition des Fundaments gilt uneingeschraenkt: die
   Vertrauenszeile ist unter 769px AUS (die eigene .hero .trust-Regel oben
   wuerde sie sonst wieder einblenden und Pfeil + Anruf-Knopf aus dem ersten
   Screen druecken). Der Nav-CTA verschwindet zusammen mit den Links, sonst
   ist die rechte Nav-Zone breiter als die linke (STRUKTUR/NAVMITTE). */
@media (min-width: 769px) and (max-width: 1099px) {
  .nav-cta { padding: 9px 15px; font-size: .82rem; }
}
@media (max-width: 768px) {
  .hero .trust { display: none; }
  .split figure img { max-width: 100%; }
}
@media (max-width: 600px) {
  .werk-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
}

/* ---------- Feinschliff ---------- */
.tel, .num, .preis { font-variant-numeric: tabular-nums; }
img { background-color: var(--surface-2); }

/* ---------- Nav-Wortmarke ----------
   Die Original-Wortmarke ist 916x64 px (Verhaeltnis 14:1). In der 1fr-Spur des
   gesperrten Nav-Grids wird sie unter 1200px auf wenige Pixel Hoehe gequetscht
   und damit unlesbar. In der Leiste steht deshalb dieselbe Wortmarke als Text
   in derselben Markenfarbe; das Original-Bild steht im Footer, wo es Platz hat. */
.nav-logo .wortmarke {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(.98rem, 1.5vw, 1.16rem);
  letter-spacing: .01em; color: var(--acc-text);
}
.nav-logo:hover .wortmarke { color: var(--brand); }
@media (max-width: 420px) { .nav-logo .wortmarke { font-size: .92rem; } }

/* 769-1099px: Links und Wortmarke etwas kleiner, damit die Wortmarke in ihre
   1fr-Spur passt. Eine zu breite Logo-Spur dehnt das gesperrte Nav-Grid und
   schiebt die Linkgruppe aus der Bildschirmmitte (NAVMITTE/STRUKTUR). */
@media (min-width: 769px) and (max-width: 1099px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .83rem; }
  .nav-logo .wortmarke { font-size: .88rem; }
}

/* ---------- Nachbesserungen nach Tor B (Runde 1) ---------- */
/* Klickflaeche der Wortmarke auf 44px bringen. */
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.burger { min-height: 44px; justify-content: center; }

/* Handy: die Wortmarke darf umbrechen. Nowrap zwingt beide 1fr-Spuren des
   gesperrten Nav-Grids auf Logo-Breite - das ergibt 402px Inhalt auf einem
   360px-Handy (OVERFLOW) und eine unsymmetrische Leiste (STRUKTUR). */
@media (max-width: 768px) {
  .nav-inner { gap: 12px; }
  .nav-logo .wortmarke {
    white-space: normal; max-width: 9.5ch; font-size: .95rem; line-height: 1.12;
  }
}

/* Querformat-Handys und sehr flache Fenster: der Scroll-Pfeil muss komplett
   in den ersten Screen passen (hero-erstblick-komplett). */
@media (max-height: 470px) {
  .hero .hero-content { padding-block: 0; }
  .hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.4rem); }
  .hero-content p.lead { margin-top: 10px; font-size: 1rem; }
  .scroll-down { margin-top: 12px; width: 46px; height: 46px; }
}
/* Die 44px-Klickflaeche der Wortmarke wuerde die Leiste auf 73px aufblasen. */
.nav-inner { padding-block: 10px; }

/* Die Galerie ist der Bild-Baustein der Branchen-Buehne: viel Bild, wenig Luft. */
#arbeiten { padding-block: clamp(2.6rem, 5vw, 3.6rem); }
#arbeiten .section-head { margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }

/* Rechtsseiten: lange deutsche Komposita duerfen umbrechen, sonst dehnen sie
   den Layout-Viewport (das Gate meldet dann faelschlich die Navigation). */
.legal p, .legal li, .legal h1, .legal h2, .legal h3 { overflow-wrap: break-word; }

/* =====================================================================
   Nachbesserungen nach Tor C (zwei Reviewer auf den Screenshots)
   ===================================================================== */

/* Wortmarke bricht mobil sauber in ZWEI Zeilen ("CNC-Gravuren" / "Riedel"),
   nicht in drei. 9.5ch war zu eng. */
@media (max-width: 768px) {
  .nav-logo .wortmarke { max-width: 13ch; }
}

/* Hero-Pille: echte Pille statt Kasten mit klebenden Buchstaben. */
.hero .eyebrow { border-radius: 999px; padding-inline: 18px; }

/* Knopf- und Link-Beschriftungen bleiben einzeilig, Pfeile bekommen eine
   feste Groesse (ein SVG ohne width rendert sonst riesig). */
.btn, .tile-link, .more, .contact-item a { white-space: nowrap; }
.btn svg, .more svg, .tile-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
.more { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 420px) { .btn { white-space: normal; } }

/* Akzentwort im Hero: der helle Verlaufsanteil verschwand auf dem hellen
   Bild (1,7:1). Eigene, dunklere Verlaufsstufen. */
.hero h1 .grad { --aw-a: #1d5174; --aw-b: #2a6e99; --aw-hi: #58b8f0; }

/* Kachel: Text klebte an der Ueberschrift, Link brach zweizeilig um. */
.tile-content p { margin-top: 8px; }
.tile-link { white-space: nowrap; }

/* Split-Text: Ueberschrift und erster Absatz brauchen Luft. */
.split .text h2 + p, .split .text .kicker + h2 + p { margin-top: 1.1rem; }

/* Kontaktkarten: Inhalt bleibt oben, statt sich auf Kartenhoehe zu dehnen. */
.contact-item { justify-content: flex-start; }
.contact-item a { overflow-wrap: anywhere; white-space: normal; }

/* CTA-Band: das Loch zwischen Untertext und Buttonpaar schliessen. */
.cta-band .section-head { margin-bottom: 0; }
.cta-band .cta-actions { margin-top: 34px; }

/* Seitenkopf: oben und unten gleich viel Luft. */
.page-head { padding-block: clamp(3rem, 7vw, 4.6rem) clamp(2.4rem, 6vw, 3.6rem); }
.page-head .kicker { margin-bottom: 12px; }

/* Footer-Wortmarke als Text (das Logo-PNG brachte eine helle Kastenflaeche
   und erreichte auf dem Footer-Band nur 3,4:1). */
.footer-wortmarke {
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  letter-spacing: .01em; color: var(--acc-text); margin-bottom: 14px;
}

/* Ein einzelnes grosses Sektionsbild steht mittig, nicht in einer Rasterspur. */
.grossbild { margin: 0 auto; max-width: 900px; }
.grossbild img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Sehr schmale Handys: lange Linkbeschriftungen duerfen wieder umbrechen,
   sonst dehnen sie ihre Karte ueber den Bildschirm (OVERFLOW auf 360px). */
@media (max-width: 620px) {
  .more, .contact-item a, .tile-content p { white-space: normal; }
  .more { flex-wrap: wrap; }
}

/* =====================================================================
   Aenderungswunsch 11.09.2026 — Hero-Headline und Leistungskacheln
   ===================================================================== */

/* Der Slogan ist EIN Satz und steht darum in EINER Zeile, nicht als zwei
   gestapelte Saetze. Die Schriftgroesse ist leicht zurueckgenommen, damit
   "Praezision in jeder Gravur" auch bei 1200px Container ungebrochen in
   die Zeile passt; min()-Deckel verhindert jeden Ueberlauf, text-wrap
   balance sorgt auf dem Handy fuer zwei gleich lange Zeilen. */
.hero .hero-content h1 {
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  max-width: min(100%, 26ch);
  text-wrap: balance;
}

/* Leistungskacheln: clean und minimalistisch. Geschlossen zeigt jede Kachel
   NUR Kicker und Titel, optisch mittig — dadurch sitzen alle vier Titel auf
   derselben Hoehe, egal wie lang der Beschreibungstext ist. Der Text liegt
   als Overlay IN der Kachel und kann ihre Hoehe damit nie veraendern:
   ungleich hohe oder unruhig gefuellte Kacheln sind so baulich ausgeschlossen. */
.tile {
  height: clamp(280px, 26vw, 330px); min-height: 0;
  display: block;
}
/* Das Bild liegt im Ruhezustand buendig in der Kachel (der Hover-Zoom bleibt).
   Ein dauerhaft ueberstehendes Motiv macht die Kachel zur Scrollbox und laesst
   das QA-Tor zu Recht "Inhalt wird abgeschnitten" melden. */
.tile-bg { transform: scale(1); }
.tile-head { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }

.tile-face {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px 20px 62px;
  font: inherit; color: #fff; text-align: center;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tile-face .tile-kicker { margin-bottom: 0; }
/* Feste Zeile fuer zwei Titelzeilen: dadurch beginnen Kicker und Titel in
   ALLEN vier Kacheln auf exakt derselben Hoehe — ein einzeiliger Titel
   rutscht nicht nach oben, ein zweizeiliger nicht nach unten. */
.tile-title {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.25;
  max-width: 16ch; min-height: 2.5em;
}

/* Reiner Zustands-Anzeiger, keine zweite Bedienflaeche: + geschlossen,
   x geoeffnet. pointer-events:none, damit er die Kachel nie klick-tot legt. */
.tile-plus {
  position: absolute; z-index: 4; left: 50%; bottom: 22px;
  width: 34px; height: 34px; border-radius: 999px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(9, 22, 33, .28);
  transform: translateX(-50%);
  transition: transform .3s var(--ease-ui), border-color .3s, background-color .3s;
}
.tile-plus::before, .tile-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff;
  transform: translate(-50%, -50%);
}
.tile-plus::before { width: 13px; height: 1.5px; }
.tile-plus::after { width: 1.5px; height: 13px; }
.tile:hover .tile-plus { border-color: #fff; background: rgba(9, 22, 33, .5); }
.tile.is-open .tile-plus { transform: translateX(-50%) rotate(45deg); }

.tile-info {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 26px 22px 62px; text-align: center; cursor: pointer;
  background: rgba(9, 22, 33, .96);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  overflow: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease-ui), transform .3s var(--ease-ui), visibility .3s;
}
.tile.is-open .tile-info { opacity: 1; visibility: visible; transform: none; }
/* Der Fokusring des Knopfes laege bei geoeffneter Kachel unter dem Overlay —
   deshalb bekommt ihn die ganze Kachel. */
.tile:has(.tile-face:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.tile-info p {
  margin: 0; max-width: 30ch;
  color: rgba(255, 255, 255, .92); font-size: .95rem; line-height: 1.55;
}
/* Der Link faerbt sich erst, wenn die Maus WIRKLICH auf ihm steht — die
   Kachel-Hover-Regel aus base.css wuerde ihn sonst auf dunklem Grund blau
   faerben (zu wenig Kontrast). */
.tile-info .tile-link { margin-top: 0; cursor: pointer; }
.tile:hover .tile-info .tile-link { color: #fff; border-color: transparent; gap: 8px; }
.tile:hover .tile-info .tile-link:hover { border-color: #fff; gap: 14px; }