/* ============================================================
   INKLUSIO.PRO – DESIGN-SYSTEM
   Aufsatz auf JobHive / HivePress
   ------------------------------------------------------------
   1. Design-Tokens
   2. Basis & Typografie
   3. Buttons & Formulare
   4. Layout-Bausteine (Sektionen, Container)
   5. Hero / Landingpage
   6. Ampel-Badges
   7. HivePress-Listings (Such-Karten)
   8. Vorlagen-Hub-Kacheln
   9. Preistabelle
  10. Micro-Interactions & Motion
  11. Responsive & Accessibility
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN-TOKENS
   ------------------------------------------------------------ */
:root {
  /* --- Warmes Sandbeige (Flächen, Hintergründe) --- */
  --ink-sand-50:  #FDFAF5;
  --ink-sand-100: #F8F2E7;
  --ink-sand-200: #F0E5D4;
  --ink-sand-300: #E4D4BB;
  --ink-sand-400: #D2BC9B;

  /* --- Warmes Mintgrün (Primärfarbe, Vertrauen) --- */
  --ink-mint-50:  #F0F8F4;
  --ink-mint-100: #DDF0E7;
  --ink-mint-200: #B8E1CE;
  --ink-mint-300: #8ECFB2;
  --ink-mint-400: #66BE9A;
  --ink-mint-500: #43A883;  /* Primär */
  --ink-mint-600: #348A6A;
  --ink-mint-700: #286C53;
  --ink-mint-800: #1E523F;

  /* --- Edles Graphit (Text, Kontrast) --- */
  --ink-graphite-50:  #F4F5F7;
  --ink-graphite-100: #E7E9ED;
  --ink-graphite-200: #C9CDD5;
  --ink-graphite-300: #A3A9B5;
  --ink-graphite-400: #767E8C;
  --ink-graphite-500: #545C6B;
  --ink-graphite-600: #3D4450;
  --ink-graphite-700: #2C323C;
  --ink-graphite-800: #21262E;
  --ink-graphite-900: #171B21;

  /* --- Logo-Blau ---
     Aus dem Bildzeichen ausgemessen: #276C9B stellt rund 16 % der
     sichtbaren Fläche und ist damit der prägende Blauton der Marke.
     Steht derzeit an keiner Stelle im Einsatz, bleibt aber in der
     Palette dokumentiert – die Farbe gehört zur Marke, auch wenn
     die Oberfläche sie gerade nicht verwendet. */
  --ink-logo-blue:       #276C9B;
  --ink-logo-blue-dark:  #1E538B;
  --ink-logo-blue-light: #3A83A1;

  /* --- Vivid Orange (Akzent, Call-to-Action) --- */
  --ink-orange-50:  #FFF3ED;
  --ink-orange-100: #FFE2D2;
  --ink-orange-300: #FFAE84;
  --ink-orange-500: #FF6A2B;  /* Akzent */
  --ink-orange-600: #EC5314;
  --ink-orange-700: #C13F0B;

  /* --- Ampel-Semantik --- */
  --ink-status-green:      #1F9D57;
  --ink-status-green-bg:   #E4F6EC;
  --ink-status-yellow:     #D8890B;
  --ink-status-yellow-bg:  #FDF1DC;
  --ink-status-red:        #D33A3F;
  --ink-status-red-bg:     #FCE9E9;

  /* --- Semantische Zuweisung --- */
  --ink-bg:            var(--ink-sand-50);
  --ink-bg-elevated:   #FFFFFF;
  --ink-bg-muted:      var(--ink-sand-100);
  --ink-bg-inverse:    var(--ink-graphite-900);
  --ink-text:          var(--ink-graphite-800);
  --ink-text-muted:    var(--ink-graphite-400);
  --ink-text-inverse:  var(--ink-sand-50);
  --ink-border:        var(--ink-sand-300);
  --ink-border-subtle: var(--ink-sand-200);
  --ink-primary:       var(--ink-mint-500);
  --ink-primary-hover: var(--ink-mint-600);
  --ink-accent:        var(--ink-orange-500);
  --ink-accent-hover:  var(--ink-orange-600);

  /* --- Typografie --- */
  --ink-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ink-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ink-text-xs:   0.75rem;
  --ink-text-sm:   0.875rem;
  --ink-text-base: 1rem;
  --ink-text-lg:   1.125rem;
  --ink-text-xl:   1.375rem;
  --ink-text-2xl:  clamp(1.5rem,  1.2rem + 1.4vw, 2rem);
  --ink-text-3xl:  clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --ink-text-4xl:  clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --ink-text-hero: clamp(2.5rem,  1.4rem + 5vw,   4.75rem);

  --ink-leading-tight: 1.1;
  --ink-leading-snug:  1.3;
  --ink-leading-body:  1.65;

  /* --- Raster & Abstände --- */
  --ink-space-1: 0.25rem;
  --ink-space-2: 0.5rem;
  --ink-space-3: 0.75rem;
  --ink-space-4: 1rem;
  --ink-space-5: 1.5rem;
  --ink-space-6: 2rem;
  --ink-space-7: 3rem;
  --ink-space-8: 4rem;
  --ink-space-9: 6rem;
  --ink-space-10: 8rem;

  --ink-container: 1240px;
  --ink-container-narrow: 780px;

  /* --- Radien --- */
  --ink-radius-sm:   8px;
  --ink-radius-md:   14px;
  --ink-radius-lg:   22px;
  --ink-radius-xl:   32px;
  --ink-radius-pill: 999px;

  /* --- Schatten (warm getönt, nie neutral-grau) --- */
  --ink-shadow-xs: 0 1px 2px rgba(35, 28, 18, 0.05);
  --ink-shadow-sm: 0 2px 8px rgba(35, 28, 18, 0.06);
  --ink-shadow-md: 0 8px 24px -6px rgba(35, 28, 18, 0.10), 0 2px 6px rgba(35, 28, 18, 0.05);
  --ink-shadow-lg: 0 20px 50px -12px rgba(35, 28, 18, 0.16), 0 6px 16px rgba(35, 28, 18, 0.06);
  --ink-shadow-glow: 0 12px 32px -8px rgba(255, 106, 43, 0.35);

  /* --- Motion --- */
  --ink-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ink-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ink-dur-fast:  160ms;
  --ink-dur-base:  280ms;
  --ink-dur-slow:  520ms;
}

/* ------------------------------------------------------------
   2. BASIS & TYPOGRAFIE
   ------------------------------------------------------------ */
