/*
 * eyeye-Theme für Ghost.
 *
 * Alle Werte hier sind aus apps/eyeye/app/globals.css und den
 * Komponenten der Next.js-App übernommen — Schriftgrößen, Zeilenhöhen,
 * Laufweiten, Containerbreiten und Abstände. Wo eine Zahl auffällig
 * krumm aussieht (811px, -0.66px, 343px), ist sie genau deshalb so:
 * sie stammt aus dem Original und wurde nicht gerundet.
 *
 * Gliederung:
 *   0. Schriften
 *   1. Grundlagen und Typografie
 *   2. Container
 *   3. Navigation
 *   4. Übersicht und Kacheln
 *   5. Beitrag und Fließtext
 *   6. Ghost-eigene Karten (Galerie, Zitat, Einbettung)
 *   7. Fußbereich, Blätterung
 *   8. Schmale Bildschirme
 */

/* ── 0. Schriften ─────────────────────────────────────────────────────── */

/*
 * Die drei Schriften liegen als Dateien im Theme (assets/fonts/) und
 * werden von hier ausgeliefert — NICHT von fonts.googleapis.com.
 *
 * Das ist kein Geschmacksurteil: Wer Google Fonts extern einbindet,
 * überträgt die IP-Adresse jedes Besuchers an Google, und deutsche
 * Gerichte sehen darin einen DSGVO-Verstoß. Die Next.js-App macht es
 * über next/font/google genauso — dort werden die Dateien beim Bauen
 * heruntergeladen und selbst ausgeliefert.
 *
 * Geladen ist nur das Subset "latin"; es enthält Umlaute und ß.
 * Erneuern: assets/fonts/HOLEN.md beschreibt den Weg.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/inter-300.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/playfair-display-500.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/roboto-500.woff2") format("woff2");
}

/* ── 0b. Farben an einer Stelle ───────────────────────────────────────── */

/*
 * Die Farben stehen gesammelt an einer Stelle statt verstreut im
 * Stylesheet — es sind bewusst wenige: zwei tragende, der Rest leitet
 * sich ab.
 *
 * Dieses Theme gehört zu eyeye. haude.ai bekommt ein eigenes; die
 * Sammelstelle hier dient nicht der Mehrfachnutzung, sondern der
 * Übersicht — wer den eyeye-Auftritt anpasst, ändert diese vier Werte
 * und nicht achtzehn Stellen im Text.
 */
:root {
    --ton-text: #16191a;          /* Schrift, Linien, Kacheln */
    --ton-grund: #ffffff;         /* Seitenhintergrund */
    --ton-gedaempft: #6b7280;     /* Bildunterschriften, h5 im Fließtext */
    --ton-linie: #e5e7eb;         /* Trennlinien */

    /* Abgeleitet: der Überzug auf den Kacheln und der Schatten der
       Kopfleiste. Als eigene Werte notiert, weil CSS aus einer Hex-Farbe
       keine Deckkraft ableiten kann, ohne color-mix zu benutzen. */
    --ueberzug: rgba(22, 25, 26, 0.85);
    --ueberzug-klar: rgba(22, 25, 26, 0);
    --schatten-nav: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ── 1. Grundlagen und Typografie ─────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    /* Die feste Kopfleiste ist 82px hoch; im Original stehen 130px, damit
       Sprungziele nicht darunter verschwinden. */
    scroll-padding-top: 130px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 28px;
    color: var(--ton-text);
    background: var(--ton-grund);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0.2px;
    margin: 0;
}

h3 {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.66px;
    margin: 0;
}

h4 {
    font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: -0.03em;
    margin: 0;
}

h5,
h6 {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}

