/* ═══════════════════════════════════════════════════════════════
   SOLMED — THEME 2 „VISITENKARTEN"
   Ziel: assets/theme.css   ·   wird NACH style.css geladen,
   VOR dem Inline-Block aus marke_stil().

   Gleicher Stand wie das DSF-Theme, angepasst an SOLMED:
     · Schrift  Bitter über Karla statt Barlow Condensed
     · Grund    warmer Sandton statt neutralem Hellgrau
     · Hero     solmed-pflege.jpg, Ausschnitt oben
     · Kultur   nummerierte Karten (keine Fotos) + zwei Farbflächen

   MARKE in inc/config.php steht auf der Bernstein-Palette:
   a8681a Akzent · 7d4c10 Hover · d9922e Sonne · 26221d Dunkelfeld.
   Das Gelb trägt keine weiße Schrift, sondern nur Ziffern, Kicker
   und Marker — deshalb zeigt --marke-text auf akzent_dunkel.

   Schriften als WOFF2 in assets/fonts/:
     bitter-600  bitter-700  karla-400  karla-600  karla-700
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bitter';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/bitter-600.woff2') format('woff2')}
@font-face{font-family:'Bitter';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/bitter-700.woff2') format('woff2')}
@font-face{font-family:'Karla';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/karla-400.woff2') format('woff2')}
@font-face{font-family:'Karla';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/karla-600.woff2') format('woff2')}
@font-face{font-family:'Karla';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/karla-700.woff2') format('woff2')}

:root{
  --font-display:'Bitter',Georgia,serif;
  --font-text:'Karla','Segoe UI',system-ui,sans-serif;
  --rund:14px;
  --schatten:0 1px 3px rgba(38,34,29,.07);
  --schatten-gross:0 14px 38px rgba(38,34,29,.11);
  --linie:rgba(38,34,29,.12);
  --grau-bg:#f7f4ef;                /* warmer Sand statt kühlem Grau */
  --marke-text:var(--akzent-dunkel);/* trägt Text auf Weiß in beiden Paletten */
}

body{background:var(--grau-bg);line-height:1.62}
h1,h2,h3{letter-spacing:-.015em;text-transform:none}

/* ── Kopf ────────────────────────────────────────────────────── */
.kopf{background:rgba(255,255,255,.93);backdrop-filter:blur(8px)}
.kopf-nav a{border-bottom:0;border-radius:999px;padding:7px 14px}
.kopf-nav a:hover{background:var(--grau-bg);border-bottom-color:transparent}

/*  Auf der Startseite schwebt der Kopf über dem Foto. :has() greift
    nur dort, weil nur index.php ein .hero enthält — kein Patch an
    layout.php nötig. Browser ohne :has() (vor 2023) zeigen den
    normalen weißen Kopf; die Seite bleibt vollständig bedienbar.
    Der Kopf scrollt dabei mit weg, wie im Entwurf.               */
