/* =============================================================================
   Creative AI - Werbeseite, Gestaltung

   Gehoert zu index.html im selben Ordner. BEIDE Dateien zusammen hochladen, sonst
   passt das eine nicht zum anderen.

   Aufbau dieser Datei, in dieser Reihenfolge:
     Farben und Grundwerte  - alles Aenderbare steht als Variable ganz oben,
                              einschliesslich der Fassung fuer den dunklen Modus
     Grundgeruest           - Schrift, Ueberschriften, Knoepfe
     Abschnitte             - Wechsel hell/getoent, Kopfzeilen
     Bausteine              - Karten, Raster, Oberflaechen-Nachbauten, Blasen
     Ausnahmen              - was nur fuer einen einzelnen Abschnitt gilt
   ============================================================================= */

/* ============================================================
   Farben nach dem Erscheinungsbild von creative-it.solutions:
   Orange (#f87a00) und Limette (#bee729) aus dem Logo,
   Grautoene als ruhige Basis.

   Hinweis zum Kontrast: Weiss auf Orange erreicht nur rund 2,9:1
   und waere damit schlecht lesbar. Flaechen in Orange bekommen
   deshalb dunklen Text, Orange als Textfarbe wird abgedunkelt.
   ============================================================ */
:root {
    --orange: #f87a00;
    --orange-dunkel: #c25e00;   /* fuer Text auf hellem Grund */
    --orange-hell: #fff1e2;
    --limette: #bee729;
    --limette-dunkel: #5f7a00;
    --limette-hell: #f4fbdd;

    --grund: #ffffff;
    --grund-akzent: #f7f7f8;
    --text: #2b2b2c;
    --text-leise: #6c6d6d;
    --linie: #e3e3e5;

    --breite: 1120px;
    --radius: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --orange-dunkel: #ffa04d;
        --orange-hell: #3a2410;
        --limette-dunkel: #bee729;
        --limette-hell: #26300d;

        --grund: #1c1c1e;
        --grund-akzent: #242427;
        --text: #f2f2f3;
        --text-leise: #a8a8ab;
        --linie: #37373b;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.14rem; }
p { margin: 0 0 16px; }
a { color: var(--orange-dunkel); }

/* ---------- Kopf ---------- */
header {
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--grund) 93%, transparent);
    backdrop-filter: blur(8px);
}
.kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 24px;
    max-width: var(--breite); margin: 0 auto;
}
.kopf img { height: 34px; width: auto; display: block; }
.kopf nav { display: flex; gap: 22px; align-items: center; }
.kopf nav a { color: var(--text-leise); text-decoration: none; font-size: .95rem; }
.kopf nav a:hover { color: var(--text); }
@media (max-width: 980px) { .kopf nav { display: none; } }