body.inklusio,
body {
  font-family: var(--ink-font-body);
  color: var(--ink-text);
  background-color: var(--ink-bg);
  line-height: var(--ink-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.hp-listing__title, .hp-vendor__name {
  font-family: var(--ink-font-display);
  color: var(--ink-graphite-900);
  letter-spacing: -0.022em;
  line-height: var(--ink-leading-tight);
  font-weight: 700;
}

h1 { font-size: var(--ink-text-4xl); }
h2 { font-size: var(--ink-text-3xl); }
h3 { font-size: var(--ink-text-2xl); line-height: var(--ink-leading-snug); }
h4 { font-size: var(--ink-text-xl);  line-height: var(--ink-leading-snug); }

/* Optische Feinjustierung: große Headlines vertragen engeren Satz */
.ink-display {
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
  /* Sicherheitsnetz gegen seitliches Scrollen bleibt, automatische
     Silbentrennung nicht: Browser trennen deutsche Komposita oft
     falsch – aus "Pädagogik" wurde "Päd-agogik", aus "Verbindungen"
     ein "Verbindun-gen". Beides liest sich schlechter als ein
     einfacher Umbruch an der Wortgrenze. overflow-wrap greift nur
     noch, wenn ein einzelnes Wort sonst über den Rand liefe. */
  overflow-wrap: break-word;
  hyphens: manual;
}

.ink-lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  color: var(--ink-graphite-500);
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}

.ink-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ink-space-2);
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mint-700);
}

.ink-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-orange-500);
}

/* Akzent-Unterstreichung für Schlüsselwörter in Headlines */
/* Hervorhebung einzelner Wörter in Überschriften.

   Die Betonung liegt allein in der Farbe. Zwei Vorgänger-Fassungen
   arbeiteten mit einer farbigen Unterlegung hinter dem Text; beide
   hatten Nachteile: Über mehrere umbrechende Zeilen zerfiel der
   Balken in unterschiedlich lange Stücke, und auf grossen
   Bildschirmen wirkte er wie mit dem Textmarker gezogen.

   Farbe betont ebenso deutlich, bleibt bei jedem Umbruch ruhig und
   braucht keine Sonderbehandlung für schmale Bildschirme. */
.ink-mark {
  color: var(--ink-mint-700);
}

/* Auf dunklem Grund braucht die Hervorhebung einen helleren Ton –
   Mint 700 wäre dort kaum vom Hintergrund zu unterscheiden. */
.ink-hero .ink-mark,
.ink-section--inverse .ink-mark {
  color: var(--ink-mint-300);
}

a { color: var(--ink-mint-700); text-underline-offset: 3px; }
a:hover { color: var(--ink-orange-600); }

/* ------------------------------------------------------------
   3. BUTTONS & FORMULARE
   ------------------------------------------------------------ */
.ink-btn,
.hp-form__button .button,
button.hp-field__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ink-space-2);
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.75rem;
  border-radius: var(--ink-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform  var(--ink-dur-fast) var(--ink-ease-out),
    box-shadow var(--ink-dur-base) var(--ink-ease-out),
    background-color var(--ink-dur-fast) var(--ink-ease-soft),
    color var(--ink-dur-fast) var(--ink-ease-soft);
}

