/* ==========================================================================
   Gartenhaus CSS Design System
   Story 1.2 — VNT-2026-02-011-Browser-Werkstatt
   ========================================================================== */


/* ==========================================================================
   TASK 1: Design Tokens — :root block
   AC: #1
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------- */
  /* Task 1.1: Color Tokens                                                  */
  /* ---------------------------------------------------------------------- */

  /* Surface colors — Gartenhaus direction uses slightly warmer base */
  --color-surface: #F7F6F2;              /* Page background — warm near-white */
  --color-surface-raised: #FFFFFF;       /* Cards, tool content areas — elevated white */
  --color-surface-muted: #F0F0EE;        /* Ad zones, secondary areas */
  --color-surface-teal: #E8F5F5;         /* Privacy badge background — light teal */

  /* Text colors */
  --color-text-primary: #1A1A1A;         /* Body text, headings */
  --color-text-secondary: #6B6B6B;       /* Labels, descriptions, metadata */

  /* Brand / Interactive */
  --color-primary: #0D7377;              /* Buttons, links, focus — teal/blue-green */
  --color-primary-hover: #095558;        /* Interactive hover/active states */

  /* Semantic feedback */
  --color-success: #2D8A4E;              /* Success states */
  --color-error: #D03E3E;                /* Error messages, validation */
  --color-warning: #D4910E;              /* Warnings, caution states */

  /* Structural */
  --color-border: #E0E0DE;               /* Subtle borders, dividers */
  --color-focus-ring: rgba(13, 115, 119, 0.4); /* Keyboard focus indicator */

  /* ---------------------------------------------------------------------- */
  /* Task 1.2: Spacing Scale (8px base grid)                                 */
  /* ---------------------------------------------------------------------- */

  --space-1: 4px;    /* Fine-grained: icon padding */
  --space-2: 8px;    /* Tight: between related elements */
  --space-3: 12px;   /* Compact spacing */
  --space-4: 16px;   /* Default element spacing */
  --space-5: 24px;   /* Section element spacing */
  --space-6: 32px;   /* Section separation */
  --space-8: 48px;   /* Major section separation */
  --space-10: 64px;  /* Page-level separation */
  --space-md: var(--space-4); /* Architecture alias for --space-4 */

  /* ---------------------------------------------------------------------- */
  /* Task 1.3: Typography Tokens                                             */
  /* ---------------------------------------------------------------------- */

  /* Font stacks */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;

  /* Type scale — mobile-first (desktop overrides in @media min-width: 1024px) */
  --text-h1: 1.75rem;      /* 28px — tool title */
  --text-h2: 1.375rem;     /* 22px — section headers */
  --text-h3: 1.125rem;     /* 18px — subsection headers */
  --text-body: 1rem;       /* 16px — body text */
  --text-small: 0.875rem;  /* 14px — metadata, badges */
  --text-caption: 0.75rem; /* 12px — fine print */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-body: 1.5;
  --line-height-heading: 1.3;

  /* Alias referenced in architecture.md */
  --font-size-base: var(--text-body);

  /* ---------------------------------------------------------------------- */
  /* Task 1.4: Border, Radius, Shadow & Transition Tokens                   */
  /* Gartenhaus direction: generous rounding (8/12/16px), soft shadows      */
  /* ---------------------------------------------------------------------- */

  /* Gartenhaus: generous rounding — 12px cards, 8px buttons/inputs, 16px pills */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Gartenhaus: soft shadows — opacity kept low for floating-not-harsh effect */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);   /* Resting card state */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);   /* Default elevation */
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);  /* Card hover / modal elevation */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-default: all 0.2s ease; /* Gartenhaus card hover transitions */

  /* ---------------------------------------------------------------------- */
  /* Task 1.5: Layout / Max-Width Tokens                                    */
  /* ---------------------------------------------------------------------- */

  --max-width-tool: 720px;   /* Tool content area */
  --max-width-hub: 1200px;   /* Hub page grid */

  /* ---------------------------------------------------------------------- */
  /* RF-1 tokens: Replace hardcoded non-token values outside :root          */
  /* ---------------------------------------------------------------------- */

  /* Root font size — anchors all rem calculations; used only in html rule */
  --html-font-size: 16px;

  /* WCAG touch target minimum — used by buttons, inputs */
  --touch-target-min: 44px;

  /* Textarea minimum height */
  --textarea-min-height: 120px;

  /* White — used where literal white is required (e.g. btn-primary text) */
  --color-white: #FFFFFF;

  /* Tokenized pixel dimensions used outside :root */
  --size-1px: 1px;
  --size-2px: 2px;
  --size-3px: 3px;
  --size-neg-1px: -1px;

  --border-width-default: var(--size-1px);
  --border-width-button: var(--size-2px);
  --focus-outline-width: var(--size-3px);
  --focus-outline-offset: var(--size-2px);
  --card-hover-translate-y: var(--size-neg-1px);

  --visually-hidden-size: var(--size-1px);
  --visually-hidden-offset: var(--size-neg-1px);
  --cookie-consent-offset: 0px;
}