/* ---------- Knoepfe ---------- */
.knopf {
    display: inline-block; padding: 13px 24px; border-radius: 10px;
    text-decoration: none; font-weight: 700; border: 2px solid transparent;
    white-space: nowrap;
}
.knopf-haupt { background: var(--orange); color: #2b2b2c; }
.knopf-haupt:hover { background: #ff8c1a; }
.knopf-rand { border-color: var(--linie); color: var(--text); }
.knopf-rand:hover { border-color: var(--orange); color: var(--orange-dunkel); }

/* ---------- Abschnitte ----------

   Der Wechsel zwischen weissem und getoentem Grund laeuft NICHT ueber eine Klasse im
   HTML, sondern ueber die Position. Vorher stand an jedem zweiten Abschnitt ein
   class="betont" - wer einen Abschnitt einschob, musste alle folgenden von Hand
   umdrehen, sonst standen zwei gleiche nebeneinander.

   Jetzt genuegt es, einen <section> an die gewuenschte Stelle zu setzen; die Faerbung
   ordnet sich selbst neu. Auch die fehlende Linie unter dem letzten Abschnitt kommt von
   hier statt aus einem style-Attribut.                                              */
section { padding: 84px 0; border-bottom: 1px solid var(--linie); }
main > section:nth-of-type(even) { background: var(--grund-akzent); }
main > section:last-of-type { border-bottom: none; }
.kopfzeile { max-width: 730px; margin-bottom: 44px; }
.kopfzeile p { color: var(--text-leise); font-size: 1.08rem; margin: 0; }

/* Fliesstext in gedeckter Farbe. Stand vorher zehnmal als style="color:var(--text-leise)"
   im HTML - eine Farbaenderung haette man an zehn Stellen nachziehen muessen. */
.leise { color: var(--text-leise); }
/* Der hervorgehobene Einstieg in so einem Absatz, in voller Textfarbe. */
.hervor { color: var(--text); }
.augenbraue {
    text-transform: uppercase; letter-spacing: .1em; font-size: .76rem;
    font-weight: 800; color: var(--orange-dunkel); margin-bottom: 10px;
}

/* ---------- Hero ---------- */
.hero { padding: 86px 0 74px; }
.hero .szene {
    border-left: 4px solid var(--orange);
    padding: 4px 0 4px 18px;
    margin-bottom: 26px;
    color: var(--text-leise);
    font-size: 1.06rem;
    max-width: 560px;
}
.hero p.leitsatz {
    font-size: 1.22rem; color: var(--text-leise);
    max-width: 620px; margin-bottom: 28px;
}
.hero-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-notiz { font-size: .92rem; color: var(--text-leise); }

/* ---------- Raster ---------- */
.raster { display: grid; gap: 22px; }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) { .raster-3, .raster-2 { grid-template-columns: 1fr; } }

.karte {
    background: var(--grund); border: 1px solid var(--linie);
    border-radius: var(--radius); padding: 26px;
}
.karte p { color: var(--text-leise); margin: 0; }
.karte p + p { margin-top: 10px; }
.marke-punkt {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--orange-hell); color: var(--orange-dunkel);
    display: grid; place-items: center; font-weight: 800; margin-bottom: 14px;
}

/* ---------- Arbeitstag ---------- */
.tag-zeile {
    display: grid; grid-template-columns: 92px 1fr; gap: 22px;
    padding: 24px 0; border-bottom: 1px solid var(--linie);
    align-items: start;
}
.tag-zeile:last-child { border-bottom: none; }
.tag-zeit {
    font-weight: 800; color: var(--orange-dunkel);
    font-variant-numeric: tabular-nums; padding-top: 2px;
}
.tag-zeile strong { display: block; margin-bottom: 4px; }
.tag-zeile span.text { color: var(--text-leise); }
.tag-gewinn {
    display: inline-block; margin-top: 8px;
    background: var(--limette-hell); color: var(--limette-dunkel);
    border-radius: 999px; padding: 3px 12px;
    font-size: .84rem; font-weight: 700;
}
@media (max-width: 640px) {
    .tag-zeile { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Oberflaechen-Nachbauten ---------- */
.zwei-spalten {
    display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center;
}
@media (max-width: 920px) { .zwei-spalten { grid-template-columns: 1fr; gap: 34px; } }

.schirm {
    border: 1px solid var(--linie); border-radius: var(--radius);
    overflow: hidden; background: var(--grund);
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.schirm-leiste {
    background: var(--grund-akzent); border-bottom: 1px solid var(--linie);
    padding: 9px 14px; display: flex; align-items: center; gap: 7px;
}
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--linie); }
.schirm-titel { font-size: .82rem; color: var(--text-leise); margin-left: 8px; }
.schirm-inhalt { padding: 18px; }

.feld {
    border: 1px solid var(--linie); border-radius: 9px;
    padding: 10px 13px; margin-bottom: 11px; font-size: .9rem;
}
.feld-titel {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-leise); font-weight: 700; margin-bottom: 3px;
}
.feld-inhalt { color: var(--text); }
.feld-ki {
    border-color: var(--orange); background: var(--orange-hell);
}
.ki-marke {
    display: inline-block; background: var(--orange); color: #2b2b2c;
    font-size: .7rem; font-weight: 800; border-radius: 5px;
    padding: 1px 7px; margin-left: 7px; vertical-align: middle;
}

