/*
 * Amtshelferlein.de – seiteneigene Ergänzungen zum e-design-System.
 * Lädt NACH tokens.css/kern.min.css/kern-brand.css/kern-custom.css.
 *
 * Layout-Grundprinzip (Chat vom 28.08., Vorbild-Recherche all-inkl.com /
 * polyteia.com / stripe.com): <main> selbst hat KEINE Breitenbegrenzung
 * mehr (das saß vorher direkt auf <main class="kern-container">, siehe
 * includes/header.php) – jede Sektion ist jetzt ein volltonig
 * hintergrundfarbiges "Band" (.band--*), das INNEN einen
 * .kern-container für die Textbreite trägt. Erst dadurch können
 * Abschnitte im Hell/Getönt/Dunkel-Wechsel wirken statt gleichförmig auf
 * Weiß zu kleben ("zusammenhangslos", Nutzer-Feedback).
 */

.band {
    padding: 4.5rem 0;
}
.band--light {
    background: var(--e-color-bg);
}
.band--tint {
    background: var(--e-color-bg-subtle);
}
.band--dunkel {
    background: var(--e-color-primary);
    color: var(--e-color-primary-contrast);
}

/* Einzelne Inhaltsseiten (Tool-Detail, Preise, Impressum, Datenschutz)
   nutzen bis auf Weiteres ein einziges helles Band ohne Wechsel – siehe
   .seite-inhalt in den jeweiligen PHP-Dateien. */
.seite-inhalt {
    padding: 2.5rem 0 4rem;
}

/* Platzhalter-Schriftzug fürs Logo, siehe TODO in includes/header.php.
   Sobald ein echtes Amtshelferlein-Logo existiert (Bild, analog
   logo-eabstimmung.png), ersetzt ein <img class="e-kopf__logo"> diesen
   Block 1:1 – .e-kopf__marke bleibt dann unverändert. */
.marke-schriftzug {
    font-family: var(--e-font-sans);
    font-weight: var(--e-weight-extrabold);
    font-size: 1.85rem;
    color: var(--e-color-primary);
    letter-spacing: -0.01em;
}

/* Hero-Bereich: knapper Mission-Teaser, kein fortlaufender Story-Text
   (siehe Architektur-Entscheidung im Chat). Zweispaltig mit Bild rechts,
   bricht auf schmalen Bildschirmen auf eine Spalte um. */
.hero {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.hero__text {
    flex: 1 1 22rem;
}
/* Größer und ruhiger als der normale kern-title (Vorbild Stripe: groß,
   aber NICHT fett – semibold statt extrabold, enger Zeilenabstand,
   leicht negatives Letter-Spacing wirkt "gesetzter" statt Standard-
   Browser-Überschrift). */
.hero__titel {
    margin: 0 0 1rem;
    font-family: var(--e-font-sans);
    font-weight: var(--e-weight-semibold);
    font-size: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--e-color-ink);
}
.hero__lead {
    max-width: 34rem;
    font-size: 1.15rem;
    color: var(--e-color-muted);
}

/* Weicher Farbverlauf hinter dem Porträt, damit das Bild mit der
   Markenpalette verbunden wirkt statt lose auf Weiß zu "schweben"
   (Nutzer-Feedback "zusammenhangslos"). */
.hero__bild-wrapper {
    position: relative;
    flex: 1.15 1 26rem;
    max-width: 36rem;
}
.hero__bild-wrapper::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: 0;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
    background:
        radial-gradient(circle at 28% 25%, var(--e-color-secondary) 0%, transparent 60%),
        radial-gradient(circle at 78% 75%, var(--e-color-accent) 0%, transparent 55%);
}
.hero__bild {
    position: relative;
    z-index: 1;
    display: block;
}
.hero__bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--e-radius-lg);
}

/* Einfacher, gestapelter Kopfbereich auf Tool-Detail-/Preise-Seiten
   (kein Zweispalter wie die Startseite-Hero) */
.tool-hero {
    margin-bottom: 1rem;
}
.tool-hero .hero__titel {
    margin-top: 0.5rem;
}

.tool-katalog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filter-Pillen statt zwei getrennter, sich wiederholender Abschnitte
   (siehe Kommentar in index.php) */
.filter-pillen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-pille {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
    border-radius: var(--e-radius-pill);
    border: 1px solid var(--e-color-border);
    background: var(--e-color-surface);
    color: var(--e-color-muted);
    cursor: pointer;
}
.filter-pille:hover {
    border-color: var(--e-color-primary);
    color: var(--e-color-primary);
}
.filter-pille.is-aktiv {
    background: var(--e-color-primary);
    border-color: var(--e-color-primary);
    color: var(--e-color-primary-contrast);
}