/* ==========================================================================
   TASK 2: Base / Reset Styles
   AC: #1, #4
   ========================================================================== */

/* Task 2.1: Box-sizing reset — border-box on everything */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Task 2.2: html base — anchors rem units; scroll-behavior for anchor links */
html {
  font-size: var(--html-font-size); /* RF-1: token reference replaces hardcoded 16px */
  scroll-behavior: smooth;
  scroll-padding-bottom: var(--cookie-consent-offset);
}

/* Task 2.3: Prevent images/video from blowing out tool container widths */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Task 2.4: Body base styles using tokens */
body {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  margin: 0;
  padding: 0 0 var(--cookie-consent-offset);
}

/* Task 2.5: Heading styles (h1–h3) using type scale tokens */
h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* Task 2.6: :focus-visible ring using --color-focus-ring token */
:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-outline-offset);
}


/* ==========================================================================
   TASK 3: Mandatory Tool Structural Component Classes
   AC: #3, #4
   NOTE: Playwright selectors rely on these exact class names — do not rename.
   ========================================================================== */

/* Task 3.1: .tool-input — input area styling */
.tool-input {
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);  /* 12px — Gartenhaus rounded card */
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);     /* Gartenhaus floating card effect — required */
}

/* Task 3.2: .tool-output — result area styling (matching visual style to tool-input) */
.tool-output {
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);  /* 12px — Gartenhaus rounded card */
  padding: var(--space-5);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-sm);     /* Gartenhaus floating card effect — required */
}

/* Task 3.3: .tool-error — error area styling
   Note: color-mix() requires Chrome 111+, Safari 16.2+, Firefox 113+ (March 2023+).
   JS sets/removes the hidden attribute to show/hide — do NOT use display:none in base rule. */
.tool-error {
  background: color-mix(in srgb, var(--color-error) 8%, var(--color-white));
  border: var(--border-width-default) solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-error);
  margin-top: var(--space-4);
}

.tool-error[hidden] {
  display: none;
}

/* Task 3.4: .tool-settings — optional settings panel area */
.tool-settings {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: var(--border-width-default) solid var(--color-border);
}


/* ==========================================================================
   TASK 4: Form Element & Button Styles
   AC: #3 — All interactive elements must have touch targets ≥ 44×44px
   ========================================================================== */

/* Task 4.1: textarea — full-width, min-height from token, resize:vertical (German compound words) */
textarea {
  width: 100%;
  min-height: var(--textarea-min-height); /* RF-1: token reference replaces hardcoded 120px */
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical; /* Required: German compound words need expandable textareas */
  background: var(--color-surface-raised);
  transition: border-color var(--transition-fast);
}

textarea:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: 0;
}

