@charset "UTF-8";
/* ==========================================================================
   arbeits-zeitrechner.de — Shared Stylesheet
   The ONLY stylesheet on the site. Linked in every page's <head>.
   No inline <style> blocks, no per-page CSS files, ever.

   CONTENTS
     1. Variables (design system — LOCKED per BLUEPRINT.md §5)
     2. Reset & base
     3. Accessibility
     4. Layout
     5. Components
        5.1  Header & navigation      5.8   Data table
        5.2  Breadcrumb               5.9   FAQ
        5.3  Hero                     5.10  CTA
        5.4  Buttons                  5.11  Related pages
        5.5  Forms & inputs           5.12  Author / E-E-A-T
        5.6  Calculator panel         5.13  Footer
        5.7  Cards & prose            5.14  Search
     6. Page-scoped sections
     7. Utilities
     8. Responsive
     9. Print
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES — design system, locked. Never edit without a blueprint revision.
   ========================================================================== */

:root {
  /* ── Colour ── */
  --color-bg:          #F6F4EF;   /* paper */
  --color-surface:     #FFFFFF;   /* panel */
  --color-text:        #14181B;   /* ink   */
  --color-divider:     #E3DED4;

  --color-neutral-100: #FFFFFF;
  --color-neutral-600: #766F65;  /* darkened from artboard #857D71 for WCAG AA on white (4.06 -> 4.96) */
  --color-neutral-700: #5F584E;
  --color-neutral-800: #3A3630;

  --color-accent:      #10655B;   /* primary teal */
  --color-accent-100:  #EAF2EF;
  --color-accent-200:  #BFD9D1;
  --color-accent-300:  #93BEB3;
  --color-accent-400:  #5F9D91;
  --color-accent-600:  #0D544C;
  --color-accent-700:  #0A443E;
  --color-accent-800:  #0C3B36;
  --color-accent-900:  #0B2A27;   /* footer, table head, result panel */
  --color-brass:       #B0813A;   /* secondary accent, link hover */

  --color-focus:       #10655B;
  --color-on-accent:   #FFFFFF;   /* text/icons on teal surfaces */

  /* ── Typography ── */
  --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-h3:   21px;
  --fs-h2:   clamp(28px, 4vw, 42px);
  --fs-h1:   clamp(38px, 6vw, 62px);
  --fs-panel-h: clamp(24px, 3.4vw, 34px);
  --fs-result:  clamp(44px, 8vw, 68px);

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.15;
  --lh-base:  1.6;

  --ls-tight:   -0.02em;
  --ls-heading: -0.015em;
  --ls-wide:     0.1em;
  --ls-wider:    0.14em;

  /* ── Spacing — ONLY these values ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── Shape ── */
  --r:      12px;
  --r-sm:   9px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(20, 24, 27, .05), 0 10px 30px -18px rgba(20, 24, 27, .35);

  /* ── Layout ── */
  --wrap:   1160px;
  --gutter: 20px;
  --header-h: 64px;

  /* ── Motion ── */
  --t: .15s;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

a {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t);
}
a:hover { color: var(--color-brass); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }

hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--sp-6) 0;
}

blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--color-accent-300);
  background: var(--color-accent-100);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}
code {
  background: var(--color-accent-100);
  padding: 2px var(--sp-1);
  border-radius: 4px;
}

input, select, button, textarea {
  font-family: var(--font-body);
  font-size: 15px;
}

button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

::selection {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}


/* ==========================================================================
   3. ACCESSIBILITY
   ========================================================================== */

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-accent-900);
  color: var(--color-on-accent);
  text-decoration: none;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--color-on-accent);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.az-foot :focus-visible,
.az-result :focus-visible {
  outline-color: var(--color-accent-200);
}

/* Screen-reader only */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.az-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.az-section       { padding: var(--sp-7) 0; }
.az-section--tight{ padding: var(--sp-6) 0; }
.az-section--alt  { background: var(--color-neutral-100); }
.az-section--line { border-top: 1px solid var(--color-divider); }
.az-section--last { padding: 0 0 var(--sp-8); }