/* Responsives Kachel-Raster – wächst einfach um eine weitere .tool-kachel
   pro neuem Tool, keine Layout-Anpassung nötig */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

/* Karten liegen als weiße, dünn umrandete Fläche auf dem getönten Band
   (Vorbild polyteia.com: Haarlinien-Rand statt harter Kontraste). Beim
   Hovern hebt sich genau eine Karte per Schatten ab (Vorbild
   all-inkl.com Paket-Karten) – kein Ausgrauen der Nachbarn nötig, der
   Kontrast entsteht durch die Abhebung der gehoverten Karte vom
   getönten Band drumherum. */
.tool-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    background: var(--e-color-surface);
    border-color: var(--e-color-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tool-kachel:hover,
.tool-kachel:focus-within {
    box-shadow: 0 16px 32px rgba(27, 58, 102, 0.14);
    transform: translateY(-2px);
}
/* KERNs eigene Karten-Innenabstände (24px Padding, 16px/8px Gaps) sind
   für eine Formular-Karte gedacht, wirken bei einer kompakten
   Werbe-Kachel zu großzügig (Nutzer-Feedback 29.08.: "Karte zu hoch",
   "zu viel Platz über dem Button"). Nur hier, gezielt auf .tool-kachel
   verengt statt KERN global anzufassen. */
.tool-kachel .kern-card__container {
    padding: 1.25rem;
    gap: 0.6rem;
}
.tool-kachel .kern-card__body {
    gap: 0.35rem;
}
.tool-kachel .kern-card__footer {
    padding-top: 0;
}
/* Kein eigenes margin hier: .kern-card__container (Eltern-Flexbox) gibt
   bereits 16px gap zwischen Kopf/Body/Fuß vor, .kern-card__body bereits
   8px gap zwischen seinen Kindern. Eigene Margins hätten sich addiert
   und genau den zu großen Abstand erzeugt, den der Nutzer bemängelt hat
   (28.08.: "zwischen Namen und Text nicht so viel Platz", "über dem
   Button nicht so viel Platz"). */
/* Jede Kachel bekommt ein Bild (Nutzer-Vorgabe 28.08.) – echtes
   Tool-Icon bei fertigen Tools, neutrales gestricheltes Platzhalter-Icon
   bei "Bald verfügbar", damit alle Kacheln gleich aufgebaut bleiben. */
.tool-kachel__bild {
    width: 5.5rem;
    height: 5.5rem;
}
.tool-kachel__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tool-kachel__bild--platzhalter svg {
    width: 100%;
    height: 100%;
    color: var(--e-color-border-strong);
}

.tool-kachel__titel {
    margin: 0;
}
.tool-kachel__nutzen {
    color: var(--e-color-muted);
    flex-grow: 1;
    margin: 0;
}
.tool-kachel__preis {
    font-size: 0.9rem;
    color: var(--e-color-subtle);
    margin: 0;
}
.tool-kachel__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
}

/* "Bald verfügbar"-Platzhalter: bleibt bewusst auf demselben Ton wie das
   umgebende getönte Band (statt Weiß wie die echten Karten) – tritt so
   optisch zurück, ohne dass wir das extra ausgrauen müssten. */
.tool-kachel--in-arbeit {
    border-style: dashed;
    background: var(--e-color-bg-subtle);
    color: var(--e-color-subtle);
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    min-height: 10rem;
    box-shadow: none;
    transform: none;
}
.tool-kachel--in-arbeit .tool-kachel__titel {
    color: var(--e-color-subtle);
}

/* Dunkles Vertrauens-Band (Vorbild stripe.com: Abschnitte wechseln
   bewusst zwischen hell und einem dunklen Kontrastband statt
   gleichförmig auf Weiß zu bleiben). */
.vertrauens-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.vertrauens-band__titel {
    margin: 0 0 0.35rem;
    font-weight: var(--e-weight-semibold);
    font-size: 1.05rem;
}
.vertrauens-band p {
    margin: 0;
}

.site-fuss {
    padding: 1.5rem 0;
    border-top: 1px solid var(--e-color-border);
    color: var(--e-color-subtle);
    font-size: 0.9rem;
}
.site-fuss__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.site-fuss nav {
    display: flex;
    gap: 1rem;
}
.site-fuss a {
    color: var(--e-color-subtle);
}