/* Task 4.2: input[type="text"], input[type="number"], input[type="search"], select */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
select {
  min-height: var(--touch-target-min);   /* RF-1: token reference replaces hardcoded 44px */
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: 0;
}

/* RF-3: input[type="file"] — explicit styling with ≥44px touch target (AC3) */
input[type="file"] {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  cursor: pointer;
}

input[type="file"]:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: 0;
}

/* Task 4.3: .btn — base button class with ≥44px touch target */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min); /* RF-1: token reference replaces hardcoded 44px */
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: var(--border-width-button) solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: normal;
}

/* Task 4.4: .btn-primary — primary CTA variant */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white); /* RF-1: token reference replaces hardcoded #FFFFFF */
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Task 4.5: .btn-secondary — secondary/ghost button variant
   color-mix() — same modern browser requirement as .tool-error (Chrome 111+) */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* RF-2: base button element styling — touch target + token-based styles (AC3) */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: var(--border-width-default) solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: normal;
}

button:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* Task 4.6: label — base label styling, font-weight, spacing */
label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}


/* ==========================================================================
   TASK 5: Responsive Breakpoints
   AC: #2, #4
   NOTE: CSS custom properties cannot be used inside @media conditions —
         breakpoint values are hardcoded at 768px and 1024px per AC2.
   ========================================================================== */

/* Task 5.1: Mobile-first base styles — default styles above are mobile (<768px) */
/* (No wrapping wrapper needed — all base styles above apply to mobile first) */

/* Task 5.2: Tablet breakpoint — bounded range 768–1024px per AC2 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet-only layout adjustments (768–1024px) go here as needed by subsequent stories.
     Bounded upper limit ensures tablet styles do not bleed into desktop range. */
}

/* Task 5.3: Desktop breakpoint — type scale upscale for h1/h2/h3 (>1024px) */
@media (min-width: 1025px) {
  :root {
    --text-h1: 2.25rem;   /* 36px desktop */
    --text-h2: 1.5rem;    /* 24px desktop */
    --text-h3: 1.25rem;   /* 20px desktop */
  }
}


/* ==========================================================================
   TASK 6: Utility Classes
   ========================================================================== */

/* Task 6.1: .visually-hidden — accessible off-screen hiding for screen reader text */
.visually-hidden {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  padding: 0;
  margin: var(--visually-hidden-offset);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Task 6.2: .container — max-width 720px centered with side padding */
.container {
  max-width: var(--max-width-tool);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Task 6.3: .container--wide — max-width 1200px centered (hub pages) */
.container--wide {
  max-width: var(--max-width-hub);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Task 6.4: .privacy-badge — pill-shaped, light teal background (Gartenhaus spec) */
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-lg);          /* 16px pill shape */
  background: var(--color-surface-teal);    /* #E8F5F5 light teal — Gartenhaus spec */
}

/* Story 7.2: expandable privacy panel */
.privacy-badge__details {
  display: block;
  max-width: min(40rem, 100%);
}

.privacy-badge__details > summary {
  cursor: pointer;
  list-style: none;
}

.privacy-badge__details > summary::marker {
  display: none;
}

.privacy-badge__details > summary::-webkit-details-marker {
  display: none;
}

.privacy-badge__panel {
  margin-top: var(--space-2);
  max-width: 100%;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.privacy-badge__panel p {
  margin: 0 0 var(--space-2);
}

.privacy-badge__panel p:last-child {
  margin-bottom: 0;
}

/* Task 6.5: .card + .card:hover — floating card with shadow elevation on hover */
.card {
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);          /* 12px */
  box-shadow: var(--shadow-sm);
  transition: var(--transition-default);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--card-hover-translate-y));              /* Subtle lift on hover — Gartenhaus interactivity signal */
}

/* Shell utilities used by Story 1.3 templates/partials */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transform: translateY(calc(-100% - var(--space-2)));
  transition: transform var(--transition-fast);
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

.shell-header {
  border-bottom: var(--border-width-default) solid var(--color-border);
  background: var(--color-surface-raised);
}