.az-sec-h { font-size: var(--fs-h2); margin: 0 0 var(--sp-3); }

/* Generic auto-fit grid */
.az-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
}
.az-grid--sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.az-grid--2  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }

/* Content column for long-form article text */
.az-prose { max-width: 760px; }
.az-prose h2 { margin-top: var(--sp-7); }
.az-prose h3 { margin-top: var(--sp-6); }
.az-prose > :first-child { margin-top: 0; }

main { display: block; }


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* ── 5.1 Header & navigation ─────────────────────────────────────────────── */

.az-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-divider);
}

.az-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  min-height: var(--header-h);
}

.az-brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
}
.az-brand:hover { color: var(--color-text); }

.az-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-size: 15px;
}

.az-brand__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  letter-spacing: .02em;
}

.az-navlink {
  color: var(--color-neutral-800);
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--fw-medium);
  padding: 7px var(--sp-3);
  border-radius: var(--r-pill);
  transition: color var(--t), background var(--t);
}
.az-navlink:hover {
  color: var(--color-accent-800);
  background: var(--color-accent-100);
}
.az-navlink[aria-current="page"] {
  color: var(--color-accent-800);
  background: var(--color-accent-100);
  font-weight: var(--fw-semibold);
}

.az-nav-desktop {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.az-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-on-accent);
  color: var(--color-accent-800);
  font-size: 20px;
  line-height: 1;
}
.az-burger:hover { background: var(--color-accent-100); }

.az-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--gutter) 14px;
  border-top: 1px solid var(--color-divider);
}
.az-nav-mobile .az-navlink {
  padding: var(--sp-3);
  border-radius: 10px;
}


/* ── 5.2 Breadcrumb ──────────────────────────────────────────────────────── */

.az-crumb {
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  color: var(--color-neutral-700);
}
.az-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.az-crumb li { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.az-crumb li + li::before {
  content: "›";
  color: var(--color-neutral-600);
}
.az-crumb a { color: var(--color-neutral-700); text-decoration: none; }
.az-crumb a:hover { color: var(--color-accent-800); text-decoration: underline; }
.az-crumb [aria-current="page"] { color: var(--color-neutral-800); font-weight: var(--fw-medium); }


/* ── 5.3 Hero ────────────────────────────────────────────────────────────── */

.az-hero {
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--color-divider);
}
.az-hero__inner { max-width: 820px; }

.az-eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-size: var(--fs-xs);
  color: var(--color-accent-700);
  margin-bottom: var(--sp-3);
}

.az-lede {
  font-size: var(--fs-md);
  color: var(--color-neutral-800);
  max-width: 760px;
}

.az-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}


/* ── 5.4 Buttons ─────────────────────────────────────────────────────────── */

.az-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.az-pri {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
}
.az-pri:hover  { background: var(--color-accent-600); color: var(--color-on-accent); }
.az-pri:active { background: var(--color-accent-700); }

.az-sec {
  background: var(--color-on-accent);
  color: var(--color-accent-800);
  border: 1px solid var(--color-divider);
}
.az-sec:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-300);
  color: var(--color-accent-800);
}

.az-b--block { width: 100%; }

/* Chip — small pill button / filter / shortcut */
.az-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: var(--sp-2) 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--r-pill);
  background: var(--color-on-accent);
  color: var(--color-neutral-700);
  font-size: var(--fs-xs);
  text-decoration: none;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.az-chip:hover {
  border-color: var(--color-accent-300);
  color: var(--color-accent-800);
  background: var(--color-accent-100);
}
.az-chip--icon { min-width: 44px; }

/* Tab */
.az-tabs { display: flex; flex-wrap: wrap; gap: 0; }
.az-tab {
  flex: 1 1 0;
  min-width: 96px;
  min-height: 46px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-neutral-700);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  transition: background var(--t), color var(--t);
}
.az-tab:hover { background: var(--color-on-accent); color: var(--color-accent-800); }
.az-tab[aria-selected="true"],
.az-tab[data-on="1"] {
  background: var(--color-accent-900);
  color: var(--color-on-accent);
}