.ink-btn--primary {
  background: var(--ink-orange-500);
  color: #fff;
  box-shadow: var(--ink-shadow-glow);
}
.ink-btn--primary:hover {
  background: var(--ink-orange-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(255, 106, 43, 0.45);
}

.ink-btn--secondary {
  background: var(--ink-mint-500);
  color: #fff;
}
.ink-btn--secondary:hover {
  background: var(--ink-mint-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--ink-shadow-md);
}

.ink-btn--ghost {
  background: transparent;
  color: var(--ink-graphite-800);
  border-color: var(--ink-border);
}
.ink-btn--ghost:hover {
  background: var(--ink-bg-elevated);
  border-color: var(--ink-graphite-800);
  color: var(--ink-graphite-900);
  transform: translateY(-2px);
}

/*
 * Absendeknöpfe: den Farbverlauf des Elternthemes abräumen.
 *
 * JobHive setzt in style.css Zeile 128 ff.:
 *
 *   button[type=submit] { background-image: linear-gradient(to right,
 *                         #FF5C6C, #FCB80A); }
 *
 * Das ist Spezifität (0,1,1) und schlägt damit jede unserer Klassen –
 * `.ink-btn--ghost` ist nur (0,1,0). Betroffen war deshalb nicht nur
 * der Löschknopf am Standort, sondern **jeder** Knopf, der ein
 * Formular abschickt: Standort anlegen, Anzeige online/offline,
 * Match-Alarm, Benachrichtigung. Alle trugen pink-gelb, unabhängig
 * davon, was danebenstand.
 *
 * `.ink-btn[type="submit"]` ist (0,2,0) und gewinnt unabhängig von der
 * Reihenfolge der Dateien. Die Flächenfarbe kommt weiterhin aus der
 * jeweiligen Variante – die setzt `background` als Kurzschreibweise
 * und damit ohnehin kein Bild.
 */
.ink-btn[type="submit"] { background-image: none; }

/*
 * Und dieselbe Rechnung noch einmal für die Fläche.
 *
 * Der Customizer legt zusätzlich inline nach:
 *
 *   .button--primary, button[type="submit"], … { background-color: #FF5C6C; }
 *
 * Auch das ist (0,1,1). Ohne die folgenden drei Regeln wäre der
 * Verlauf weg und der Knopf stattdessen einfarbig pink – ein
 * „Löschen" in Pink neben einem weissen „Standort bearbeiten"
 * hätte genau das Gegenteil dessen erreicht, was gewollt war.
 */
/*
 * Und dieselbe Geschichte noch einmal für die Schriftfarbe.
 *
 * Am 26.08.2026 nachgemessen: hivetheme/assets/css/frontend.min.css
 * setzt in derselben Regel `color:#fff`. Die Flächenfarbe hatten wir
 * oben zurückgeholt, die Schrift nicht – ein Geisterknopf, weisse
 * Schrift auf hellem Grund. Aufgefallen ist es am Sperrknopf auf dem
 * Fachkraft-Profil, betroffen war jeder helle Absendeknopf.
 */
.ink-btn--ghost[type="submit"]     { background-color: transparent; color: var(--ink-graphite-800); }
.ink-btn--primary[type="submit"]   { background-color: var(--ink-orange-500); color: #fff; }
.ink-btn--secondary[type="submit"] { background-color: var(--ink-mint-500); color: #fff; }

/*
 * Rot für das, was eine Verbindung abschneidet.
 *
 * Zurückhaltend gefüllt: Sperren ist keine Katastrophe, sondern eine
 * berechtigte Entscheidung. Erst beim Überfahren wird die Fläche
 * rot – dann steht der Klick unmittelbar bevor.
 */
.ink-btn--gefahr,
.ink-btn--gefahr[type="submit"] {
  background: transparent;
  background-color: transparent;
  color: var(--ink-status-red);
  border-color: var(--ink-status-red);
}
.ink-btn--gefahr:hover,
.ink-btn--gefahr:focus-visible,
.ink-btn--gefahr[type="submit"]:hover,
.ink-btn--gefahr[type="submit"]:focus-visible {
  background-color: var(--ink-status-red);
  color: #fff;
  border-color: var(--ink-status-red);
  transform: translateY(-2px);
}

.ink-btn--lg { padding: 1.1rem 2.25rem; font-size: var(--ink-text-lg); }
.ink-btn--sm { padding: 0.6rem 1.1rem;  font-size: var(--ink-text-sm); }

.ink-btn:active { transform: translateY(0) scale(0.985); }

/* HivePress-Formularfelder angleichen */
.hp-field input[type="text"],
.hp-field input[type="email"],
.hp-field input[type="tel"],
.hp-field input[type="url"],
.hp-field input[type="number"],
.hp-field input[type="password"],
.hp-field input[type="search"],
.hp-field select,
.hp-field textarea,
.select2-container .select2-selection {
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-base);
  color: var(--ink-text);
  background: var(--ink-bg-elevated);
  border: 1.5px solid var(--ink-border);
  border-radius: var(--ink-radius-md);
  padding: 0.85rem 1.05rem;
  transition: border-color var(--ink-dur-fast) var(--ink-ease-soft),
              box-shadow  var(--ink-dur-fast) var(--ink-ease-soft);
}

.hp-field input:focus,
.hp-field select:focus,
.hp-field textarea:focus {
  outline: none;
  border-color: var(--ink-mint-500);
  box-shadow: 0 0 0 4px var(--ink-mint-100);
}

.hp-field__label,
.hp-form__field label {
  font-weight: 600;
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-700);
  letter-spacing: -0.005em;
}

/* Live-Zeichenzähler (Über mich / Über uns) */
.ink-charcount {
  display: block;
  margin-top: var(--ink-space-2);
  font-size: var(--ink-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-text-muted);
  text-align: right;
  transition: color var(--ink-dur-fast) var(--ink-ease-soft);
}
.ink-charcount--warn   { color: var(--ink-status-yellow); font-weight: 600; }
.ink-charcount--danger { color: var(--ink-status-red);    font-weight: 700; }

/* ------------------------------------------------------------
   4. LAYOUT-BAUSTEINE
   ------------------------------------------------------------ */
.ink-container {
  width: 100%;
  max-width: var(--ink-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.ink-container--narrow { max-width: var(--ink-container-narrow); }

.ink-section {
  position: relative;
  padding-block: clamp(var(--ink-space-8), 9vw, var(--ink-space-10));
}
.ink-section--tight { padding-block: clamp(var(--ink-space-7), 6vw, var(--ink-space-8)); }
.ink-section--sand    { background: var(--ink-sand-100); }
.ink-section--mint    { background: var(--ink-mint-50); }
.ink-section--inverse { background: var(--ink-graphite-900); color: var(--ink-sand-100); }
.ink-section--inverse h1,
.ink-section--inverse h2,
.ink-section--inverse h3 { color: #fff; }
.ink-section--inverse .ink-lead { color: var(--ink-graphite-200); }
.ink-section--inverse .ink-eyebrow { color: var(--ink-mint-300); }

.ink-section__header {
  max-width: 64ch;
  margin-bottom: clamp(var(--ink-space-6), 5vw, var(--ink-space-8));
  display: flex;
  flex-direction: column;
  gap: var(--ink-space-4);
}
.ink-section__header--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.ink-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.ink-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ink-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.ink-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Weiche Trennkante zwischen Sektionen statt harter Linie */
.ink-section--curve::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 56px;
  background: inherit;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(-55px);
  pointer-events: none;
}

/* ------------------------------------------------------------
   5. HERO / LANDINGPAGE
   ------------------------------------------------------------ */
.ink-hero {
  position: relative;
  min-height: min(88vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-graphite-900);
  color: var(--ink-sand-50);
  isolation: isolate;
}

.ink-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.ink-hero__media video,
.ink-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zweistufiger Verlauf: unten dunkel für Textkontrast,
   rechts warm getönt, damit das Video nicht kalt wirkt. */
.ink-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(23, 27, 33, 0.55) 0%,
      rgba(23, 27, 33, 0.70) 45%,
      rgba(23, 27, 33, 0.92) 100%),
    radial-gradient(120% 80% at 85% 20%,
      rgba(255, 106, 43, 0.22) 0%,
      transparent 60%);
}

.ink-hero__inner {
  position: relative;
  padding-block: clamp(var(--ink-space-9), 12vw, var(--ink-space-10));
  display: flex;
  flex-direction: column;
  gap: var(--ink-space-5);
  max-width: 46rem;
}

.ink-hero .ink-display { color: #fff; }
.ink-hero .ink-lead    { color: rgba(248, 242, 231, 0.82); }
.ink-hero .ink-eyebrow { color: var(--ink-mint-300); }

/*
 * Im Hero laufen die Texte auf volle Breite.
 *
 * `.ink-lead` bringt sonst eine Grenze von 62 Zeichen mit – eine
 * gute Regel für Fliesstext, aber hier stand der Absatz mit
 * flatterndem Rand neben einer Suchmaske, die die ganze Breite
 * nutzt. Das sah nach unfertig aus, nicht nach Absicht.
 *
 * Auf dem Telefon ändert das nichts: Gemessen bei 375 px ist der
 * Behälter 271 px breit, die Grenze löst sich zu 620 px auf und
 * greift dort nie. Text, Maske und Schaltflächen sind schon heute
 * exakt gleich breit.
 *
 * Der Preis liegt am anderen Ende: Auf einem breiten Bildschirm
 * wächst die Zeile von rund 68 auf etwa 95 Zeichen. Das ist lang.
 * Deshalb nur hier, nicht für `.ink-lead` überall.
 */
.ink-hero .ink-lead { max-width: none; }

/*
 * Der Nachsatz unter den Schaltflächen.
 *
 * Kleiner und blasser als der Einstieg oben: Er sagt, wofür wir
 * stehen, und das gehört nicht vor die Funktion, für die jemand
 * gekommen ist. Kein negatives margin-top wie in der ersten
 * Fassung – hier steht er zwischen zwei eigenen Blöcken, und der
 * Abstand der Hero-Spalte ist genau richtig.
 */
.ink-hero__nachsatz {
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(248, 242, 231, 0.62);
  text-wrap: pretty;
}

.ink-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ink-space-3);
  margin-top: var(--ink-space-3);
}

.ink-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: var(--ink-space-6);
  padding-top: var(--ink-space-5);
  border-top: 1px solid rgba(248, 242, 231, 0.18);
}
.ink-hero__trust-item { display: flex; flex-direction: column; gap: 2px; }
.ink-hero__trust-value {
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-2xl);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ink-hero__trust-label {
  font-size: var(--ink-text-sm);
  color: rgba(248, 242, 231, 0.65);
}

/* Suchleiste im Hero – die zentrale Konversionsfläche */
.ink-searchbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ink-space-2);
  align-items: center;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-radius: var(--ink-radius-lg);
  padding: var(--ink-space-2);
  box-shadow: var(--ink-shadow-lg);
  margin-top: var(--ink-space-4);
}
/* Rasterelemente bekommen von sich aus min-width: auto und schrumpfen
   deshalb nie unter ihre Inhaltsbreite. Die längste Auswahl im
   Aufklappmenü – "Pädagogische Fachkräfte" – hat so die Mindestbreite
   der ganzen Suchkarte bestimmt und sie auf schmalen Bildschirmen
   über den Rand geschoben. min-width: 0 hebt das auf. */