.shell-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.shell-header__brand {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

.shell-nav-toggle {
  cursor: pointer;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.shell-nav-toggle::-webkit-details-marker {
  display: none;
}

.shell-nav-details {
  position: relative;
}

.shell-nav {
  padding-top: var(--space-2);
}

@media (max-width: 767px) {
  .shell-nav-details[open] .shell-nav {
    position: absolute;
    right: 0;
    background: var(--color-surface-raised);
    border: var(--border-width-default) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-3);
    min-width: 13rem;
    z-index: 5;
  }
}

.shell-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shell-nav__link,
.shell-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-primary);
  text-decoration: none;
}

.shell-nav__link--back {
  min-width: var(--touch-target-min);
}

.shell-nav__link--back:hover,
.shell-nav__link--back:focus-visible {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-decoration-thickness: var(--size-2px);
  text-underline-offset: var(--space-1);
}

.shell-nav__link[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.shell-footer {
  border-top: var(--border-width-default) solid var(--color-border);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

/* Canonical footer row: single line on wider viewports, wraps gracefully on narrow. */
.shell-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.shell-footer__inner > nav {
	display: inline-flex;
	align-items: center;
}

.shell-footer__disclosure,
.shell-footer__copyright,
.shell-ad__label {
  color: var(--color-text-secondary);
}

.shell-footer__disclosure {
  margin: 0;
}

.shell-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.shell-footer__copyright,
.shell-ad__label {
	margin: 0;
}

.shell-privacy,
.shell-ad {
  padding-top: var(--space-4);
}

.shell-ad__zone {
  padding: var(--space-4);
}

.shell-ad__label {
  margin: 0;
}

.shell-privacy__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.hub-tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.hub-tool-card {
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-default);
}

.hub-tool-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--card-hover-translate-y));
}

.hub-tool-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: var(--touch-target-min);
  padding: var(--space-5);
  color: var(--color-text-primary);
  text-decoration: none;
}

.hub-tool-card__link:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.hub-tool-card__body {
  display: grid;
  gap: var(--space-2);
}

.hub-tool-card__title {
  margin-bottom: 0;
}

.hub-tool-card__description {
  margin: 0;
  color: var(--color-text-secondary);
}

.hub-tool-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.hub-tool-card__cta {
  margin-top: auto;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Hub tool card hidden state (managed by JS filter) */
.hub-tool-card[hidden] {
  display: none;
}


/* ==========================================================================
   Hub Discovery Controls — Stories 2.2 & 2.3
   AC: 2.2 AC1–4, 2.3 AC1, AC4–6
   ========================================================================== */

/* Discovery controls grid wrapper — Story 2.3 */
.hub-discovery-controls {
  display: grid;
  row-gap: var(--space-5);
  column-gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Search control — Story 2.3 */
.hub-search-control {
  display: grid;
  gap: var(--space-2);
}

.hub-search-input {
  width: 100%;
}

/* Category filter bar — Story 2.2 */
.hub-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0;
}

.hub-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  line-height: 1;
  flex: none;
}

.hub-icon--emoji {
  font-size: 1rem;
}

/* Filter buttons use pills (radius-lg = 16px) and token-sized touch targets */
.hub-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  border: var(--border-width-default) solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

/* Active state: filled primary background — does not rely on color alone (border + contrast change) */
.hub-filter-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--size-2px);
  text-underline-offset: var(--space-1);
}