p {
    font-weight: 300;
    line-height: 28px;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* Die Abstandsklötzchen entsprechen der Spacer-Komponente des Originals
   (Standardhöhe 20px, im Beitrag zusätzlich 40 und 60). */
.abstand { height: 20px; }
.abstand--30 { height: 30px; }
.abstand--40 { height: 40px; }
.abstand--50 { height: 50px; }
.abstand--60 { height: 60px; }
.abstand--62 { height: 62px; }

/* Oberer und unterer Rand jeder Inhaltsseite, wie in blog/page.tsx. */
.seiten-abschnitt {
    padding-top: 124px;
    padding-bottom: 62px;
}

/* ── 2. Container ─────────────────────────────────────────────────────── */

/*
 * ABWEICHUNG vom Original: Dort gibt es zwei Breiten — 1240px für die
 * Startseite, 1270px für Unterseiten (aus der WordPress-Vergangenheit:
 * vc_row mit und ohne column-inner). Da Kopfleiste und Fußbereich immer
 * 1240px benutzen, entsteht auf jeder Unterseite ein Versatz von 15px
 * zwischen Logo und Inhalt — und auf der Startseite zwischen Hero-Video
 * und Text.
 *
 * Hier benutzt alles .container-main. .container-page bleibt definiert,
 * falls die alte Breite doch irgendwo gebraucht wird.
 */

.container-main {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container-page {
    max-width: 1270px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Textspalte im Beitrag: 811px abzüglich 2×15px Innenabstand ergeben die
   781px Satzbreite des Originals. */
.container-blog {
    max-width: 811px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ── 3. Navigation ────────────────────────────────────────────────────── */

.website-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background: transparent;
    transition: background-color 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

.website-nav--gescrollt {
    background: var(--ton-grund);
    box-shadow: var(--schatten-nav);
}

.nav-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
}

.nav-logo {
    flex-shrink: 0;
    display: block;
}

.nav-logo img {
    width: 120px;
    height: auto;
}

.nav-menue {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menue a {
    display: block;
    padding: 32px 15px;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--ton-text);
    transition: opacity 200ms;
}

.nav-menue a:hover {
    opacity: 0.6;
}

/* Klappschalter — nur auf schmalen Bildschirmen sichtbar, siehe Abschnitt 8. */
.nav-schalter {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: 0;
    cursor: pointer;
}

.nav-schalter span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ton-text);
    transition: transform 200ms, opacity 200ms;
}

.nav-schalter--offen span:nth-child(1) {
    transform: rotate(45deg) translateY(7px) translateX(5px);
}

.nav-schalter--offen span:nth-child(2) {
    opacity: 0;
}

.nav-schalter--offen span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px) translateX(5px);
}

/* ── 4. Übersicht und Kacheln ─────────────────────────────────────────── */

/* „Blog / News" über der Überschrift: fett, unterstrichen mit Abstand —
   im Original `underline decoration-2 underline-offset-8`. */