/* ── 5.5 Forms & inputs ──────────────────────────────────────────────────── */

.az-in {
  width: 100%;
  padding: 11px var(--sp-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--t), background var(--t);
}
.az-in:hover { border-color: var(--color-accent-400); }
.az-in:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  background: var(--color-on-accent);
}
select.az-in { cursor: pointer; }
textarea.az-in { min-height: 140px; resize: vertical; }

.az-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-neutral-700);
}
.az-label .az-in { margin-top: 5px; }

.az-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.az-field-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}

/* Checkbox / radio block */
.az-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--sp-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--color-neutral-800);
  cursor: pointer;
}
.az-check input { margin-top: var(--sp-1); flex: none; width: 18px; height: 18px; accent-color: var(--color-accent); }
.az-check__hint {
  display: block;
  color: var(--color-neutral-600);
  font-size: var(--fs-xs);
}


/* ── 5.6 Calculator panel ────────────────────────────────────────────────── */

.blueprint {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.az-panel {
  padding: clamp(18px, 3vw, 32px);
}
.az-panel__h { font-size: var(--fs-panel-h); margin: 0 0 var(--sp-1); }
.az-panel__sub { color: var(--color-neutral-700); margin-bottom: 20px; }

/* Small uppercase group label inside the calculator */
.az-glabel {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-xs);
  color: var(--color-accent-800);
  margin-bottom: 10px;
}
.az-glabel--spaced { margin-top: 20px; }

.az-fieldset {
  margin: 0;
  margin-top: var(--sp-4);
  padding: 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--r-sm);
}
.az-fieldset legend { padding: 0 var(--sp-2); }

.az-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.az-repeat { display: grid; gap: var(--sp-2); }
.az-repeat__row { display: flex; gap: var(--sp-2); align-items: center; }

/* Result panel — dark teal */
.az-result {
  padding: 20px;
  background: var(--color-accent-900);
  color: var(--color-on-accent);
  border-color: var(--color-accent-800);
}
.az-result__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--color-accent-300);
}
.az-result__value {
  font-family: var(--font-heading);
  font-size: var(--fs-result);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.az-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 14px;
}
.az-result__tag {
  border: 1px solid var(--color-accent-600);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: var(--fs-xs);
}
.az-result__rows {
  margin-top: var(--sp-4);
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
}
.az-result__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  border-top: 1px solid var(--color-accent-700);
  padding-top: 6px;
}
.az-result__row dt,
.az-result__key { color: var(--color-accent-300); margin: 0; }
.az-result__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.az-result__note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--color-accent-200);
}
.az-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Inline validation message */
.az-error {
  margin: var(--sp-3) 0 0;
  padding: 10px var(--sp-3);
  border: 1px solid #B3261E;
  border-radius: var(--r-sm);
  background: #FCEDEC;
  color: #8C1D18;
  font-size: var(--fs-sm);
}

/* Legal-break notice inside the result panel */
.az-note {
  margin-top: var(--sp-3);
  padding: 10px var(--sp-3);
  border: 1px solid var(--color-accent-600);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--color-accent-200);
}

/* Stat tiles - monthly summary */
.az-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.az-stat {
  padding: var(--sp-3);
  border: 1px solid var(--color-accent-600);
  border-radius: var(--r-sm);
}
.az-stat__val {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.az-stat__lbl {
  font-size: var(--fs-xs);
  color: var(--color-accent-300);
  margin-top: var(--sp-1);
}

/* Weekly day grid */
.az-week { display: grid; gap: var(--sp-2); }
.az-week__row {
  display: grid;
  grid-template-columns: 42px 1fr 1fr 90px;
  gap: var(--sp-2);
  align-items: center;
}
.az-week__day {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-accent-800);
}

/* Quick converter */
.az-conv { display: grid; gap: var(--sp-2); }
.az-conv__row { display: flex; gap: var(--sp-2); }
.az-conv__out {
  min-height: 20px;
  font-size: var(--fs-xs);
  color: var(--color-accent-800);
  font-variant-numeric: tabular-nums;
}


