/* TL-K GmbH – site.css
   Eine Datei, kein Framework, kein JavaScript.
   Mobile-first: Grundansicht einspaltig, Erweiterung ab 44rem / 64rem. */

:root {
  --brand: #983818;            /* Rostrot aus dem Logo */
  --brand-dark: #6e2810;
  --brand-tint: #f6ece7;       /* sehr helle Rostfläche für Hervorhebungen */
  --ink: #000;                 /* Überschriften, wie im Logo */
  --text: #262626;
  --text-muted: #5c5c5c;
  --surface: #fff;
  --surface-alt: #f3f3f1;
  --line: #d9d9d6;
  --focus: #1a4fd6;

  --content-max: 72rem;
  --prose-max: 40rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: .9rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2rem;
  --step-4: 2.6rem;
  --skew: 12deg;               /* Schrägung der Logotype */
}

@media (min-width: 44rem) {
  :root { --step-3: 2.4rem; --step-4: 3.4rem; --step-0: 1.125rem; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 var(--space-3); letter-spacing: -.01em; }
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; }
h4 { font-size: var(--step-0); font-weight: 700; }
p, ul, ol, dl { margin: 0 0 var(--space-3); }
p:last-child, ul:last-child, dl:last-child { margin-bottom: 0; }
a { color: var(--brand); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2rem, var(--content-max)); margin-inline: auto; }
@media (min-width: 44rem) { .wrap { width: min(100% - 3rem, var(--content-max)); } }
.prose { max-width: var(--prose-max); }