.ink-searchbar,
.ink-searchbar__fields,
.ink-searchbar__field {
  min-width: 0;
}

.ink-searchbar__fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: var(--ink-space-1);
}

/* Auch die Bedienelemente selbst dürfen nicht breiter werden als ihr
   Feld – Aufklappmenüs richten sich sonst nach dem längsten Eintrag. */
.ink-searchbar__field select,
.ink-searchbar__field input {
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}
.ink-searchbar__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.55rem 1rem;
  border-radius: var(--ink-radius-md);
  transition: background var(--ink-dur-fast) var(--ink-ease-soft);
}
.ink-searchbar__field:not(:last-child) {
  border-right: 1px solid var(--ink-border-subtle);
}
.ink-searchbar__field:focus-within { background: var(--ink-sand-100); }
.ink-searchbar__field label {
  font-size: var(--ink-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-graphite-400);
}
.ink-searchbar__field input,
.ink-searchbar__field select {
  border: none;
  padding: 0;
  background: transparent;
  font-size: var(--ink-text-base);
  color: var(--ink-graphite-800);
}
.ink-searchbar__field input:focus,
.ink-searchbar__field select:focus { outline: none; box-shadow: none; }

/* ------------------------------------------------------------
   6. AMPEL-BADGES (beidseitig: Fachkraft & Arbeitgeber)
   ------------------------------------------------------------ */
.ink-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border-radius: var(--ink-radius-pill);
  font-size: var(--ink-text-sm);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid transparent;
}

/* Auf sehr schmalen Bildschirmen darf der Badge umbrechen. Lange
   Beschriftungen wie "Offen für (Initiativ-)Bewerbungen" würden die
   Karte sonst aufweiten und dieselbe seitliche Verschiebung auslösen
   wie zuvor die Überschrift. */
@media (max-width: 420px) {
  .ink-status {
    white-space: normal;
    text-align: left;
  }
}

.ink-status__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Der Puls signalisiert Aktualität – bewusst nur bei "grün",
   damit er Aufmerksamkeit lenkt statt sie zu zerstreuen. */
.ink-status--green .ink-status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ink-status-green);
  opacity: 0;
  animation: ink-pulse 2.4s var(--ink-ease-out) infinite;
}

@keyframes ink-pulse {
  0%   { transform: scale(0.6); opacity: 0.85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ink-status--green {
  background: var(--ink-status-green-bg);
  color: #14663A;
  border-color: rgba(31, 157, 87, 0.22);
}
.ink-status--green .ink-status__dot { background: var(--ink-status-green); }

.ink-status--yellow {
  background: var(--ink-status-yellow-bg);
  color: #8A5605;
  border-color: rgba(216, 137, 11, 0.24);
}
.ink-status--yellow .ink-status__dot { background: var(--ink-status-yellow); }

.ink-status--red {
  background: var(--ink-status-red-bg);
  color: #93262A;
  border-color: rgba(211, 58, 63, 0.22);
}
.ink-status--red .ink-status__dot { background: var(--ink-status-red); }

/* Unbekannter Zustand: neutral statt falsch eingefärbt. Wird in der
   Verwaltung ein neuer Begriff angelegt, den Inklusio_Ampel noch
   nicht kennt, ist Grau die ehrliche Antwort – Grün wäre gelogen. */
.ink-status--neutral {
  background: var(--ink-sand-100);
  color: var(--ink-graphite-600);
  border-color: var(--ink-sand-400);
}
.ink-status--neutral .ink-status__dot { background: var(--ink-graphite-400); }

/* Variante auf Bildern / dunklem Grund */
.ink-status--overlay {
  background: rgba(23, 27, 33, 0.78);
  backdrop-filter: blur(8px);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
}

/* Große Ausführung für die Profil-Detailseite */
.ink-status--lg {
  font-size: var(--ink-text-base);
  padding: 0.6rem 1.2rem 0.6rem 0.9rem;
}
.ink-status--lg .ink-status__dot { width: 11px; height: 11px; }

/* ------------------------------------------------------------
   7. HIVEPRESS-LISTINGS (Such-Karten)
   ------------------------------------------------------------ */
.hp-listing--view-block,
.hp-vendor--view-block {
  position: relative;
  background: var(--ink-bg-elevated);
  border: 1.5px solid var(--ink-border-subtle);
  border-radius: var(--ink-radius-lg);
  overflow: hidden;
  box-shadow: var(--ink-shadow-xs);
  transition:
    transform    var(--ink-dur-base) var(--ink-ease-out),
    box-shadow   var(--ink-dur-base) var(--ink-ease-out),
    border-color var(--ink-dur-base) var(--ink-ease-out);
}

.hp-listing--view-block:hover,
.hp-vendor--view-block:hover {
  transform: translateY(-6px);
  border-color: var(--ink-mint-300);
  box-shadow: var(--ink-shadow-lg);
}

.hp-listing--view-block .hp-listing__image,
.hp-vendor--view-block .hp-vendor__image {
  overflow: hidden;
  background: var(--ink-sand-200);
}
.hp-listing--view-block .hp-listing__image img,
.hp-vendor--view-block .hp-vendor__image img {
  transition: transform var(--ink-dur-slow) var(--ink-ease-out);
}
.hp-listing--view-block:hover .hp-listing__image img,
.hp-vendor--view-block:hover .hp-vendor__image img {
  transform: scale(1.06);
}

.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a {
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-lg);
  font-weight: 700;
  color: var(--ink-graphite-900);
  letter-spacing: -0.018em;
  line-height: 1.25;
}
.hp-listing--view-block:hover .hp-listing__title a { color: var(--ink-mint-700); }

/* Entfernungsangabe – das wichtigste Sortierkriterium sichtbar machen */
.ink-distance {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--ink-text-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mint-700);
  background: var(--ink-mint-50);
  border-radius: var(--ink-radius-pill);
  padding: 0.25rem 0.7rem;
}

/* Attribut-Chips (Qualifikationen, Beschäftigungsart) */
.hp-listing__attributes .hp-field,
.ink-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--ink-text-xs);
  font-weight: 600;
  color: var(--ink-graphite-600);
  background: var(--ink-sand-100);
  border: 1px solid var(--ink-sand-200);
  border-radius: var(--ink-radius-pill);
  padding: 0.3rem 0.7rem;
  margin: 0 0.3rem 0.3rem 0;
}
.ink-chip--mint {
  color: var(--ink-mint-800);
  background: var(--ink-mint-50);
  border-color: var(--ink-mint-200);
}
.ink-chip--accent {
  color: var(--ink-orange-700);
  background: var(--ink-orange-50);
  border-color: var(--ink-orange-100);
}