.datei-zeile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie);
    font-size: .9rem;
}
.datei-zeile:last-child { border-bottom: none; }
.datei-name { display: flex; align-items: center; gap: 9px; }
.datei-symbol {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    background: var(--limette-hell); color: var(--limette-dunkel);
    display: grid; place-items: center; font-size: .68rem; font-weight: 800;
}
.datei-stand { color: var(--limette-dunkel); font-size: .8rem; font-weight: 700; white-space: nowrap; }

.blase { padding: 11px 15px; border-radius: 13px; font-size: .93rem; max-width: 86%; }
.chat-koerper { display: flex; flex-direction: column; gap: 11px; }
.blase-frage {
    background: var(--grund-akzent); align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.blase-antwort {
    background: var(--orange-hell); align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.blase-quelle {
    font-size: .78rem; color: var(--limette-dunkel); align-self: flex-start;
    padding-left: 6px; font-weight: 700;
}

.bild-notiz {
    font-size: .82rem; color: var(--text-leise);
    margin-top: 10px; text-align: center;
}

/* ---------- Vertrauen ---------- */
.sicher-punkt { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.sicher-punkt:last-child { border-bottom: none; }
.haken {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--limette); color: #2b2b2c;
    display: grid; place-items: center; font-size: .9rem; font-weight: 800; margin-top: 3px;
}
.sicher-punkt strong { display: block; margin-bottom: 3px; }
.sicher-punkt span.text { color: var(--text-leise); font-size: .97rem; }

/* ---------- FAQ ---------- */
details {
    border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 18px 22px; margin-bottom: 12px; background: var(--grund);
}
details[open] { border-color: var(--orange); }
summary { cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--orange-dunkel); font-size: 1.35rem; line-height: 1; }
details[open] summary::after { content: "\2013"; }
details p { margin: 14px 0 0; color: var(--text-leise); }

/* ---------- Abschluss ---------- */
.abschluss {
    background: var(--orange); color: #2b2b2c;
    border-radius: var(--radius); padding: 52px 44px; text-align: center;
}
.abschluss h2 { color: #2b2b2c; }
.abschluss p { color: #3d3226; max-width: 570px; margin: 0 auto 26px; }
.abschluss .knopf-haupt { background: #2b2b2c; color: #fff; }
.abschluss .knopf-haupt:hover { background: #444; }
.abschluss .knopf-rand { border-color: #2b2b2c; color: #2b2b2c; }
.abschluss .knopf-rand:hover { background: rgba(0,0,0,.07); }
.abschluss-knoepfe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .abschluss { padding: 38px 22px; } }

/* ---------- Fuss ---------- */
footer { padding: 44px 0 40px; }
.fuss-inhalt {
    display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
    font-size: .93rem; color: var(--text-leise);
}
.fuss-inhalt a { color: var(--text-leise); }
.fuss-links { display: flex; gap: 20px; flex-wrap: wrap; }
.fuss-logo { height: 30px; width: auto; margin-bottom: 12px; display: block; }

/* ---------- Ausnahmen einzelner Abschnitte ----------

   Kleine Abweichungen, die nur an einer Stelle gelten. Sie standen vorher als
   style-Attribut im HTML. Hier stehen sie am Abschnitt, zu dem sie gehoeren - wer
   wissen will, warum ein Abschnitt anders aussieht, sucht nach seiner id.          */
#ablauf .raster            { margin-bottom: 44px; }
#ablauf .schirm            { max-width: 760px; margin: 0 auto; }
#wissensdatenbank .raster  { margin-top: 44px; }
#sicherheit .raster-2      { align-items: start; gap: 52px; }
#fragen .huelle            { max-width: 820px; }