/* ── 5.7 Cards & prose media ─────────────────────────────────────────────── */

.az-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.az-card:hover {
  border-color: var(--color-accent-300);
  box-shadow: var(--shadow);
}
.az-card__media { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.az-card__body { padding: var(--sp-4); }
.az-card__h { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.az-card__h a { text-decoration: none; }
.az-card__h a:hover { text-decoration: underline; }
.az-card__meta {
  font-size: var(--fs-xs);
  color: var(--color-neutral-600);
  margin-bottom: var(--sp-2);
}
.az-card__text { font-size: var(--fs-sm); color: var(--color-neutral-700); margin: 0; }

.az-figure { margin: var(--sp-5) 0; }
.az-figure figcaption {
  font-size: var(--fs-xs);
  color: var(--color-neutral-600);
  margin-top: var(--sp-2);
}


/* ── 5.8 Data table ──────────────────────────────────────────────────────── */

.az-t-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-5) 0;
}

table.az-t {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 480px;
}
table.az-t th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  font-size: 15px;
  background: var(--color-accent-900);
  color: var(--color-on-accent);
  padding: 13px var(--sp-4);
}
table.az-t th:first-child { border-top-left-radius: var(--r); }
table.az-t th:last-child  { border-top-right-radius: var(--r); }
table.az-t td {
  padding: 13px var(--sp-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
table.az-t tr:last-child td { border-bottom: 0; }
table.az-t tbody tr:nth-child(even) { background: var(--color-accent-100); }


/* ── 5.9 FAQ — native <details>, no JS ───────────────────────────────────── */

.az-faq { display: grid; gap: var(--sp-3); }

.az-faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r);
  overflow: hidden;
}
.az-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-accent-800);
  list-style: none;
}
.az-faq summary::-webkit-details-marker { display: none; }
.az-faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--t);
}
.az-faq details[open] summary::after { content: "−"; }
.az-faq summary:hover { background: var(--color-accent-100); }
.az-faq__a {
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--color-neutral-800);
}
.az-faq__a > :last-child { margin-bottom: 0; }


/* ── 5.10 CTA ────────────────────────────────────────────────────────────── */

.az-cta {
  padding: var(--sp-6);
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-200);
  border-radius: var(--r);
  text-align: center;
}
.az-cta h2 { margin-bottom: var(--sp-2); }
.az-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-5);
}


/* ── 5.11 Related pages ──────────────────────────────────────────────────── */

.az-related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}


/* ── 5.12 Author / E-E-A-T block ─────────────────────────────────────────── */

.az-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin: var(--sp-6) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r);
  font-size: var(--fs-sm);
}
.az-author__img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
}
.az-author__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--color-accent-800);
}
.az-author__meta { color: var(--color-neutral-600); font-size: var(--fs-xs); }


/* ── 5.13 Footer ─────────────────────────────────────────────────────────── */

.az-foot {
  background: var(--color-accent-900);
  color: var(--color-on-accent);
  padding: var(--sp-7) 0 var(--sp-5);
}
.az-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.az-foot h3 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--sp-3);
  color: var(--color-on-accent);
}
.az-foot__links { display: grid; gap: 7px; }
.az-foot a {
  color: var(--color-accent-200);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.az-foot a:hover { color: var(--color-on-accent); text-decoration: underline; }
.az-foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--sp-4);
}
.az-foot__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-accent-700);
  font-size: var(--fs-xs);
  color: var(--color-accent-300);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
}


/* ── 5.14 Search ─────────────────────────────────────────────────────────── */

