/* Landingpage eventOS: Hausfarben von austConsult (Navy, Gold), Schrift B612 (lokal). */
@font-face { font-family: 'B612'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/b612-latin-400-normal.7cf8a85936e8.woff") format('woff'); }
@font-face { font-family: 'B612'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/b612-latin-700-normal.e7c384ccd979.woff") format('woff'); }
:root {
  --nacht: #070F1C; --navy: #1B365D; --f900: #0D1A2D; --f800: #182A44; --f700: #263C5B;
  --gold: #C5A059; --gold-hell: #E3CB97; --gold-tinte: #85601C;
  --papier: #F1F4F8; --papier2: #E7EDF1; --tinte: #0F2A4A; --gedaempft: #51657D; --linie: #C9D4DE;
  --ok: #059669;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'B612', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--tinte); background: var(--papier); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0 0 1rem; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.huelle { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wortmarke { font-weight: 700; letter-spacing: -.02em; line-height: 1; text-decoration: none; color: #F1F4F8; }
.wortmarke b { color: var(--gold); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: 0 1.5rem; border-radius: .8rem; font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, transform .15s; }
.knopf-gold { background: var(--gold); color: var(--nacht); }
.knopf-gold:hover { background: var(--gold-hell); transform: translateY(-1px); }
.knopf-rand { color: #F1F4F8; border-color: rgba(241, 244, 248, .35); }
.knopf-rand:hover { background: rgba(241, 244, 248, .08); }
.knopf-navy { background: var(--navy); color: #fff; } .knopf-navy:hover { background: #234677; }
.knopf-hell { background: #fff; color: var(--tinte); border-color: var(--linie); } .knopf-hell:hover { border-color: var(--gold); }

/* Kopf */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; gap: 1rem; }
.kopf .wortmarke { font-size: 1.5rem; }
.kopf .wortmarke small { display: block; font-size: .62rem; font-weight: 400; color: #9FB2C8; letter-spacing: .02em; margin-top: .25rem; }
.kopf nav { display: flex; align-items: center; gap: 1.5rem; }
.kopf nav a:not(.knopf) { color: #CBD5E1; text-decoration: none; font-size: .92rem; font-weight: 700; }
.kopf nav a:not(.knopf):hover { color: var(--gold-hell); }
.kopf .knopf { min-height: 2.6rem; padding: 0 1.1rem; font-size: .88rem; }
@media (max-width: 47.99rem) { .kopf nav a:not(.knopf) { display: none; } }

/* Hero */
.hero { position: relative; overflow: hidden; color: #F1F4F8; background: radial-gradient(60rem 30rem at 85% 0%, rgba(197, 160, 89, .16), transparent 60%), linear-gradient(160deg, var(--nacht) 0%, #0C203C 55%, var(--navy) 100%); padding: 8.5rem 0 5rem; }
.hero > .huelle { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .hero > .huelle { grid-template-columns: 1.15fr .85fr; } }
.plakette { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 99px; border: 1px solid rgba(197, 160, 89, .45); color: var(--gold-hell); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); letter-spacing: -.03em; }
.hero h1 span { display: block; color: var(--gold); }
.hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #CBD5E1; max-width: 36rem; margin: 1.4rem 0 2rem; }
.hero .aktionen { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .belege { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; color: #9FB2C8; font-size: .88rem; }
.hero .belege li { display: flex; align-items: center; gap: .45rem; } .hero .belege .ic { color: var(--gold); width: 1rem; height: 1rem; }

/* Handy-Attrappe (reine Zeichnung, keine Fotos) */
.buehne { display: grid; place-items: center; position: relative; }
.buehne::before { content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 50%; border: 1px solid rgba(197, 160, 89, .3); box-shadow: 0 0 0 2.2rem rgba(197, 160, 89, .05), 0 0 0 4.4rem rgba(197, 160, 89, .03); }
.telefon { position: relative; width: 15.5rem; border-radius: 2.2rem; padding: .65rem; background: #0A1424; border: 2px solid #2A3F5E; box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, .45); }
.telefon::before { content: ""; position: absolute; top: .9rem; left: 50%; width: 4.2rem; height: .9rem; transform: translateX(-50%); background: #0A1424; border-radius: 99px; z-index: 2; }
.schirm { border-radius: 1.65rem; overflow: hidden; background: #FDFBF9; color: #2c2c2c; min-height: 27rem; padding: 2rem .8rem .8rem; font-size: .7rem; }
.schirm h3 { font-size: .95rem; color: #85141b; letter-spacing: -.01em; }
.schirm .datum { color: #b83b5e; font-size: .62rem; margin-bottom: .6rem; }
.schirm .aufgabe { border: 1px solid #b83b5e; border-radius: .6rem; padding: .5rem .6rem; margin-bottom: .5rem; }
.schirm .aufgabe b { display: block; color: #85141b; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .15rem; }
.schirm .aufgabe .btn { display: inline-block; margin-top: .35rem; background: #85141b; color: #fff; border-radius: .4rem; padding: .25rem .55rem; font-size: .6rem; font-weight: 700; }
.schirm .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin-top: .5rem; }
.schirm .raster i { display: block; aspect-ratio: 1; border-radius: .3rem; }
.schirm .raster i:nth-child(6n+1) { background: linear-gradient(135deg, #f6c4a8, #d4687a); }
.schirm .raster i:nth-child(6n+2) { background: linear-gradient(135deg, #c8d6a0, #6b9a6e); }
.schirm .raster i:nth-child(6n+3) { background: linear-gradient(135deg, #f3e0b0, #c9a05a); }
.schirm .raster i:nth-child(6n+4) { background: linear-gradient(135deg, #b9c8e8, #6b7fb8); }
.schirm .raster i:nth-child(6n+5) { background: linear-gradient(135deg, #e8b9d6, #a85a8c); }
.schirm .raster i:nth-child(6n) { background: linear-gradient(135deg, #f0d0a0, #e0804a); }

/* Abschnitte */
.abschnitt { padding: 5rem 0; }
.abschnitt.hell { background: #fff; }
.abschnitt.dunkel { background: linear-gradient(170deg, var(--nacht), var(--f900)); color: #F1F4F8; }
.kopfzeile { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.kopfzeile .ueber { display: inline-block; color: var(--gold-tinte); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .7rem; }
.dunkel .kopfzeile .ueber { color: var(--gold); }
.kopfzeile h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.02em; }
.kopfzeile p { color: var(--gedaempft); font-size: 1.08rem; margin-top: 1rem; }
.dunkel .kopfzeile p { color: #9FB2C8; }

.schritte { display: grid; gap: 1.25rem; counter-reset: schritt; }
@media (min-width: 48rem) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.schritt { background: #fff; border: 1px solid var(--linie); border-radius: 1.1rem; padding: 1.75rem; position: relative; }
.schritt::before { counter-increment: schritt; content: "0" counter(schritt); position: absolute; top: 1rem; right: 1.25rem; font-size: 2.6rem; font-weight: 700; color: rgba(197, 160, 89, .28); line-height: 1; }
.schritt .ic { width: 2rem; height: 2rem; color: var(--navy); margin-bottom: 1rem; }
.schritt h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.schritt p { color: var(--gedaempft); margin: 0; font-size: .96rem; }

.funktionen { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .funktionen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .funktionen { grid-template-columns: repeat(3, 1fr); } }
.funktion { background: var(--papier); border: 1px solid var(--linie); border-radius: 1.1rem; padding: 1.5rem; transition: border-color .15s, transform .15s; }
.funktion:hover { border-color: var(--gold); transform: translateY(-2px); }
.funktion .kreis { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .8rem; background: var(--navy); color: var(--gold); margin-bottom: 1rem; }
.funktion h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.funktion p { margin: 0; color: var(--gedaempft); font-size: .93rem; }

/* Vorstellung mit Bild und Text im Wechsel */
.zeigen { display: grid; gap: 2.5rem; align-items: center; padding: 2.5rem 0; }
@media (min-width: 56rem) { .zeigen { grid-template-columns: 1fr 1fr; gap: 4rem; } .zeigen.dreh .bild { order: 2; } }
.zeigen h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; margin-bottom: .9rem; }
.zeigen p { color: var(--gedaempft); }
.dunkel .zeigen p { color: #9FB2C8; }
.zeigen ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.zeigen li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; }
.zeigen li .ic { color: var(--gold-tinte); margin-top: .2rem; width: 1.1rem; height: 1.1rem; }
.dunkel .zeigen li .ic { color: var(--gold); }
.bild { display: grid; place-items: center; }
.leinwand { width: 100%; max-width: 30rem; aspect-ratio: 16 / 9; border-radius: .9rem; background: #000; border: 6px solid #1c2c44; box-shadow: 0 2rem 3rem rgba(0, 0, 0, .35); position: relative; overflow: hidden; }
.leinwand .foto { position: absolute; inset: 8% 22%; border-radius: .4rem; background: linear-gradient(135deg, #f6c4a8, #d4687a 60%, #85141b); box-shadow: 0 0 3rem rgba(244, 114, 182, .25); }
.leinwand .foto.zwei { inset: 14% 30%; background: linear-gradient(135deg, #b9c8e8, #6b7fb8); opacity: .0; animation: ueberblenden 6s infinite; }
@keyframes ueberblenden { 0%, 40% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
.leinwand .neu { position: absolute; left: .7rem; bottom: .6rem; font-size: .68rem; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 99px; padding: .15rem .6rem; display: flex; align-items: center; gap: .35rem; }
.leinwand .neu i { width: .5rem; height: .5rem; border-radius: 50%; background: #34D399; }
@media (prefers-reduced-motion: reduce) { .leinwand .foto.zwei { animation: none; } }
.dash { width: 100%; max-width: 30rem; background: var(--nacht); border-radius: 1rem; border: 1px solid var(--f700); padding: 1rem; box-shadow: 0 2rem 3rem rgba(15, 42, 74, .25); color: #F1F4F8; font-size: .75rem; }
.dash .kopfz { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--f800); padding-bottom: .7rem; margin-bottom: .7rem; }
.dash .reiter { display: flex; gap: .9rem; color: #94A3B8; margin-bottom: .8rem; } .dash .reiter b { color: #E58BA5; border-bottom: 2px solid #E58BA5; padding-bottom: .2rem; }
.dash .kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
.dash .kachel { background: var(--f900); border: 1px solid var(--f800); border-radius: .6rem; padding: .55rem .6rem; } .dash .kachel small { display: block; color: #94A3B8; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; } .dash .kachel strong { font-size: 1.1rem; }
.dash .zeile { display: flex; justify-content: space-between; align-items: center; background: var(--f900); border: 1px solid var(--f800); border-radius: .6rem; padding: .55rem .7rem; margin-top: .4rem; }
.dash .zeile em { font-style: normal; background: #E58BA5; color: #070F1C; font-weight: 700; border-radius: .4rem; padding: .2rem .55rem; }

.themen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.thema { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 99px; font-size: .82rem; font-weight: 700; border: 1px solid var(--linie); background: #fff; }
.thema i { width: .8rem; height: .8rem; border-radius: 50%; }

.vergleich { max-width: 46rem; margin: 0 auto; overflow-x: auto; }
.vergleich table { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; border-radius: 1rem; overflow: hidden; border: 1px solid var(--linie); }
.vergleich th, .vergleich td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--papier2); }
.vergleich thead th { background: var(--navy); color: #fff; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.vergleich thead th:last-child { background: var(--gold); color: var(--nacht); }
.vergleich td:first-child { font-weight: 700; } .vergleich td:last-child { color: var(--tinte); font-weight: 700; background: rgba(197, 160, 89, .08); }
.vergleich td:nth-child(2) { color: var(--gedaempft); }
.vergleich tr:last-child td { border-bottom: 0; }

.datenschutz-liste { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .datenschutz-liste { grid-template-columns: repeat(2, 1fr); } }
.dsk { display: flex; gap: 1rem; background: var(--f900); border: 1px solid var(--f700); border-radius: 1rem; padding: 1.25rem; }
.dsk .ic { color: var(--gold); width: 1.6rem; height: 1.6rem; margin-top: .15rem; }
.dsk h3 { font-size: 1rem; margin-bottom: .3rem; color: #F1F4F8; } .dsk p { margin: 0; font-size: .9rem; color: #9FB2C8; }

.preise { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 60rem) { .preise { grid-template-columns: repeat(3, 1fr); } }
.paket { background: #fff; border: 1px solid var(--linie); border-radius: 1.3rem; padding: 2rem; display: flex; flex-direction: column; position: relative; }
.paket.empfohlen { border: 2px solid var(--gold); box-shadow: 0 1.5rem 3rem rgba(197, 160, 89, .18); }
.paket .marke { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--nacht); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: .25rem .9rem; white-space: nowrap; }
.paket h3 { font-size: 1.25rem; }
.paket .preis { font-size: 2.6rem; font-weight: 700; margin: .6rem 0 1.2rem; letter-spacing: -.03em; } .paket .preis span { font-size: .9rem; font-weight: 400; color: var(--gedaempft); letter-spacing: 0; }
.paket ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; flex: 1; }
.paket li { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; }
.paket li .ic { color: var(--ok); width: 1.05rem; height: 1.05rem; margin-top: .25rem; }
.paket .hinweis { color: var(--gedaempft); font-size: .8rem; text-align: center; margin: 0 0 .8rem; }
.paket .knopf { width: 100%; }

.faq { max-width: 46rem; margin: 0 auto; display: grid; gap: .7rem; }
.faq details { background: #fff; border: 1px solid var(--linie); border-radius: .9rem; padding: 0 1.25rem; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.4rem; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .2s; color: var(--gold-tinte); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { color: var(--gedaempft); padding-bottom: .4rem; }

.schluss { text-align: center; color: #F1F4F8; background: radial-gradient(50rem 24rem at 50% 120%, rgba(197, 160, 89, .22), transparent 70%), linear-gradient(170deg, var(--nacht), var(--navy)); padding: 5rem 0; }
.schluss h2 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); letter-spacing: -.02em; } .schluss h2 span { color: var(--gold); }
.schluss p { color: #CBD5E1; max-width: 34rem; margin: 1rem auto 2rem; font-size: 1.08rem; }
.fuss { background: var(--nacht); color: #9FB2C8; padding: 2.5rem 0; font-size: .85rem; }
.fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.fuss a { color: #CBD5E1; text-decoration: none; margin-left: 1.25rem; } .fuss a:hover { color: var(--gold-hell); }
.fuss .wortmarke { font-size: 1.2rem; }