/* Featured-Listings dezent, nicht marktschreierisch hervorheben */
.hp-listing--featured {
  border-color: var(--ink-orange-300);
  box-shadow: 0 0 0 1px var(--ink-orange-100), var(--ink-shadow-sm);
}
.hp-listing--featured::before {
  content: "Empfohlen";
  position: absolute;
  top: var(--ink-space-3);
  left: var(--ink-space-3);
  z-index: 2;
  font-size: var(--ink-text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--ink-orange-500);
  border-radius: var(--ink-radius-pill);
  padding: 0.25rem 0.65rem;
}

/* Anonymisierte Vorschau für Gratis-Arbeitgeber */
.ink-locked {
  position: relative;
  user-select: none;
}
.ink-locked__blur {
  filter: blur(6px);
  opacity: 0.55;
  pointer-events: none;
}
.ink-locked__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ink-space-3);
  text-align: center;
  padding: var(--ink-space-4);
  background: linear-gradient(180deg,
    rgba(253, 250, 245, 0.35) 0%,
    rgba(253, 250, 245, 0.94) 55%);
  border-radius: inherit;
}
.ink-locked__label {
  font-size: var(--ink-text-sm);
  font-weight: 650;
  color: var(--ink-graphite-600);
}

/* ------------------------------------------------------------
   8. VORLAGEN-HUB-KACHELN
   ------------------------------------------------------------ */
.ink-template {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-bg-elevated);
  border: 1.5px solid var(--ink-border-subtle);
  border-radius: var(--ink-radius-lg);
  overflow: hidden;
  box-shadow: var(--ink-shadow-xs);
  transition: transform var(--ink-dur-base) var(--ink-ease-out),
              box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.ink-template:hover {
  transform: translateY(-6px);
  box-shadow: var(--ink-shadow-lg);
}

/* Vorschau im Papierformat – signalisiert "Dokument" ohne Worte */
.ink-template__preview {
  position: relative;
  aspect-ratio: 1 / 1.414;   /* DIN A4 */
  background: var(--ink-sand-100);
  overflow: hidden;
}
.ink-template__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Wasserzeichen für nicht freigeschaltete Vorlagen */
.ink-template--gated .ink-template__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -38deg,
    rgba(23, 27, 33, 0.055) 0px,
    rgba(23, 27, 33, 0.055) 2px,
    transparent 2px,
    transparent 12px
  );
  pointer-events: none;
}

.ink-template__lock {
  position: absolute;
  inset-inline: var(--ink-space-3);
  bottom: var(--ink-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--ink-radius-pill);
  background: rgba(23, 27, 33, 0.86);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--ink-text-xs);
  font-weight: 650;
  transition: background var(--ink-dur-base) var(--ink-ease-soft);
}
.ink-template:hover .ink-template__lock { background: var(--ink-orange-500); }

.ink-template__body {
  display: flex;
  flex-direction: column;
  gap: var(--ink-space-2);
  padding: var(--ink-space-4);
  flex: 1;
}
.ink-template__title {
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-graphite-900);
}
.ink-template__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--ink-space-2);
}
.ink-format {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  text-transform: uppercase;
}
.ink-format--pdf   { background: #FDE8E8; color: #A32B2B; }
.ink-format--docx  { background: #E4EDFB; color: #1F4E9C; }
.ink-format--canva { background: #E5F1FE; color: #00629E; }

/* Ausfüllbare Fassung – Mint, wie alles Interaktive auf der Seite. */
.ink-format--html  { background: var(--ink-mint-100); color: var(--ink-mint-700); }

/*
 * Mehrere Schaltflächen untereinander in der Seitenleiste: Seit die
 * Formate einzeln anklickbar sind, stehen dort bis zu drei.
 */
.ink-vorlage__cta + .ink-vorlage__cta { margin-top: .5rem; }

/* ------------------------------------------------------------
   9. PREISTABELLE
   ------------------------------------------------------------ */
.ink-price {
  display: flex;
  flex-direction: column;
  gap: var(--ink-space-4);
  background: var(--ink-bg-elevated);
  border: 1.5px solid var(--ink-border-subtle);
  border-radius: var(--ink-radius-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: transform var(--ink-dur-base) var(--ink-ease-out),
              box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.ink-price:hover { transform: translateY(-4px); box-shadow: var(--ink-shadow-md); }

.ink-price--featured {
  border-color: var(--ink-mint-400);
  box-shadow: 0 0 0 4px var(--ink-mint-50), var(--ink-shadow-md);
  position: relative;
}
.ink-price--featured::before {
  content: "Beliebteste Wahl";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink-mint-600);
  color: #fff;
  font-size: var(--ink-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.9rem;
  border-radius: var(--ink-radius-pill);
  white-space: nowrap;
}

.ink-price__name {
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-xl);
  font-weight: 700;
}
.ink-price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--ink-font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink-graphite-900);
  font-variant-numeric: tabular-nums;
}
.ink-price__period {
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-base);
  font-weight: 500;
  color: var(--ink-text-muted);
  letter-spacing: 0;
}
.ink-price__note {
  font-size: var(--ink-text-sm);
  color: var(--ink-text-muted);
}

/* Die Laufzeit-Auskunft über der Tabelle. Kleiner als der Einstieg
   und schmaler als er – sie beantwortet eine Frage, sie wirbt nicht.
   Die Zeilenbreite ist hier bewusst gekappt: Der Satz steht mittig,
   und mittiger Text über die volle Breite verliert den Zeilenanfang. */
.ink-preise__laufzeit {
  max-width: 62ch;
  margin: var(--ink-space-3) auto 0;
  font-size: var(--ink-text-sm);
  line-height: 1.6;
  color: var(--ink-text-muted);
  text-wrap: pretty;
}

/* „Dieser Tarif passt nicht zu deinem Konto." Steht dort, wo der
   Nutzer nach dem Umleiten ankommt, und hebt sich vom Fliesstext ab –
   sonst liest er ihn nicht und klickt denselben Knopf noch einmal. */
.ink-preise__hinweis {
  max-width: 62ch;
  margin: var(--ink-space-4) auto 0;
  padding: 0.75rem 1rem;
  font-size: var(--ink-text-sm);
  line-height: 1.6;
  color: var(--ink-graphite-700);
  background: var(--ink-sand-100);
  border-left: 3px solid var(--ink-mint-500);
  border-radius: var(--ink-radius-sm);
  text-align: left;
}

.ink-price__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ink-price__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--ink-text-sm);
  line-height: 1.5;
  color: var(--ink-graphite-600);
}
.ink-price__features li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ink-mint-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23348A6A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Merkmal und sein Kleingedrucktes stehen untereinander, beide
   rechts vom Haken – deshalb der Rahmen um beide statt zwei
   Geschwister im Listenpunkt. min-width: 0 hält lange Zeilen im
   Kasten, sonst schiebt der Flex-Kontext die Karte auseinander. */