.skip { position: absolute; left: var(--space-3); top: -4rem; background: var(--ink); color: #fff; padding: var(--space-2) var(--space-3); z-index: 10; }
.skip:focus { top: var(--space-3); }

/* ---------- Kopf ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
}
.logo img { width: clamp(9rem, 32vw, 13rem); }
.header-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); }
.tel { display: none; font-weight: 700; color: var(--ink); text-decoration: none; }
.tel:hover { color: var(--brand); }
@media (min-width: 44rem) { .tel { display: inline; } }

.lang { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lang a, .lang span {
  display: inline-block; min-width: 2.4rem; padding: .3rem .45rem; text-align: center;
  text-decoration: none; color: var(--text-muted); border: 1px solid var(--line); text-transform: uppercase; font-size: .8rem; font-weight: 700;
}
.lang a:hover { color: var(--brand); border-color: var(--brand); }
.lang [aria-current] { color: #fff; background: var(--ink); border-color: var(--ink); }

/* Navigation: immer sichtbar, umbrechend, kein Menü-Button */
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0; padding: 0 0 var(--space-2); list-style: none; font-size: var(--step--1); }
.site-nav a { display: inline-block; padding: var(--space-2) 0; text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-color: var(--line); color: var(--brand); }
.site-nav [aria-current] { border-color: var(--brand); color: var(--brand); }
@media (min-width: 64rem) {
  .site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-4); }
  .header-top { display: contents; }
  .logo { grid-column: 1; grid-row: 1; padding: var(--space-3) 0; }
  .logo img { width: 11rem; }
  .site-nav { grid-column: 2; grid-row: 1; }
  .site-nav ul { padding: 0; justify-content: center; gap: 0 1.25rem; font-size: 1rem; flex-wrap: nowrap; white-space: nowrap; }
  .site-nav a { padding: var(--space-4) 0; }
  .header-meta { grid-column: 3; grid-row: 1; }
}
@media (min-width: 64rem) and (max-width: 75rem) { .site-nav ul { gap: 0 var(--space-3); font-size: .95rem; } .logo img { width: 10rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; }
.hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; }
.hero-panel {
  background: var(--brand); color: #fff; padding: var(--space-4) var(--space-4) var(--space-5);
}
.hero-panel h1 { color: #fff; margin-bottom: var(--space-3); }
.hero-panel p { max-width: 34rem; font-size: var(--step-1); }
.hero-panel .btn { margin-top: var(--space-3); }
@media (min-width: 44rem) {
  .hero img { aspect-ratio: 21 / 9; }
  .hero-panel {
    position: absolute; left: 0; bottom: 0; width: min(38rem, 78%);
    padding-right: var(--space-7);
    clip-path: polygon(0 0, 100% 0, calc(100% - 3.2rem) 100%, 0 100%);
  }
}
@media (min-width: 64rem) { .hero img { aspect-ratio: 5 / 2; } }

/* Hero ohne Bild (Unterseiten) */
.page-head { background: var(--surface-alt); border-bottom: 4px solid var(--brand); padding: var(--space-5) 0; }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head p { color: var(--text-muted); font-size: var(--step-1); max-width: var(--prose-max); }

/* ---------- Abschnitte ---------- */
.section { padding: var(--space-5) 0; }
.section-alt { background: var(--surface-alt); }
.section-brand { background: var(--brand); color: #fff; }
.section-brand h2, .section-brand h3 { color: #fff; }
.section-brand h2 { font-size: var(--step-2); }
.section-brand a { color: #fff; }
@media (min-width: 44rem) { .section { padding: var(--space-6) 0; } }

.split { display: grid; gap: var(--space-4); align-items: center; }
.split img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 44rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .split.reverse > :first-child { order: 2; }
}

.grid { display: grid; gap: var(--space-4); }
.grid > *, .split > *, .tree > * { min-width: 0; }
@media (min-width: 44rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Nutzenkarte: Rahmen in Markenfarbe, wie in den bisherigen TL-K-Grafiken */
.card { border: 1px solid var(--line); background: var(--surface); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.card h3, .card h2 { font-size: var(--step-1); font-weight: 700; margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); }

/* Kennzahlen / Kernaussagen als Liste mit Markenkante */
.marks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.marks li { border-left: 4px solid var(--brand); padding: var(--space-1) 0 var(--space-1) var(--space-3); }
.marks strong { display: block; color: var(--ink); }
@media (min-width: 44rem) { .marks { grid-template-columns: repeat(3, 1fr); } }

/* Baumstruktur der Leistungsübersicht */
.tree { display: grid; gap: var(--space-4); }
.tree h3 { background: var(--brand); color: #fff; padding: var(--space-3) var(--space-4); margin: 0; font-size: var(--step-1); }
.tree .col:nth-child(2) h3 { background: #b0614a; }
.tree .col:nth-child(3) h3 { background: #c98d7c; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--brand); }
.tree .col:nth-child(2) ul { border-color: #b0614a; }
.tree .col:nth-child(3) ul { border-color: #c98d7c; }
.tree > .col > ul > li { border: 1px solid var(--brand); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); position: relative; background: var(--surface); }
.tree .col:nth-child(2) > ul > li { border-color: #b0614a; }
.tree .col:nth-child(3) > ul > li { border-color: #c98d7c; }
.tree > .col > ul > li::before { content: ""; position: absolute; left: calc(-1 * var(--space-3) - 2px); top: 1.1rem; width: var(--space-3); border-top: 2px solid currentColor; color: inherit; opacity: .6; }
.tree ul ul { border: 0; padding: var(--space-1) 0 0 var(--space-3); list-style: disc; color: var(--text-muted); font-size: var(--step--1); }
.tree ul ul li { padding: 0; margin: 0; }
.tree strong { color: var(--ink); }
@media (min-width: 44rem) { .tree { grid-template-columns: 1.2fr 1fr 1.2fr; align-items: start; } }

/* Kontaktblöcke */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.contact-list li { border-top: 3px solid var(--brand); padding-top: var(--space-3); }
.contact-list h3 { margin-bottom: var(--space-1); }
.contact-list .role { color: var(--text-muted); margin-bottom: var(--space-2); }
.contact-list a { display: block; text-decoration: none; padding: .15rem 0; }
.contact-list a:hover { text-decoration: underline; }
@media (min-width: 44rem) { .contact-list { grid-template-columns: repeat(3, 1fr); } }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }
dl.facts dt { color: var(--text-muted); }
dl.facts dd { margin: 0; }

.contact-box { background: var(--brand-tint); border-left: 6px solid var(--brand); padding: var(--space-4); }
.contact-box h2 { font-size: var(--step-2); }
.contact-box p { max-width: var(--prose-max); }
.contact-box .actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }

/* Zertifikate */
.cert { display: grid; gap: var(--space-3); grid-template-columns: 7rem 1fr; align-items: start; border: 1px solid var(--line); padding: var(--space-3); }
.cert img { border: 1px solid var(--line); }
.cert h3, .cert h2 { font-size: var(--step-1); font-weight: 700; margin-bottom: var(--space-1); }
.cert dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem var(--space-3); font-size: var(--step--1); margin-bottom: var(--space-2); }
.cert dt { color: var(--text-muted); }
.cert dd { margin: 0; }
@media (min-width: 44rem) { .cert { grid-template-columns: 10rem 1fr; } .cert-list { display: grid; gap: var(--space-4); } }

/* Schaltflächen */
.btn {
  display: inline-block; padding: .75rem 1.5rem; font-weight: 700; text-decoration: none;
  background: var(--ink); color: #fff; border: 2px solid var(--ink);
  clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* Rechtstexte */
.legal h2 { font-size: var(--step-2); margin-top: var(--space-5); }
.legal h3 { margin-top: var(--space-4); }
.legal { max-width: var(--prose-max); }

/* ---------- Fuß ---------- */
.site-footer { background: var(--ink); color: #d6d6d6; padding: var(--space-5) 0 var(--space-4); margin-top: var(--space-6); font-size: var(--step--1); }
.site-footer a { color: #fff; }
.site-footer h2 { color: #fff; font-size: var(--step-0); margin-bottom: var(--space-2); }
.footer-grid { display: grid; gap: var(--space-4); }
.site-footer .logo img { width: 10rem; margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .15rem 0; }
.footer-bottom { border-top: 1px solid #333; margin-top: var(--space-4); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }
@media (min-width: 44rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Druck ---------- */
@media print {
  .site-nav, .lang, .skip, .btn, .hero img { display: none !important; }
  .site-footer { background: none; color: #000; border-top: 1px solid #000; }
  .site-footer a, .hero-panel, .hero-panel h1 { color: #000; }
  .hero-panel { background: none; padding: 0; position: static; clip-path: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}