body:has(.hero) .kopf{position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.20)}
body:has(.hero) .kopf-nav a{color:#fff}
body:has(.hero) .kopf-nav a:hover{background:rgba(255,255,255,.18);color:#fff}
body:has(.hero) .marke-text{color:#fff}
/*  Das Logo ist für hellen Grund gezeichnet und bekommt deshalb eine
    weiße Platte statt einer Invertierung — Invertieren macht aus dem
    Blau ein Gelb.                                                */
body:has(.hero) .kopf .marke img{background:#fff;border-radius:10px;padding:8px 12px}

/*  Handlungsschalter im Kopf. Auf hellem Grund gefüllt, über dem
    Foto weiß — beides mit ausreichendem Kontrast.               */
/*  Der Schalter steht INNERHALB von .kopf-nav. Die Regel für die
    Navigationslinks (.kopf-nav a) wiegt deshalb schwerer als eine
    Klasse allein — der Selektor muss sie mitnennen, sonst gewinnt
    die weiße Linkfarbe und der Schalter wird weiß auf weiß.     */
.kopf-nav a.kopf-cta{border-radius:999px;padding:11px 22px;
  font-weight:600;font-size:.94rem;border:0;
  background:var(--akzent);color:#fff}
.kopf-nav a.kopf-cta:hover{background:var(--akzent-dunkel);color:#fff}
body:has(.hero) .kopf-nav a.kopf-cta{background:#fff;color:var(--dunkel)}
body:has(.hero) .kopf-nav a.kopf-cta:hover{background:var(--gold);color:var(--dunkel)}

/* ── Hero: Foto über die volle Breite ────────────────────────── */
/*  Fehlt die Bilddatei, bleibt die Verlaufsfläche stehen — die
    Seite wird dunkel statt kaputt.                              */
.hero{
  /*  Verlauf von LINKS, nicht von oben: Auf diesem Bild ist die
      linke Hälfte hell und leer — dort steht die Überschrift. Ein
      Verlauf von oben würde das ganze Foto eintrüben und die helle,
      freundliche Anmutung nehmen, die es ausmacht.
      Ausschnitt rechts, damit die Personen im Bild bleiben, wenn
      das sehr breite Format (2,34:1) seitlich beschnitten wird.  */
  background:
    linear-gradient(100deg,
      rgba(28,22,14,.86) 0%,
      rgba(28,22,14,.70) 34%,
      rgba(28,22,14,.32) 62%,
      rgba(28,22,14,.10) 100%),
    #efe9e0 url('/assets/hero.jpg') right center/cover no-repeat;
  color:#fff;
  min-height:min(74vh,620px);
  display:flex;align-items:center;
  padding:132px 0 64px;
  position:relative;
}
/*  Bildherkunft. Der Hinweis steht im Markup (patch_ki_hinweis.py),
    nicht als CSS-Inhalt: Eine Kennzeichnung, die mit dem Stylesheet
    verschwindet, ist keine. Hier wird sie nur platziert.        */
.bild-hinweis{
  position:absolute;right:16px;bottom:14px;margin:0;z-index:2;
  font-family:var(--font-text);font-size:.7rem;letter-spacing:.03em;
  color:rgba(255,255,255,.82);background:rgba(28,22,14,.42);
  backdrop-filter:blur(4px);padding:5px 11px;border-radius:999px;
}
@media (max-width:640px){
  .bild-hinweis{right:12px;bottom:10px;font-size:.66rem;padding:4px 9px}
}
.hero .wrap{width:100%;position:relative;z-index:1}
.hero::after{display:none}
.hero .wrap{background:transparent;box-shadow:none;border-radius:0}
/*  Kicker als Glaspille wie im Entwurf, nicht als nackte Zeile */
.hero .claim{display:inline-block;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 18px;color:#fff;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:22px}
.hero h1{color:#fff;text-transform:none;font-weight:700;letter-spacing:-.005em;
  font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.08;margin-bottom:22px;
  max-width:20ch;
  text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero p{color:rgba(255,255,255,.92);max-width:60ch;
  text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero .btn-rand{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);
  color:#fff;backdrop-filter:blur(4px)}
.hero .btn-rand:hover{background:#fff;color:var(--dunkel);border-color:#fff}

/* Kennzahlen im Hero: frei stehend neben dem Button, wie im Entwurf */
.kennzahlen{display:flex;flex-wrap:wrap;gap:30px;margin-top:28px}
.kennzahlen div{background:transparent;border:0;backdrop-filter:none;padding:0}
.kennzahlen strong{color:#fff;font-weight:700;font-size:1.75rem;line-height:1;
  font-family:var(--font-display);margin-right:8px}
.kennzahlen div{display:flex;align-items:baseline}
.kennzahlen span{color:rgba(255,255,255,.78);font-size:.9rem}

@media (max-width:820px){
  /*  Schmales Fenster: Der Text liegt über der ganzen Breite, ein
      Verlauf von links trägt ihn dort nicht mehr.               */
  .hero{
    background:
      linear-gradient(180deg,
        rgba(28,22,14,.74) 0%,
        rgba(28,22,14,.56) 45%,
        rgba(28,22,14,.84) 100%),
      #efe9e0 url('/assets/hero.jpg') 70% center/cover no-repeat;
    min-height:auto;padding:104px 0 46px;
  }
}
@media (max-width:640px){
  .hero{padding:96px 0 42px}
  .kennzahlen{gap:22px}
  .kennzahlen strong{font-size:1.55rem}
}

/*  Standortfilter: für SOLMED nicht vorgesehen — ein Standort.
    Die Regeln stehen im DSF-Theme; patch_stellenfilter.py hier
    nicht laufen lassen.                                         */

/* ── Stellen als Karten ──────────────────────────────────────── */
.abschnitt-kopf h2{text-transform:none;font-weight:700;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.08;max-width:16ch}
/*  Kein Kicker: SOLMEDs H2 lautet weiterhin "Aktuelle Stellen-
    angebote" — er stünde sonst doppelt. Sobald die Überschrift
    mitzählt wie bei DSF, kann die Regel aus dem DSF-Theme hierher. */
.stellen{gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  counter-reset:stelle}
.karte{background:#fff;border:1px solid var(--linie);border-top:1px solid var(--linie);
  border-left:0;border-radius:16px;padding:26px 26px 20px;
  box-shadow:0 1px 2px rgba(29,31,32,.04);
  position:relative;flex-direction:column;align-items:flex-start;gap:0;
  min-height:252px}
.karte:hover{background:#fff;transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--akzent) 45%,#fff);
  box-shadow:var(--schatten-gross)}

/*  Laufende Nummer über CSS-Zähler statt im Markup: Sie folgt der
    Reihenfolge im Raster und bleibt richtig, wenn eine Stelle
    deaktiviert wird. Die Initiativkarte zählt nicht mit.        */
.karte::before{counter-increment:stelle;
  content:counter(stelle,decimal-leading-zero);
  font-family:var(--font-display);font-weight:600;font-size:.84rem;
  letter-spacing:.16em;color:#8d949b}

.karte h3{color:var(--tinte);text-transform:none;font-weight:700;
  font-family:var(--font-display);font-size:1.5rem;line-height:1.14;
  letter-spacing:0;margin:14px 0 12px}
.karte:hover h3{color:var(--akzent)}

/*  Der Umfang-Chip sitzt im Markup unten bei den Tags, im Entwurf
    aber oben rechts neben der Nummer. Herausnehmen statt umbauen —
    index.php bleibt dadurch unangetastet.                       */
.karte .tag-akzent{position:absolute;top:22px;right:22px;
  background:#e9f0f7;color:var(--akzent-dunkel);
  border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:600}

/*  Der Ort ist im Entwurf kein Chip, sondern Text mit Punkt.     */
.karte .tags{gap:14px;margin:0}
/*  Ort ist im Entwurf kein Chip, sondern Text mit Punkt. Neben
    Fläche und Innenabstand muss auch die Umrandung aus style.css
    weg — sonst legt sie sich als Rahmen direkt auf den Text.    */
.karte .tag:not(.tag-akzent){background:transparent;padding:0;
  border:0;border-radius:0;color:var(--grau);font-size:.95rem}
.karte .tag:not(.tag-akzent)::before{content:'';display:inline-block;
  width:6px;height:6px;border-radius:999px;background:#8fa8bd;
  margin-right:9px;vertical-align:middle}

/*  Fußzeile der Kachel: Trennlinie, Text links, Pfeil rechts.
    .pfeil enthält im Markup nur den Pfeil — ::before liefert den
    Text, space-between schiebt beide auseinander.               */
.pfeil{align-self:stretch;margin-top:auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--linie);padding-top:16px;
  font-family:var(--font-display);font-size:.84rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dunkel)}
.pfeil::before{content:'Stelle ansehen'}
.karte:hover .pfeil{color:var(--akzent)}

/* Initiativkarte — füllt die Reihe, wenn nur zwei Stellen laufen */
.karte-initiativ{background:#fff;border-color:color-mix(in srgb,var(--gold) 55%,#fff);
  box-shadow:none}
.karte-initiativ:hover{background:color-mix(in srgb,var(--gold) 8%,#fff);
  border-color:var(--gold);box-shadow:var(--schatten)}
.karte-initiativ::before{content:none;counter-increment:none}
.karte-initiativ .tag-akzent{position:static;background:color-mix(in srgb,var(--gold) 22%,#fff);
  color:#6b4d00}
.karte-initiativ .karte-text{color:var(--grau);font-size:.95rem;margin:2px 0 0}
.karte-initiativ .pfeil::before{content:'Initiativ bewerben'}

.leer{border-radius:var(--rund);border:0;background:#fff;box-shadow:var(--schatten)}

/* ── Kultur-Auszug auf der Startseite ────────────────────────── */
/*  Der Abschnitt erscheint nur, wenn inhalte/kultur-auszug.html
    existiert — die Regeln laufen sonst ins Leere.               */
.kultur-auszug{background:#fff;margin-top:8px}
.kultur-auszug h2{text-transform:none;font-weight:700;font-size:2rem;
  margin-bottom:10px}
.kultur-auszug .einleitung{color:var(--grau);max-width:62ch;
  font-size:1.06rem;margin-bottom:30px}
.kultur-auszug .leitsaetze{gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kultur-auszug .leit{background:var(--grau-bg);border-left:0;
  border-radius:var(--rund);padding:24px;box-shadow:none;
  flex-direction:column;gap:12px}
.kultur-auszug .leit-nr{background:var(--gold);color:var(--dunkel);
  border-radius:999px;width:34px;height:34px;font-size:1rem;font-weight:700}
.kultur-auszug .leit h3{margin-bottom:8px}

/*  Vorteile als Chipreihe unter den Karten */
.vorteile-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  padding:0;margin:26px 0 0}
.vorteile-chips li{background:color-mix(in srgb,var(--gold) 16%,#fff);
  color:var(--dunkel);border-radius:999px;padding:9px 17px;
  font-size:.92rem;font-weight:600}
.kultur-mehr{margin-top:26px;display:inline-block}

.kultur-flaechen{display:grid;gap:14px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.flaeche{border-radius:var(--rund);padding:28px 26px;
  display:flex;flex-direction:column;gap:8px}
.flaeche strong{font-family:var(--font-display);font-weight:700;
  font-size:1.45rem;letter-spacing:0}
.flaeche span{font-size:.96rem;line-height:1.55}
.flaeche-sonne{background:var(--gold);color:var(--dunkel)}
.flaeche-sonne span{color:rgba(38,34,29,.82)}
.flaeche-dunkel{background:var(--dunkel);color:#fff}
.flaeche-dunkel span{color:rgba(255,255,255,.82)}

/* ── Buttons als Pillen ──────────────────────────────────────── */
.btn{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600;
  font-size:.95rem;padding:13px 26px}
.btn-rand{background:#fff;border:1px solid var(--linie);color:var(--tinte);padding:12px 25px}
.btn-rand:hover{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.btn-klein{padding:8px 16px;font-size:.85rem}

/* ── Stellendetail ───────────────────────────────────────────── */
.detail-kopf{background:var(--dunkel);padding:44px 0 40px}
.detail-kopf::after{height:0}
.detail-kopf h1{text-transform:none;font-weight:700;letter-spacing:-.03em}
.inhalt{background:#fff;border-radius:18px;padding:34px 36px;box-shadow:var(--schatten)}
.inhalt h2{text-transform:none;font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.ul li::before{border-radius:999px;width:8px;height:8px;top:14px}

/* ── Formular ────────────────────────────────────────────────── */
.box{border:0;border-top:0;border-radius:18px;box-shadow:var(--schatten-gross);padding:30px}
.box h2{text-transform:none;font-weight:600;letter-spacing:-.02em}
.feld input,.feld textarea,.feld select{border-radius:10px;border-color:#ded7cc}
.fehler,.erfolg,.hinweis-box{border-radius:12px}
.hinweis-box{border-left-width:0;border-top:3px solid var(--gold)}

/* ── Benefits als Kartenraster ───────────────────────────────── */
.benefits{background:transparent;border-left:0;padding:0}
.benefits h2{text-transform:none}
.benefit-liste{gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.benefit-liste li{background:#fff;border-radius:var(--rund);padding:16px 18px;
  box-shadow:var(--schatten);align-items:flex-start}
.benefit-liste .bi{border-radius:10px}

/* ── Kulturseite ─────────────────────────────────────────────── */
.leitsaetze{gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.leit{background:#fff;border-left:0;border-radius:var(--rund);padding:24px;
  box-shadow:var(--schatten);flex-direction:column;gap:12px}
.leit-nr{border-radius:999px;width:34px;height:34px;font-size:1rem}
.leit h3{text-transform:none;font-weight:600}
.kultur .claim{background:#fff;border-radius:18px;padding:26px;
  box-shadow:var(--schatten);font-weight:700;letter-spacing:-.02em;
  font-family:var(--font-display)}

/* ── Fußzeile ────────────────────────────────────────────────── */
.fuss{border-top-width:0;border-radius:22px 22px 0 0;margin-top:56px}
.fuss strong{text-transform:none;letter-spacing:-.02em}

/* ── Admin ───────────────────────────────────────────────────── */
.zahl{border-radius:var(--rund);border-left-width:0;border-top:3px solid var(--akzent)}
.tafel,.formular{border-radius:18px}
.anmelden-karte{border-radius:18px;border-top-width:0}
.admin-nav a{border-radius:999px}
.stat{border-radius:999px}

/* ── Kopf auf schmalen Fenstern ───────────────────────────────── */
/*  Der schwebende Kopf funktioniert nur, solange Logo, Navigation
    und Schalter in eine Zeile passen. Darunter überlagert er den
    Hero-Text. Also zurück in den normalen Fluss: weiße Leiste über
    dem Foto, dunkle Schrift, gefüllter Schalter.
    Die Regeln müssen die :has()-Selektoren von oben spiegeln —
    sonst gewinnen jene, weil sie gleich schwer wiegen und früher
    stehen.                                                       */
@media (max-width:860px){
  body:has(.hero) .kopf{position:static;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--linie)}
  body:has(.hero) .kopf-nav a{color:var(--tinte)}
  body:has(.hero) .kopf-nav a:hover{background:var(--grau-bg);color:var(--tinte)}
  body:has(.hero) .marke-text{color:var(--tinte)}
  body:has(.hero) .kopf .marke img{background:transparent;padding:0;border-radius:0}
  body:has(.hero) .kopf-nav a.kopf-cta{background:var(--akzent);color:#fff}
  body:has(.hero) .kopf-nav a.kopf-cta:hover{background:var(--akzent-dunkel);color:#fff}

  .kopf-nav{flex-wrap:wrap;gap:4px;row-gap:6px}
  .kopf-nav a{padding:6px 10px;font-size:.92rem}
  .kopf-nav a.kopf-cta{padding:9px 16px;font-size:.9rem}

  body:has(.hero) .hero{padding-top:48px}
}

/*  Ganz schmal: Der Schalter im Kopf ist entbehrlich — die
    Initiativkachel und der Hero-Button führen zum selben Ziel,
    und drei Menüpunkte plus Pille passen nicht in eine Zeile.   */
@media (max-width:420px){
  .kopf-nav a.kopf-cta{display:none}
}


/* ── Listen in der Stellenbeschreibung ────────────────────────
   Der globale Reset nimmt ul/ol das Padding, dadurch standen die
   Punkte buendig am linken Rand. Die zweite Regelgruppe faengt
   Listen ohne Klasse ab, wie sie aeltere Inhalte enthalten. */
.inhalt .ul, .inhalt ul:not(.benefit-liste), .inhalt ol { padding-left: 6px; margin: 0 0 16px }
.inhalt ul:not(.benefit-liste):not(.ul) { list-style: none }
.inhalt ul:not(.benefit-liste):not(.ul) li { padding: 5px 0 5px 26px; position: relative }
.inhalt ul:not(.benefit-liste):not(.ul) li::before { content: ""; position: absolute;
  left: 4px; top: 13px; width: 9px; height: 9px; background: var(--akzent); border-radius: 2px }