.ink-price__feature {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;

  /* Die Spalte ist knapp 200 px breit. Ein Wort ohne Trennstelle
     passt dort schnell nicht mehr hinein und lief bisher stumm über
     den Kartenrand – „Bewerbungen/Nachrichten" ist genau so ein
     Wort, denn am Schrägstrich bricht kein Browser um. Lieber ein
     harter Umbruch mitten im Wort als Text, der aus der Karte
     ragt. */
  overflow-wrap: break-word;
}
.ink-price__feature-note {
  font-size: var(--ink-text-xs);
  line-height: 1.4;
  color: var(--ink-graphite-400);
}

/* Zeilen, die nur zu einem Abrechnungszeitraum gehören. Gesteuert
   über das Attribut am Gitter – dasselbe Verfahren wie beim
   Ersparnis-Stempel, damit es nur eine Stelle gibt, an der die
   Ansicht umschaltet. */
.ink-pricing-grid:not([data-period="yearly"]) .ink-price__features li[data-nur="yearly"],
.ink-pricing-grid:not([data-period="monthly"]) .ink-price__features li[data-nur="monthly"] {
  display: none;
}

.ink-price__features li.is-excluded { color: var(--ink-graphite-300); }
.ink-price__features li.is-excluded::before {
  background: var(--ink-graphite-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A9B5' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Umschalter Monat / Jahr */
.ink-billing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--ink-sand-200);
  border-radius: var(--ink-radius-pill);
}
.ink-billing-toggle button {
  border: none;
  background: transparent;
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-sm);
  font-weight: 650;
  color: var(--ink-graphite-500);
  padding: 0.5rem 1.1rem;
  border-radius: var(--ink-radius-pill);
  cursor: pointer;
  transition: all var(--ink-dur-fast) var(--ink-ease-soft);
}
.ink-billing-toggle button[aria-pressed="true"] {
  background: var(--ink-bg-elevated);
  color: var(--ink-graphite-900);
  box-shadow: var(--ink-shadow-xs);
}

/* ------------------------------------------------------------
  10. MICRO-INTERACTIONS & MOTION
   ------------------------------------------------------------ */

/* Einblenden beim Scrollen – wird per IntersectionObserver gesetzt */
.ink-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--ink-dur-slow) var(--ink-ease-out),
    transform var(--ink-dur-slow) var(--ink-ease-out);
}
.ink-reveal.is-visible { opacity: 1; transform: none; }

/* Gestaffelt für Karten-Raster */
.ink-reveal[data-delay="1"] { transition-delay:  80ms; }
.ink-reveal[data-delay="2"] { transition-delay: 160ms; }
.ink-reveal[data-delay="3"] { transition-delay: 240ms; }
.ink-reveal[data-delay="4"] { transition-delay: 320ms; }
.ink-reveal[data-delay="5"] { transition-delay: 400ms; }

/* Feature-Karte mit Verlaufsrand beim Hover */
.ink-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ink-space-3);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--ink-bg-elevated);
  border: 1.5px solid var(--ink-border-subtle);
  border-radius: var(--ink-radius-lg);
  overflow: hidden;
  transition: transform var(--ink-dur-base) var(--ink-ease-out),
              box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.ink-feature::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ink-mint-400), var(--ink-orange-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ink-dur-slow) var(--ink-ease-out);
}
.ink-feature:hover { transform: translateY(-5px); box-shadow: var(--ink-shadow-md); }
.ink-feature:hover::after { transform: scaleX(1); }

.ink-feature__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ink-radius-md);
  background: var(--ink-mint-50);
  color: var(--ink-mint-700);
  font-size: 1.5rem;
}
.ink-feature--accent .ink-feature__icon {
  background: var(--ink-orange-50);
  color: var(--ink-orange-600);
}
.ink-feature__title {
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-lg);
  font-weight: 700;
  line-height: 1.3;
}
.ink-feature__text {
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-500);
  line-height: 1.6;
}
/* margin-top: auto schiebt die Zahl an den unteren Rand – die
   Beispielzeilen sind unterschiedlich lang, ohne das stünde die
   Angabe in jeder Karte auf einer anderen Höhe. */
.ink-feature__count {
  margin-top: auto;
  font-size: var(--ink-text-xs);
  font-weight: 700;
  color: var(--ink-mint-700);
}

/* Nummerierte Schritt-Karten (So funktioniert's) */
.ink-step { position: relative; padding-top: var(--ink-space-5); }
.ink-step__number {
  font-family: var(--ink-font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink-sand-300);
  -webkit-text-stroke: 0;
}

/* ------------------------------------------------------------
  11. RESPONSIVE & ACCESSIBILITY
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Grosse Überschrift auf schmalen Bildschirmen
   ------------------------------------------------------------
   Die Werte oben sind für ein bis zwei Zeilen gedacht. Bricht der
   Satz auf dem Handy in vier Zeilen um, wird aus dem engen
   Zeilenabstand ein Gedränge – und die Hervorhebung der einen Zeile
   stösst in die nächste.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .ink-display {
    font-size: clamp(2rem, 1.1rem + 4.6vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
  }

  .ink-lead {
    font-size: 1rem;
    line-height: 1.55;
  }
}

@media (max-width: 860px) {
  .ink-searchbar { grid-template-columns: 1fr; }
  .ink-searchbar__fields { grid-template-columns: 1fr; }
  .ink-searchbar__field:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--ink-border-subtle);
  }
  .ink-hero { min-height: auto; }
  .ink-hero__inner { padding-block: var(--ink-space-8); }

  /* Der grosse Knopf ist für die Breitbild-Ansicht gedacht, in der er
     neben den Feldern steht. Untereinander wirkt er wuchtig und
     verdrängt Inhalt – deshalb hier eine Nummer kleiner. */
  .ink-searchbar .ink-btn--lg {
    width: 100%;
    padding: 0.95rem 1.25rem;
    font-size: var(--ink-text-base);
  }
}

/* Letzte Absicherung gegen seitliches Scrollen: Kein Baustein der
   Landingpage darf breiter werden als das Fenster. Das ersetzt keine
   saubere Breitenrechnung, fängt aber ab, was durchrutscht. */
.ink-hero,
.ink-hero__inner,
.ink-section,
.ink-container {
  max-width: 100%;
}

/* Sichtbarer, markenkonformer Fokusring – Pflicht für Barrierefreiheit,
   und bei einer Inklusions-Plattform erst recht. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ink-orange-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.ink-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link */
.ink-skip-link {
  position: absolute;
  top: -100px;
  left: var(--ink-space-4);
  z-index: 9999;
  background: var(--ink-graphite-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--ink-radius-md);
  font-weight: 600;
  transition: top var(--ink-dur-fast) var(--ink-ease-out);
}
.ink-skip-link:focus { top: var(--ink-space-4); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ink-reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ink-text: var(--ink-graphite-900);
    --ink-text-muted: var(--ink-graphite-600);
    --ink-border: var(--ink-graphite-400);
  }
}