.hub-filter-btn:hover:not([aria-pressed="true"]) {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.hub-filter-btn[aria-pressed="true"]:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.hub-filter-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* Empty state shown when the active filter has zero matching tools */
.hub-empty-category {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  margin: 0;
}

.hub-empty-category[hidden] {
  display: none;
}


/* Desktop nav: hamburger toggler hidden, links shown inline in a row */
@media (min-width: 768px) {
  .hub-discovery-controls {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: end;
  }

  .hub-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell-nav-toggle {
    display: none;
  }
  .shell-nav-details {
    position: static;
  }
  .shell-nav-details > .shell-nav {
    display: block !important;
    padding-top: 0;
    position: static;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: auto;
    z-index: auto;
  }
  .shell-nav__list {
    flex-direction: row;
  }

  .shell-footer__inner {
    flex-wrap: nowrap;
  }

  .shell-footer__links {
    flex-wrap: nowrap;
  }

  .shell-footer__copyright {
    margin-left: auto;
  }
}


/* ==========================================================================
   Hub About Teaser — Story 2.7
   Replaces the full Story 2.5 about section with a short 1–2 sentence teaser
   and a "Mehr erfahren" link pointing to /ueber-uns/.
   AC: 2.7 AC1, AC6
   ========================================================================== */

.hub-about-teaser {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width-default) solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

.hub-about-teaser p {
  margin: 0;
}

.hub-about-teaser__link {
  margin-left: var(--space-2);
  white-space: nowrap;
}

/* ==========================================================================
   TASK 2.7 / End of file: prefers-reduced-motion
   Wraps all transition and animation declarations to respect user preferences.
   Placed at end of file so it overrides all transition rules above.
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (min-width: 1024px) {
  .hub-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================================
   Story 7.3: Cookie Consent Banner + Ad Placeholder Styles
   AC: #1, #3, #7
   ========================================================================== */

/* Reserved ad placeholder height — prevents CLS when ad loads after accept */
.shell-ad__zone {
  min-height: 280px;
}

/* adsbygoogle ins element — must be display:block; no inline style (shell-render contract) */
.shell-ad__unit {
  display: block;
  width: 100%;
}

/* Placeholder copy: only visible when state is placeholder (or unconfigured) */
.shell-ad__placeholder {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Hide placeholder once ad is loading or active */
[data-ad-zone-state="loading"] .shell-ad__placeholder,
[data-ad-zone-state="active"] .shell-ad__placeholder {
  display: none;
}

/* Cookie consent banner — bottom-fixed, dismissible without scrolling */
[data-cookie-consent-banner] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-surface-raised);
  border-top: var(--border-width-default) solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) 0;

  /* Reserve bottom space so banner never covers tool input/output areas */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
}

[data-cookie-consent-banner][hidden] {
  display: none;
}

.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cookie-consent__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-primary);
  line-height: var(--line-height-body);
}

.cookie-consent__link {
  color: var(--color-primary);
  white-space: nowrap;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Ensure both CTA buttons meet ≥44×44px touch target */
.cookie-consent__btn {
  min-width: var(--touch-target-min);
}

/* On narrow viewports: stack buttons and text vertically */
@media (max-width: 479px) {
  .cookie-consent__inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* Reset flex-basis so text only takes the height it actually needs
     (flex-basis:260px inflates the column height to 260px in row layouts
     but is counterproductive when flex-direction is column) */
  .cookie-consent__text {
    flex-basis: auto;
  }

  .cookie-consent__actions {
    justify-content: stretch;
  }

  .cookie-consent__btn {
    flex: 1 1 auto;
  }
}

/* ── Tool SEO Section (Story 7.10) ─────────────────────────────────────────── */
/* Explanatory post-tool content block. Placed below .tool-output in each tool. */
.tool-seo-section {
  border-top: var(--border-width-default) solid var(--color-border);
  padding-top: var(--space-6);
  margin-top: var(--space-5);
}

.tool-seo-section h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.tool-seo-section p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.tool-seo-section p:last-child {
  margin-bottom: 0;
}

/* ── Story 7.22: FAQ accordion section ─────────────────────────────────────── */
.tool-faq-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin-top: var(--space-5);
}

.tool-faq-section h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.tool-faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.tool-faq-item {
  margin: 0;
  padding: 0;
}

.tool-faq-item details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  overflow: hidden;
}

.tool-faq-item details[open] {
  border-color: var(--color-primary);
}

.tool-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  user-select: none;
}

