/* edda v28 · Gemeinsame Ergänzungen für alle Seiten (nach styles.css laden):
   aktiver Nav-Link, Mobilmenü, Unterseiten-Hero (.phero), Abschlussband (.pcta), Textlink (.tlink).
   Tokens, Breakpoints (1100 / 960 / 640 / 400) und Formensprache wie in styles.css. */

/* ==========================================================================
   Navigation: aktive Seite und Mobilmenü
   ========================================================================== */
/* Aktiver Link: Tinte plus kurze Petrol-Kante unter dem Wort */
.nav__links a { position: relative; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--accent-800); }

/* Menü-Knopf: nur unter 1100 px und nur mit JS (html.js kommt aus dem Inline-Skript im Kopf) */
.nav__menu-btn { display: none; flex: none; gap: 8px; }
.nav__menu-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.nav__menu-ico path { transition: d 0.2s var(--ease); }
.nav__menu-btn[aria-expanded="true"] .nav__menu-ico .l1 { d: path("M3 3l10 10"); }
.nav__menu-btn[aria-expanded="true"] .nav__menu-ico .l2 { d: path("M13 3 3 13"); }
.nav__menu-btn[aria-expanded="true"] { border-color: var(--ink); }

/* Ausklapp-Fläche unter der Leiste, bündig mit den Rahmenlinien */
.nav__menu { display: none; position: absolute; left: var(--line); right: var(--line); top: calc(100% - 1px); max-height: calc(100vh - var(--nav-h) - 16px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.nav__menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 var(--gutter); border-bottom: 1px solid var(--border); font-size: 18px; text-decoration: none; color: var(--ink); }
.nav__menu a:not(.btn)::after { content: ""; flex: none; width: 7px; height: 7px; background: var(--border-2); }
.nav__menu a[aria-current="page"] { font-weight: 500; }
.nav__menu a[aria-current="page"]::after { background: var(--accent-800); }
.nav__menu-cta { padding: 16px var(--gutter) 20px; }
.nav__menu-cta .btn { width: 100%; }
@media (hover: hover) { .nav__menu a:not(.btn):hover::after { background: var(--accent-800); } }

@media (max-width: 1100px) {
  html.js .nav__menu-btn { display: inline-flex; }
  html.js .nav__menu:not([hidden]) { display: block; animation: nav-menu-in 0.2s var(--ease); }
}
@keyframes nav-menu-in { from { opacity: 0; translate: 0 -6px; } }
@media (max-width: 640px) {
  .nav__menu-btn { padding: 0 12px; }
  .nav__menu a:not(.btn) { font-size: 17px; }
}
@media (max-width: 380px) {
  .nav__bar { gap: 6px; padding-left: 12px; }
  .nav__menu-btn { padding: 0 8px; gap: 6px; }
  .nav .nav__cta .btn { padding-inline: 12px; }
}
@media (max-width: 340px) {
  html.js .nav__cta { display: none; } /* der Kontakt-Knopf steht im Menü */
  html.js .nav__menu-btn { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu { animation: none !important; }
  .nav__menu-ico path { transition: none; }
}

/* ==========================================================================
   Unterseiten-Hero: <section class="phero sheet"><div class="wrap phero__grid">
   Zwei Spalten (Text links, Karte rechts) oder .phero--solo mit einer Spalte.
   ========================================================================== */
.phero { padding: 64px 0 88px; }
.phero.sheet { border-top: 0; }
.phero.sheet::before, .phero.sheet::after { display: none; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: center; }
.phero__text { display: flex; flex-direction: column; gap: 28px; padding-block: 16px; min-width: 0; }
.phero__text .eyebrow { margin-bottom: -10px; }
.phero__lead { max-width: 34em; text-wrap: pretty; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.phero__aside { min-width: 0; }
/* Eine Spalte: kompakter, Text bleibt lesbar schmal */
.phero--solo { padding: 56px 0 72px; }
.phero--solo .phero__grid { grid-template-columns: minmax(0, 1fr); }
.phero--solo .phero__text { max-width: 52em; }

/* ==========================================================================
   Abschlussband: <section class="pcta"> in Optik von .contact, ohne Formular
   ========================================================================== */
.pcta { position: relative; background: var(--accent-800); color: #fff; padding-block: 104px; isolation: isolate; overflow: clip; }
.pcta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(220, 238, 242, 0.22) 1px, transparent 1.3px); background-size: 22px 22px; background-position: var(--edge) 0;
  -webkit-mask-image: radial-gradient(70% 90% at 0% 100%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 0% 100%, #000, transparent 75%);
}
.pcta :focus-visible { outline-color: #fff; }
.pcta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 52em; }
.pcta .eyebrow { margin-bottom: 0; color: var(--accent-200); }
/* Petrol auf Petrol wäre unsichtbar: zweite Zeile in Hellpetrol */
.pcta .line--soft { color: var(--accent-200); }
.pcta .lead { max-width: 34em; color: var(--accent-100); text-wrap: pretty; }
.pcta__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* Hauptknopf auf Petrol: weiße Fläche */
.pcta .btn--primary { background: #fff; color: var(--accent-800); }
.pcta .btn--primary:focus-visible { box-shadow: 0 0 0 2px var(--accent-800); }
/* Zweiter Knopf auf dunklem Grund: weiße Kontur */
.btn--ghost-light { background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; }
@media (hover: hover) {
  .pcta .btn--primary:hover { background: var(--accent-50); }
  .btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
}

/* ==========================================================================
   Textlink: <a class="tlink">Text<svg class="i-arrow">…</svg></a>
   ========================================================================== */
/* Textlink im Fließtext (Verweise auf skillbyte.de, troester.de) */
.ilink { color: var(--accent-800); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .ilink:hover { color: var(--accent-900); text-decoration-thickness: 2px; } }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--accent-800); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.15s; }
@media (hover: hover) {
  .tlink:hover { color: var(--accent-900); text-decoration-thickness: 2px; }
  .tlink:hover .i-arrow { translate: 3px 0; }
}
/* Auf dunklem Grund (Tresor, Abschlussband) */
.vault .tlink, .pcta .tlink, .contact .tlink { color: #fff; }
.vault .tlink { color: var(--accent-200); }
@media (hover: hover) { .vault .tlink:hover, .pcta .tlink:hover { color: #fff; } }
.vault__text .tlink { align-self: flex-start; margin-top: 6px; }
.steps + .tlink { margin-top: 32px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .phero { padding: 48px 0 64px; }
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .pcta { padding-block: 80px; }
}
@media (max-width: 640px) {
  .phero, .phero--solo { padding: 36px 0 52px; }
  .phero__text { gap: 22px; }
  .pcta { padding-block: 64px; }
  .pcta__ctas .btn, .phero__ctas .btn { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tlink, .btn--ghost-light { transition: none; }
}