/* ==========================================================
   Widerrufsfunktion
   ==========================================================
   Seit dem 19.06.2026 gesetzlich verlangt: eine dauerhaft
   erreichbare Schaltfläche, mit der der Widerruf elektronisch
   erklärt werden kann. Sie liegt auf /widerruf/ unter der
   Belehrung und ist bewusst die auffälligste Schaltfläche der
   Seite – „gut sichtbar" ist dort keine Geschmacksfrage. */

.ink-widerruf {
  max-width: var(--ink-container-narrow);
  margin: var(--ink-space-8) 0 0;
}
.ink-widerruf h2 {
  margin-bottom: var(--ink-space-3);
}
.ink-widerruf__text {
  color: var(--ink-graphite-700);
  line-height: var(--ink-leading-body);
  margin-bottom: var(--ink-space-4);
}
.ink-widerruf__hinweis {
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-600);
  margin-top: var(--ink-space-4);
}
.ink-widerruf__knopf {
  margin-top: var(--ink-space-2);
}

/* Ein Formular, das ohne Skript trägt: Beschriftung über dem
   Feld, volle Breite, nichts, was sich erst aufklappen muss. */
.ink-widerruf__formular {
  background: var(--ink-sand-50);
  border: 1px solid var(--ink-border-subtle);
  border-radius: var(--ink-radius-lg);
  padding: var(--ink-space-5);
}
.ink-widerruf__feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--ink-space-4);
}
.ink-widerruf__feld label {
  font-weight: 600;
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-800);
}
.ink-widerruf__feld input,
.ink-widerruf__feld textarea {
  width: 100%;
  font: inherit;
  color: var(--ink-graphite-900);
  background: #fff;
  border: 1px solid var(--ink-border);
  border-radius: var(--ink-radius-md);
  padding: 0.7rem 0.85rem;
}
.ink-widerruf__feld input:focus,
.ink-widerruf__feld textarea:focus {
  outline: 0;
  border-color: var(--ink-mint-500);
  box-shadow: 0 0 0 3px var(--ink-mint-100);
}
.ink-widerruf__wink {
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-600);
}
.ink-widerruf__erklaerung {
  margin: var(--ink-space-4) 0;
  padding: var(--ink-space-3) var(--ink-space-4);
  background: #fff;
  border-left: 4px solid var(--ink-mint-500);
  border-radius: var(--ink-radius-sm);
  font-weight: 600;
  color: var(--ink-graphite-800);
}
.ink-widerruf__fehler {
  margin-bottom: var(--ink-space-4);
  padding: var(--ink-space-3) var(--ink-space-4);
  background: var(--ink-orange-50);
  border-left: 4px solid var(--ink-orange-500);
  border-radius: var(--ink-radius-sm);
  color: var(--ink-graphite-800);
}
.ink-widerruf__fehler ul {
  margin: 0.4rem 0 0 1.1rem;
}
.ink-widerruf__beleg {
  font-variant-numeric: tabular-nums;
  color: var(--ink-graphite-600);
  font-size: var(--ink-text-sm);
}

/* Die Falle für automatische Absender: aus dem Blick genommen,
   ohne display:none – manche Skripte füllen nur, was gerendert
   ist, und genau die sollen hineintappen. */
.ink-widerruf__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================
   Widerrufsbelehrung
   ==========================================================
   Eigener Rechtstext (seit 06.09.2026, die Kanzlei liefert
   keinen für Dienstleistungen). Liest sich wie die übrigen
   Rechtstexte; das Muster-Widerrufsformular ist als Kasten
   abgesetzt, damit es als ausfüllbares Formular erkennbar ist. */

.ink-belehrung {
  max-width: var(--ink-container-narrow);
}
.ink-belehrung h2 {
  margin-bottom: var(--ink-space-3);
}
.ink-belehrung h3 {
  margin-top: var(--ink-space-6);
  margin-bottom: var(--ink-space-2);
}
.ink-belehrung p,
.ink-belehrung li {
  line-height: var(--ink-leading-body);
  color: var(--ink-graphite-800);
}
.ink-belehrung__vorspann {
  color: var(--ink-graphite-600);
}
.ink-belehrung ul {
  margin: 0 0 var(--ink-space-4) 1.25rem;
}
.ink-belehrung ul li {
  margin-bottom: var(--ink-space-2);
}
.ink-belehrung__formular {
  margin: var(--ink-space-3) 0 var(--ink-space-4);
  padding: var(--ink-space-4) var(--ink-space-5);
  background: var(--ink-sand-50);
  border: 1px dashed var(--ink-border);
  border-radius: var(--ink-radius-lg);
}
.ink-belehrung__formular p {
  margin: 0 0 var(--ink-space-2);
}
.ink-belehrung__stand {
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-600);
  margin-bottom: var(--ink-space-6);
}

/* Druckansicht – relevant für die Vorlagen-Vorschauseiten */
@media print {
  .ink-hero__media, .ink-searchbar, .ink-btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   07.09.2026 – Rückmeldungen aus dem Einrichtungs-Test
   ============================================================ */

/* Preistabelle: Untertitel auf einer Höhe. „Fachkraft Basis" bricht
   in zwei Zeilen, „Fachkraft Pro" nicht – der Untertitel rutschte
   je nach Zeilenzahl. Der Name bekommt immer den Platz für zwei
   Zeilen. */
.ink-price__name {
  line-height: 1.2;
  min-height: 2.4em;
}

/* Zwei Gruppen statt einer Reihe: Fachkräfte und Einrichtungen. */
.ink-preise__gruppe + .ink-preise__gruppe {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1.5px dashed var(--ink-sand-300);
}
.ink-preise__gruppentitel {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 var(--ink-space-4);
  font-family: var(--ink-font-display);
  font-size: var(--ink-text-lg);
  font-weight: 700;
}
.ink-preise__gruppentitel small {
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-sm);
  font-weight: 500;
  color: var(--ink-text-muted);
}
.ink-preise__gruppe--fachkraft .ink-pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  max-width: 44rem;
}
.ink-preise__gruppe--einrichtung .ink-pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
}

/* Laufzeit-Auskunft am Fuss der Preistabelle statt darüber. */
.ink-preise__laufzeit--fuss {
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  text-align: center;
}

/* Sortierfeld der Trefferliste: „Entfernung" muss lesbar sein. */
.hp-form--listing-sort .hp-field--select,
.hp-form--listing-sort .select2-container,
.hp-form--listing-sort select {
  min-width: 13rem !important;
}

/* Freischaltung auf dem Fachkraftprofil: ein Kasten, kein Absatz. */
.ink-bewerbung {
  margin: var(--ink-space-4) 0;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--ink-mint-50);
  border: 1.5px solid var(--ink-mint-300);
  border-radius: var(--ink-radius-md);
}
.ink-bewerbung__titel { margin: 0 0 0.5rem; }
.ink-bewerbung__hinweis { margin: 0 0 0.75rem; color: var(--ink-graphite-600); }
.ink-bewerbung__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ink-bewerbung__rest { font-size: var(--ink-text-sm); color: var(--ink-text-muted); }