.abschnitt-label span {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.beitrags-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.beitrags-karte {
    position: relative;
    display: block;
    height: 343px;
    overflow: hidden;
    /* Hereinklappen wie im Original (cardFlipIn, 0.6s, 150ms je Karte). */
    animation: kartenEinklappen 0.6s ease-out both;
    animation-delay: calc(var(--karten-index, 0) * 150ms);
    transform-origin: center center;
}

@keyframes kartenEinklappen {
    0% {
        transform: perspective(800px) rotateY(-90deg);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}

.beitrags-karte__bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beitrags-karte__ueberzug {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    background: var(--ueberzug);
    color: var(--ton-grund);
    opacity: 0;
    transition: opacity 250ms;
}

.beitrags-karte:hover .beitrags-karte__ueberzug,
.beitrags-karte:focus-visible .beitrags-karte__ueberzug {
    opacity: 1;
}

.beitrags-karte__datum {
    font-size: 12px;
    line-height: 1.4;
}

.beitrags-karte__titel {
    /* Auf der Kachel bewusst Inter statt Playfair — so ist es im Original
       (cardTitleStyle in blog/page.tsx), obwohl es ein h2 ist. */
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--ton-grund);
}

.beitrags-karte__autor {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

/* ── 5. Beitrag und Fließtext ─────────────────────────────────────────── */

.beitrag-titelbild {
    width: 100%;
    height: auto;
}

.beitrag-zeile {
    font-size: 14px;
    line-height: 28px;
}

.zurueck-link {
    display: inline-block;
    color: var(--ton-text);
    font-weight: 600;
    transition: opacity 200ms;
}

.zurueck-link:hover {
    opacity: 0.6;
}

/* Fließtext-Typografie exakt wie `.blog-prose` im Original. */
.blog-prose > * {
    margin: 0 0 20px 0;
}

.blog-prose > *:last-child {
    margin-bottom: 0;
}

.blog-prose > h2 {
    margin-top: 40px;
    margin-bottom: 20px;
}

.blog-prose > h3,
.blog-prose > h4 {
    margin-top: 30px;
    margin-bottom: 16px;
}

.blog-prose > h5 {
    margin-top: 10px;
    color: var(--ton-gedaempft);
}

.blog-prose ul,
.blog-prose ol {
    padding-left: 24px;
    font-weight: 300;
    line-height: 28px;
}

.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li { margin-bottom: 8px; }

.blog-prose a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.blog-prose a:hover {
    opacity: 0.6;
}

.blog-prose blockquote {
    border-left: 3px solid var(--ton-text);
    padding-left: 20px;
    font-style: italic;
    margin-left: 0;
    margin-right: 0;
}

/* ── 6. Ghost-eigene Karten ───────────────────────────────────────────── */

/* Ghost setzt Bilder, Galerien und Einbettungen als eigene „Karten" in den
   Beitrag. Das Original kennt diese Klassen nicht, deshalb hier die
   Anpassung an dieselbe Satzbreite und dieselben Abstände. */

.blog-prose figure {
    margin: 0 0 20px 0;
}

.blog-prose figcaption {
    margin-top: 10px;
    font-size: 16px;
    line-height: 26px;
    color: var(--ton-gedaempft);
    text-align: center;
}

/* Breite Bilder und Galerien dürfen über die Textspalte hinausragen —
   sonst wirken Galerien in 781px gequetscht. */
.blog-prose .kg-width-wide {
    /* 781px Textspalte, hier auf 1070px geöffnet, mittig. */
    width: min(1070px, calc(100vw - 30px));
    margin-left: calc(50% - min(535px, calc(50vw - 15px)));
}

.blog-prose .kg-width-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.blog-prose .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-prose .kg-gallery-row {
    display: flex;
    gap: 10px;
}

.blog-prose .kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-prose .kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-prose .kg-embed-card iframe {
    max-width: 100%;
}

.blog-prose hr {
    border: 0;
    border-top: 1px solid var(--ton-linie);
    margin: 40px 0;
}

/* ── 7. Fußbereich, Blätterung ────────────────────────────────────────── */

.website-footer {
    padding-top: 60px;
    padding-bottom: 30px;
    overflow: hidden;
}

.website-footer p {
    text-align: center;
    font-size: 14px;
    line-height: 28px;
    margin: 0;
}

.website-footer a {
    transition: opacity 200ms;
}

.website-footer a:hover {
    opacity: 0.6;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
    font-size: 16px;
    font-weight: 600;
}

.pagination a {
    transition: opacity 200ms;
}

.pagination a:hover {
    opacity: 0.6;
}

/* ── 8. Schmale Bildschirme ───────────────────────────────────────────── */

/* Umbruchpunkt 960px wie im Original (dort der Punkt, an dem das
   Klappmenü erscheint). */
@media (max-width: 959px) {
    .nav-schalter {
        display: flex;
    }

    .nav-menue {
        position: absolute;
        top: 82px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        background: var(--ton-grund);
        box-shadow: var(--schatten-nav);
        display: none;
    }

    .nav-menue--offen {
        display: flex;
    }

    .nav-menue a {
        padding: 16px 15px;
        width: 100%;
    }

    .seiten-abschnitt {
        padding-top: 110px;
        padding-bottom: 50px;
    }

    h1,
    h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .beitrags-raster {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Ohne Zeigegerät gibt es kein Überfahren — die Beschriftung der
       Kachel bliebe sonst unerreichbar. Deshalb dauerhaft sichtbar. */
    .beitrags-karte__ueberzug {
        opacity: 1;
        background: linear-gradient(to bottom, var(--ueberzug-klar) 30%, var(--ueberzug) 100%);
        justify-content: flex-end;
        gap: 8px;
    }

    .blog-prose .kg-width-wide {
        width: 100%;
        margin-left: 0;
    }
}

/* Bewegung reduzieren: das Hereinklappen der Kacheln entfällt. */
@media (prefers-reduced-motion: reduce) {
    .beitrags-karte {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ── 9. Statische Seiten ──────────────────────────────────────────────── */

/*
 * Für Startseite, Leistungen, Arbeitsproben und Kontakt. Die Next.js-App
 * setzt hier Tailwind-Klassen ein (flex, items-end, w-full …); ein
 * Ghost-Theme hat die nicht. Statt Tailwind mitzuschleppen, stehen die
 * wenigen tatsächlich gebrauchten Anordnungen hier als benannte Klassen.
 * Die Zahlen stammen unverändert aus den Originalkomponenten.
 */

/* Der erste Abschnitt rückt etwas höher als die übrigen — im Original
   paddingTop 124px bei marginTop -40px. */
.hero-abschnitt {
    padding-top: 124px;
    margin-top: -40px;
}

/* Aufeinanderfolgende Abschnitte tragen nur oben Luft; nur der letzte
   schließt mit 62px ab (das erledigt .seiten-abschnitt). */
.seiten-abschnitt--ohne-fuss { padding-bottom: 0; }

.abstand--80 { height: 80px; }

.mit-abstand-unten { margin-bottom: 20px; }

.weich-hover { transition: opacity .2s; }
.weich-hover:hover { opacity: .6; }

.voll-breit { width: 100%; height: auto; }

/* ----- Video ----- */
.video-rahmen {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
/* ABWEICHUNG vom Original: Dort hat der Hero-Rahmen eine feste Höhe von
   600px. Bei rund 1240px Breite ergibt das ein Verhältnis von 2,07:1 —
   ein 16:9-Video passt da nicht hinein und wird von Vimeo mit Rändern
   links und rechts zentriert. Der Rahmen ist dann zwar bündig, das
   sichtbare Bild aber schmaler als der Text darunter.

   Deshalb hier das Seitenverhältnis des Videos statt einer festen Höhe:
   Das Bild füllt die Breite aus und steht auf derselben Kante wie alles
   andere. Die Höhe ergibt sich (bei 1240px rund 697px). */
.video-rahmen--hero { aspect-ratio: 16 / 9; height: auto; }

.video-rahmen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ----- Zitat ----- */
h2.quote {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0.2px;
    text-align: center;
    margin: 0;
}

.zitat-quelle {
    text-align: center;
    font-size: 14px;
    line-height: 28px;
}

/* ----- Merkmalskarten ("Was eyeye antreibt") ----- */
.merkmal-liste {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Symbol und Text stehen auf gemeinsamer Grundlinie — daher align-items:
   flex-end, nicht center. */
.merkmal {
    display: flex;
    align-items: flex-end;
    column-gap: 10px;
}

.merkmal-symbol {
    flex-shrink: 0;
    width: 101px;
    padding: 5px;
}
.merkmal-symbol img { width: 61px; height: auto; }

.merkmal-text { flex: 1; padding: 5px; }
/* Die Überschriften enthalten im Original einen echten Zeilenumbruch im
   Text (whitespace-pre-line) — der bleibt erhalten. */
.merkmal-text h3 { margin-bottom: 20px; white-space: pre-line; }

/* ----- Bildkarussell ----- */
/* Ersetzt components/ImageCarousel.tsx. Gescrollt wird mit dem Browser
   statt mit JavaScript-Positionsrechnung: Scroll-Snap hält die Bilder
   bündig, die beiden Knöpfe schieben um je eine Breite weiter. */
.karussell { position: relative; }

.karussell-spur {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.karussell-spur::-webkit-scrollbar { display: none; }

.karussell-spur img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: start;
}

.karussell-zurueck,
.karussell-vor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    background: rgba(22, 25, 26, 0.6);
    transition: background-color .2s;
}
.karussell-zurueck:hover,
.karussell-vor:hover { background: rgba(22, 25, 26, 0.85); }
.karussell-zurueck { left: 10px; }
.karussell-vor { right: 10px; }

@media (max-width: 959px) {
    .hero-abschnitt { padding-top: 65px; margin-top: 0; }
    h2.quote { font-size: 18px; line-height: 26px; }
    .merkmal { align-items: flex-start; }
}

/* ── Verweis auf den KI-Assistenten ───────────────────────────────────── */
/*
 * An dieser Stelle stand im Original der dunkle Kasten mit dem sprechenden
 * Avatar. Er ist als eigene Anwendung ausgezogen (apps/eyeye-assistent) —
 * ein Ghost-Theme kann keinen Server-Endpunkt mit OpenAI-Schlüssel haben.
 *
 * Die Gestaltung nimmt den dunklen Kasten bewusst auf: Wer die Seite
 * kennt, soll den Ort wiedererkennen, an dem der Assistent war. Nur steht
 * dort jetzt eine Tür statt des Raums.
 */
.assistent-hinweis {
    background: #16191A;
    border-radius: 12px;
    margin-top: 60px;
    padding: 60px 20px;
    text-align: center;
}

.assistent-hinweis h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}

.assistent-hinweis p {
    color: #888;
    font-size: 15px;
    margin: 0 0 32px;
}

.assistent-knopf {
    background: #00D4FF;
    border-radius: 6px;
    color: #16191A;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 28px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.assistent-knopf:hover {
    opacity: 0.85;
}

@media (max-width: 959px) {
    .assistent-hinweis {
        padding: 40px 20px;
    }
}