/* appliedlogic.ch, Stylesheet. Von Hand geschrieben, keine Fremdquellen. */

:root {
  --grund: #ffffff;
  --flaeche: #f4f7fc;
  --flaeche2: #eaf0fa;
  --tinte: #0a1628;
  --tinte-weich: #475a73;
  --akzent: #1d4ed8;
  --akzent-hell: #2563eb;
  --akzent-cyan: #0891b2;
  --rand: #dbe4f0;
  --rand-stark: #c3d2e8;
  --breite: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

img, svg { max-width: 100%; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--akzent-hell); outline-offset: 2px;
}

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding-left: 22px; padding-right: 22px; }

/* Kopf */

.kopf { border-bottom: 1px solid var(--rand); background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 40; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-block: 15px; }

.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--tinte); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.marke:hover { text-decoration: none; }
.marke-zeichen { width: 30px; height: 30px; flex: 0 0 30px; display: block; }
.marke b { font-weight: 700; }
.marke i { font-style: normal; color: var(--akzent); }

.menue { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.menue a { color: var(--tinte-weich); font-size: 15.5px; font-weight: 500; }
.menue a:hover { color: var(--tinte); text-decoration: none; }
.menue a[aria-current="page"] { color: var(--tinte); font-weight: 600; }

.kopf-rechts { display: flex; align-items: center; gap: 16px; }
.sprachen { display: flex; gap: 6px; }
.sprachen a { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--tinte-weich); padding: 4px 7px; border: 1px solid var(--rand); }
.sprachen a:hover { text-decoration: none; border-color: var(--akzent); color: var(--akzent); }
.sprachen a[aria-current="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }

/* Knöpfe */

.knopf { display: inline-flex; align-items: center; gap: 9px; background: var(--akzent); color: #fff; font-size: 16px; font-weight: 600; padding: 13px 24px; border: 1px solid var(--akzent); cursor: pointer; }
.knopf:hover { background: #163fb0; border-color: #163fb0; text-decoration: none; color: #fff; }
.knopf--leer { background: transparent; color: var(--tinte); border-color: var(--rand-stark); }
.knopf--leer:hover { background: var(--flaeche); color: var(--tinte); border-color: var(--rand-stark); }
.knopf--klein { padding: 9px 16px; font-size: 14.5px; }

/* Abschnitte */

.band { padding-block: 84px; }
.band--flaeche { background: var(--flaeche); border-block: 1px solid var(--rand); }
.band--tinte { background: var(--tinte); color: #fff; }
.band--tinte h2, .band--tinte h3 { color: #fff; }
.band--tinte p, .band--tinte li { color: #c2d1e4; }
.band--tinte a { color: #93b4ff; }
.band--eng { padding-block: 58px; }

.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); margin: 0 0 16px; }
.band--tinte .kicker { color: #7ea8ff; }

h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.06; letter-spacing: -0.033em; font-weight: 700; margin: 0 0 22px; text-wrap: balance; }
h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 18px; text-wrap: balance; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 0 0 10px; }

.farbig { background: linear-gradient(95deg, var(--akzent-hell) 10%, var(--akzent-cyan) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

p { margin: 0 0 16px; max-width: 66ch; }
.lead { font-size: clamp(18px, 2.1vw, 20.5px); color: var(--tinte-weich); max-width: 58ch; }
.band--tinte .lead { color: #c2d1e4; }

/* Aufmacher */

.aufmacher { padding-block: 76px 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 54px; align-items: center; }
.aufmacher h1 { max-width: 15ch; }
.tasten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.modelle { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.modell { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--tinte-weich); border: 1px solid var(--rand); background: #fff; padding: 5px 11px; }
.modell::before { content: ""; width: 7px; height: 7px; background: var(--akzent); display: block; }

/* Raster */

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--rand); border: 1px solid var(--rand); margin-top: 40px; }
.karte { background: var(--grund); padding: 32px 28px; }
.karte p { margin-bottom: 0; max-width: none; color: var(--tinte-weich); }
.karte-zeichen { width: 34px; height: 34px; display: block; margin-bottom: 16px; }
.band--flaeche .karte { background: var(--grund); }

/* Leistungsraster, breit */

.leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--rand); border: 1px solid var(--rand); margin-top: 36px; }
.leistung { background: #fff; padding: 28px 26px; }
.leistung h3 { font-size: 17.5px; margin-bottom: 8px; }
.leistung p { font-size: 15.5px; color: var(--tinte-weich); margin: 0; max-width: none; }

/* Denkstrecke */

.denken { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); margin-top: 38px; }
.denkschritt { background: #0f2036; padding: 26px 24px; }
.denkschritt span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7ea8ff; margin-bottom: 9px; }
.denkschritt p { margin: 0; color: #e6edf7; font-size: 16.5px; max-width: none; }

/* Listen */

.liste { margin: 0 0 16px; padding: 0 0 0 22px; max-width: 66ch; }
.liste li { margin-bottom: 9px; }
.liste--blank { list-style: none; padding-left: 0; max-width: 780px; }
.liste--blank li { padding-block: 14px; border-bottom: 1px solid var(--rand); }
.liste--blank li:first-child { border-top: 1px solid var(--rand); }
.band--tinte .liste--blank li { border-color: rgba(255,255,255,.16); }

/* Schritte */

.schritte { margin-top: 40px; border-top: 1px solid var(--rand); }
.schritt { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 26px; padding-block: 26px; border-bottom: 1px solid var(--rand); }
.schritt h3 { margin: 0; }
.schritt p { margin: 0; color: var(--tinte-weich); }

/* Formular */

.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 30px; max-width: 760px; }
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 14.5px; font-weight: 600; }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 16px; color: var(--tinte); background: #fff;
  border: 1px solid var(--rand-stark); padding: 11px 13px; border-radius: 0; width: 100%;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld-hinweis { font-size: 13.5px; color: var(--tinte-weich); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-meldung { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--rand-stark); background: var(--flaeche); font-size: 15.5px; }
.form-meldung--ok { border-color: #16794f; background: #e8f6ef; color: #0d4b31; }
.form-meldung--fehler { border-color: #a8321f; background: #fdeeea; color: #7c2415; }

/* Angaben */

.angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 32px; }
.angaben dt { font-weight: 700; margin-bottom: 4px; }
.angaben dd { margin: 0 0 16px; color: var(--tinte-weich); }

/* Rechtstexte */

.recht { padding-block: 60px 84px; }
.recht h2 { font-size: 21px; margin-top: 40px; }
.recht h2:first-of-type { margin-top: 24px; }
.recht p, .recht li { color: var(--tinte-weich); }

/* Fuss */

.fuss { background: var(--tinte); color: #c2d1e4; padding-block: 54px 36px; font-size: 15.5px; }
.fuss a { color: #c2d1e4; }
.fuss a:hover { color: #fff; }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px; }
.fuss strong { color: #fff; display: block; margin-bottom: 11px; font-size: 15px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 7px; }
.fuss-schluss { margin-top: 44px; padding-top: 22px; border-top: 1px solid #1d3352; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: 14px; color: #8b9ec0; }

@media (max-width: 920px) {
  .aufmacher { grid-template-columns: 1fr; gap: 40px; padding-block: 52px 46px; }
  .aufmacher h1 { max-width: 18ch; }
}
@media (max-width: 760px) {
  .kopf-innen { flex-wrap: wrap; gap: 13px; }
  .menue { gap: 17px; order: 3; width: 100%; }
  .schritt { grid-template-columns: 1fr; gap: 8px; }
  .band { padding-block: 56px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Szene im Aufmacher, helle Fassung ---------- */

.aufmacher { position: relative; }
.aufmacher > .schein { position: absolute; border-radius: 50%; filter: blur(78px); pointer-events: none; z-index: 0; }
.aufmacher > .schein--1 { width: 400px; height: 400px; background: rgba(37,99,235,.16); left: 60px; top: 10px; }
.aufmacher > .schein--2 { width: 360px; height: 360px; background: rgba(8,145,178,.16); right: 14%; top: 4%; }
.aufmacher > .schein--3 { width: 380px; height: 380px; background: rgba(37,99,235,.11); right: 22%; bottom: 4%; }
.aufmacher > div { position: relative; z-index: 1; }

.ls { position: relative; height: 560px; overflow: hidden; }
.ls-szene { position: absolute; inset: 0; perspective: 2000px; }
.ls-fit { position: absolute; left: 50%; top: 50%; width: 468px; height: 468px; margin: -234px 0 0 -234px; transform-style: preserve-3d; }
.ls-feld { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-38deg); animation: ls-wiegen 16s ease-in-out infinite alternate; }
@keyframes ls-wiegen { from { transform: rotateX(52deg) rotateZ(-41deg); } to { transform: rotateX(50deg) rotateZ(-35deg); } }

.ls-boden { position: absolute; inset: -70px; background-image: radial-gradient(rgba(29,78,216,.22) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 72%); mask-image: radial-gradient(circle, #000 32%, transparent 72%); }

.ls-leitungen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ls-leitungen .w { fill: none; stroke: rgba(29,78,216,.22); stroke-width: 1.5; }
.ls-leitungen .wl { fill: none; stroke: #0891b2; stroke-width: 2.2; stroke-dasharray: 5 9; animation: ls-fluss 2.6s linear infinite; }
@keyframes ls-fluss { to { stroke-dashoffset: -28; } }

.ls-ring { position: absolute; left: 37.3%; top: 37.3%; width: 25.4%; height: 25.4%; border: 1px solid rgba(8,145,178,.6); animation: ls-ring 4s ease-out infinite; }
.ls-ring.r2 { animation-delay: 1.3s; border-color: rgba(37,99,235,.55); }
.ls-ring.r3 { animation-delay: 2.6s; border-color: rgba(8,145,178,.35); }
@keyframes ls-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.2); opacity: 0; } }

.kachel { position: absolute; width: 25.4%; height: 25.4%; transform-style: preserve-3d; transition: transform .35s ease; }
.kachel:hover { transform: translateZ(18px); }
.kachel.p1 { left: 4.6%; top: 4.6%; } .kachel.p2 { left: 37.3%; top: 4.6%; } .kachel.p3 { left: 70%; top: 4.6%; }
.kachel.p4 { left: 70%; top: 37.3%; } .kachel.p5 { left: 70%; top: 70%; } .kachel.p6 { left: 37.3%; top: 70%; }
.kachel.p7 { left: 4.6%; top: 70%; } .kachel.p8 { left: 4.6%; top: 37.3%; } .kachel.kern { left: 37.3%; top: 37.3%; }

.k-sockel { position: absolute; inset: 0; background: #dde6f4; transform: translateZ(0); box-shadow: 0 16px 30px rgba(10,22,40,.16); }
.k-kante { position: absolute; inset: 0; background: #eef3fa; transform: translateZ(7px); border: 1px solid #cfdcef; }
.k-deck { position: absolute; inset: 0; background: #fff; transform: translateZ(14px); border: 1px solid #cfdcef; padding: 9px 11px; }
.k-deck b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8aa0bd; }
.k-deck span { display: block; font-size: 13px; font-weight: 600; color: var(--tinte); line-height: 1.25; margin-top: 3px; }
.k-deck em { display: block; font-style: normal; font-size: 10.5px; color: var(--akzent); margin-top: 5px; }

.kachel.kern .k-sockel { background: #0a1628; }
.kachel.kern .k-kante { background: #122540; border-color: #1d3352; transform: translateZ(9px); }
.kachel.kern .k-deck { background: var(--tinte); border-color: #1d3352; transform: translateZ(18px); }
.kachel.kern .k-deck b { color: #7ea8ff; }
.kachel.kern .k-deck span { color: #fff; font-size: 14px; }
.kachel.kern .k-deck em { color: #5ec8dd; }

.ls-marken { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; z-index: 2; }

@media (max-width: 920px) {
  .ls { height: 430px; }
  .ls-fit { width: 380px; height: 380px; margin: -195px 0 0 -190px; }
  .schein--1, .schein--2, .aufmacher > .schein--3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-feld, .ls-ring, .ls-leitungen .wl { animation: none !important; }
}

.aufmacher--schmal { grid-template-columns: minmax(0, 1fr); padding-block: 64px 44px; }
.aufmacher--schmal h1 { max-width: 20ch; }