/* Vorlagenseite: Kopf und Vorschau in einer Spalte, Karte daneben. */
.ink-vorlage__haupt { min-width: 0; }
.ink-vorlage__haupt .ink-vorlage__kopf { margin-bottom: var(--ink-space-5); }

/* Profilbild der Anbieterkarte: Abstand zum Kartenrand (Marc,
   07.09.2026). JobHive zieht das Bild bündig an die Oberkante; die
   Regel in components.css verliert dagegen. Deshalb hier mit Vorrang. */
.hp-vendor--view-block .hp-vendor__image,
.hp-vendor--view-page .hp-vendor__image {
  margin-top: var(--ink-space-4) !important;
  margin-bottom: var(--ink-space-3) !important;
}
.hp-vendor--view-block > .hp-vendor__header {
  padding-top: var(--ink-space-2);
}

/* ---------- Digitale Unterlagen (07.09.2026) ---------- */
.ink-unterlagen__lead { max-width: 60ch; color: var(--ink-graphite-600); }
.ink-unterlagen__liste { list-style: none; margin: 0 0 var(--ink-space-5); padding: 0; display: grid; gap: var(--ink-space-3); }
.ink-unterlage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ink-space-3);
  padding: clamp(0.9rem, 2vw, 1.2rem); background: var(--ink-bg-elevated);
  border: 1.5px solid var(--ink-border-subtle); border-radius: var(--ink-radius-md);
}
.ink-unterlage__text { display: grid; gap: 0.15rem; min-width: 0; }
.ink-unterlage__name { overflow-wrap: anywhere; }
.ink-unterlage__meta { font-size: var(--ink-text-xs); color: var(--ink-text-muted); }
.ink-unterlage__aktionen { display: flex; gap: 0.5rem; align-items: center; }
.ink-unterlage__aktionen form { margin: 0; }
.ink-btn--gefahr { color: var(--ink-orange-700); }
.ink-unterlagen__neu { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ink-space-3); padding: clamp(0.9rem, 2vw, 1.2rem); background: var(--ink-sand-100); border-radius: var(--ink-radius-md); }
.ink-unterlagen__feld { display: grid; gap: 0.35rem; font-size: var(--ink-text-sm); font-weight: 600; }
.ink-unterlagen__rest, .ink-unterlagen__leer, .ink-unterlagen__voll { font-size: var(--ink-text-sm); color: var(--ink-text-muted); }
.ink-meldung { padding: 0.75rem 1rem; border-left: 3px solid var(--ink-mint-500); background: var(--ink-mint-50); border-radius: var(--ink-radius-sm); }
.ink-meldung--warnung { border-left-color: var(--ink-orange-500); background: var(--ink-orange-50); }

/* ------------------------------------------------------------
   Verwaltungsreiter über dem eigenen Eintrag
   ------------------------------------------------------------
   Seit dem 08.09.2026 bleibt dort nur der Verweis auf die jeweils
   andere Seite (Inklusio_Reiter): im Formular „Öffentliche
   Ansicht", in der Ansicht „Bearbeiten". JobHive zeichnet Reiter
   ohne Unterstreichung, solange sie nicht aktiv sind – ein
   einzelner las sich deshalb wie Fliesstext (Marc, 08.09.2026).
   Hier als Knopf in der Zweitfarbe, mit Symbol: Auge für die
   Ansicht, Stift fürs Bearbeiten.
   ------------------------------------------------------------ */
.hp-menu--tabbed.hp-menu--listing-manage {
  margin: 0 0 var(--ink-space-3) !important;
  border: 0 !important;
  width: auto !important;
}
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item {
  padding: 0;
}
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item > a {
  display: inline-flex;
  align-items: center;
  gap: var(--ink-space-2);
  padding: 0.65rem 1.2rem;
  border-radius: var(--ink-radius-pill);
  border: 1.5px solid transparent;
  background: var(--ink-mint-500);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--ink-dur-fast) var(--ink-ease-soft),
    transform var(--ink-dur-fast) var(--ink-ease-out),
    box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item > a:hover,
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item > a:focus-visible {
  background: var(--ink-mint-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--ink-shadow-md);
}
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item > a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.9em;
}
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item--listing-view > a::before { content: "\f06e"; } /* Auge */
.hp-menu--tabbed.hp-menu--listing-manage .hp-menu__item--listing-edit > a::before { content: "\f304"; } /* Stift */

/* ------------------------------------------------------------
   „Mit Pro freischalten" ist ein Verweis zur Preisübersicht
   (Marc, 09.09.2026). Vorher eine Plakette, die aussah wie ein
   Knopf und nichts tat.
   ------------------------------------------------------------ */
a.ink-template__lock {
  color: #fff;
  text-decoration: none;
  z-index: 1;
}
a.ink-template__lock:hover,
a.ink-template__lock:focus-visible {
  background: var(--ink-orange-500);
  color: #fff;
}
a.ink-template__lock:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Abbruch eines Bezahlvorgangs (Marc, 09.09.2026): auf Warenkorb,
   Kasse und Bezahlseite ein Feld, das den Vorgang restlos
   abbricht und zur vorherigen Seite zurückführt.
   ------------------------------------------------------------ */
.ink-kaufabbruch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin: 0 0 var(--ink-space-5);
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--ink-border-subtle);
  border-radius: var(--ink-radius-md);
  background: var(--ink-bg-elevated);
}
.ink-kaufabbruch__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: var(--ink-text-sm);
  line-height: 1.5;
  color: var(--ink-graphite-600);
}
.ink-kaufabbruch__knopf {
  white-space: nowrap;
}
/* Unter dem Bezahlknopf einer offenen Bestellung etwas Luft. */
#order_review .ink-kaufabbruch,
.woocommerce-checkout-payment + .ink-kaufabbruch {
  margin-top: var(--ink-space-4);
}

/* ------------------------------------------------------------
   Bewerbungsunterlagen auf dem Profil (Marc, 09.09.2026, Handy):
   die Dateiknöpfe mintgrün, zentriert, mit Abstand zueinander und
   nach unten – vorher zwei orange Knöpfe linksbündig übereinander,
   ohne Luft zum „Kontaktieren"-Balken.
   ------------------------------------------------------------ */
.ink-bewerbung {
  margin-bottom: var(--ink-space-6);
  padding-bottom: clamp(1.25rem, 3vw, 1.6rem);
}
.ink-bewerbung__dateien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: 0.35rem 0 0;
}
.ink-bewerbung__datei {
  width: 100%;
  max-width: 24rem;
  justify-content: center;
  text-align: center;
  background: var(--ink-mint-500);
  color: #fff;
}
.ink-bewerbung__datei:hover,
.ink-bewerbung__datei:focus-visible {
  background: var(--ink-mint-600);
  color: #fff;
}