.az-search { position: relative; max-width: 480px; }
.az-search__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--sp-2));
  z-index: 20;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  max-height: 320px;
  overflow-y: auto;
}
.az-search__results:empty,
.az-search__results[hidden] { display: none; }
.az-search__results li { margin: 0; }
.az-search__results a {
  display: block;
  padding: 10px var(--sp-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--color-neutral-800);
  font-size: var(--fs-sm);
}
.az-search__results a:hover,
.az-search__results a:focus-visible {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.az-search__empty {
  padding: 10px var(--sp-3);
  color: var(--color-neutral-600);
  font-size: var(--fs-sm);
}


/* ==========================================================================
   6. PAGE-SCOPED SECTIONS
   Per BLUEPRINT.md §5: page-specific styles live HERE, activated by a body
   class (e.g. <body class="page-fahrtkostenrechner">). Never in a page <style>.
   Add a new commented block per page as needed.
   ========================================================================== */

/* ── Page: / (homepage) ── */
.page-index .az-hero { padding-top: var(--sp-8); }

/* ── Page: /404.html ── */
.page-404 .az-hero { text-align: center; border-bottom: 0; }
.page-404 .az-hero__inner { max-width: 560px; margin-inline: auto; }

/* (further page blocks appended as pages are built) */


/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

.u-center      { text-align: center; }
.u-nowrap      { white-space: nowrap; }
.u-muted       { color: var(--color-neutral-700); }
.u-small       { font-size: var(--fs-sm); }
.u-xs          { font-size: var(--fs-xs); }
.u-tnum        { font-variant-numeric: tabular-nums; }

.u-mt-0 { margin-top: 0; }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }

.u-flex     { display: flex; }
.u-wrap     { flex-wrap: wrap; }
.u-gap-2    { gap: var(--sp-2); }
.u-gap-3    { gap: var(--sp-3); }
.u-gap-4    { gap: var(--sp-4); }
.u-between  { justify-content: space-between; }
.u-aic      { align-items: center; }

.u-maxw-760 { max-width: 760px; }
.u-maxw-820 { max-width: 820px; }

[hidden] { display: none !important; }


/* ==========================================================================
   8. RESPONSIVE
   Mobile-first base above; these are the documented breakpoints.
   ========================================================================== */

/* Nav collapse — matches the approved artboard */
@media (max-width: 760px) {
  .az-nav-desktop { display: none; }
  .az-burger { display: inline-flex; }
  .az-nav-mobile[data-open="1"] { display: flex; }
}

/* Tablet */
@media (max-width: 768px) {
  :root { --gutter: 16px; }

  .az-hero { padding: var(--sp-6) 0 var(--sp-5); }
  .az-section { padding: var(--sp-6) 0; }

  .az-field-row { grid-template-columns: 1fr; }
  .az-grid, .az-grid--2 { grid-template-columns: 1fr; gap: var(--sp-4); }

  .az-cta { padding: var(--sp-5); }
  .az-author { flex-direction: column; align-items: flex-start; }
}

/* Touch devices — enforce the 44x44 minimum target */
@media (hover: none), (max-width: 768px) {
  .az-chip { min-height: 44px; }
  .az-chip--icon { min-width: 44px; }

  /* Stacked link lists need vertical room; inline prose links are exempt
     under WCAG 2.5.8 and keep their natural size. */
  .az-foot__links a,
  .az-foot__social a { padding-block: 11px; }
  .az-foot__links { gap: 0; }
  .az-crumb a,
  .az-crumb [aria-current] { padding-block: 11px; }
  .az-crumb ol { gap: 0 var(--sp-2); }
}

/* Mobile */
@media (max-width: 480px) {
  .az-week__row { grid-template-columns: 34px 1fr 1fr; }
  .az-week__row .pr-pause,
  .az-week__row [data-f="p"] { grid-column: 2 / -1; }
  .az-tabs { gap: var(--sp-1); }
  .az-tab { flex: 1 1 45%; }

  .az-panel { padding: var(--sp-4); }
  .az-result { padding: var(--sp-4); }

  .az-b { width: 100%; }
  .az-result__actions .az-b { width: auto; flex: 1 1 auto; }

  .az-foot__bottom { flex-direction: column; }
}


/* ==========================================================================
   9. PRINT — calculator results are printed via the Drucken button
   ========================================================================== */

@media print {
  .az-header, .az-nav-mobile, .az-foot, .az-crumb,
  .az-cta, .az-related, .az-result__actions, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .az-result { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .az-result__label, .az-result__key, .az-result__note { color: #000 !important; }
  .blueprint { box-shadow: none; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}