.tool-faq-item summary::-webkit-details-marker {
  display: none;
}

.tool-faq-item summary::marker {
  display: none;
}

/* Chevron indicator — pure CSS, no JS */
.tool-faq-item summary::after {
  content: "▼";
  font-size: 0.75em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.tool-faq-item details[open] > summary::after {
  transform: rotate(180deg);
}

.tool-faq-item summary:hover,
.tool-faq-item summary:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  color: var(--color-primary);
}

.tool-faq-item summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.tool-faq-answer {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-faq-answer p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: var(--space-3) 0 0;
}

.tool-faq-answer p:first-child {
  margin-top: var(--space-3);
}

.tool-faq-answer p:last-child {
  margin-bottom: 0;
}

.tool-faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Story 7.11: Related Tools Internal Linking Module ─────────────────────── */
.related-tools {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.related-tools__heading {
  font-size: var(--text-h2);
  margin-bottom: var(--space-4);
}

.related-tools__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.related-tools__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-default);
}

.related-tools__link:hover,
.related-tools__link:focus-visible {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  outline: none;
}

.related-tools__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.related-tools__title {
  display: block;
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-primary);
}

.related-tools__description {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Story 7.17 — icon + title inline layout */
.related-tools__title-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ==========================================================================
   Story 1.18 — Stats Tile Grid (.stat-tiles / .stat-tile)
   Used by: Zeichenzähler primary stats output
   ========================================================================== */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--textarea-min-height), 1fr));
  gap: var(--space-3);
}

.stat-tile {
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-tile__value {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-heading);
}

.stat-tile__label {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ── Story 8.1: Social Sharing ─────────────────────────────────────────────── */
.social-sharing {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.social-sharing__heading {
  font-size: var(--text-h3);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.social-sharing__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Story 8.2: Feedback Widget ──────────────────────────────────────────── */

.feedback-widget {
  position: fixed;
  bottom: calc(var(--cookie-consent-offset, 0px) + var(--space-5));
  right: var(--space-5);
  z-index: 200;
}

.feedback-widget__trigger {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.feedback-widget__panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: 320px;
  max-width: calc(100vw - var(--space-6) * 2);
}

[data-feedback-open="false"] .feedback-widget__panel {
  display: none;
}

[data-feedback-open="true"] .feedback-widget__panel {
  display: block;
  margin-bottom: var(--space-3);
}

.feedback-widget__panel select,
.feedback-widget__panel textarea,
.feedback-widget__panel input[type="email"] {
  width: 100%;
  box-sizing: border-box;
}

.feedback-widget__aux-field {
  display: none;
}

.feedback-widget__error {
  color: var(--color-error);
  font-size: var(--text-small);
  margin-top: var(--space-2);
}

.feedback-widget__hint {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.feedback-widget__heading {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.feedback-widget__close {
  float: right;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* ============================================================
   Blog Listing (Story 7.19)
   ============================================================ */

.blog-listing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (max-width: 480px) {
  .blog-listing__grid {
    grid-template-columns: 1fr;
  }
}

.blog-listing__card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-listing__card-title {
  font-size: var(--text-h3, 1.25rem);
  margin: 0;
}

.blog-listing__card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-listing__card-title a:hover {
  text-decoration: underline;
}

.blog-listing__card-excerpt {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

.blog-listing__card-date {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin: 0;
}

.blog-listing__card-cta {
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary, #2563eb);
  align-self: flex-start;
}

.blog-listing__card-cta:hover {
  text-decoration: underline;
}

/* ============================================================
   Blog Article (Story 7.19)
   ============================================================ */

.blog-article {
  max-width: 72ch;
  margin-inline: auto;
  padding-block: var(--space-8);
}

.blog-article__header {
  margin-bottom: var(--space-6);
}

.blog-article__meta {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.blog-article__body {
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-article__body img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 480px) {
  .blog-article {
    padding-inline: var(--space-4);
  }
}