/* Silverline Mobility · Seite */
@font-face { font-family: Geist; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --grund: #eceef1; --papier: #f8f9fa; --tinte: #14161a; --grau: #5b616b; --grau-hell: #8a909a; --haar: rgba(20,22,26,.12); --nacht: #0b0d11; --nacht-text: #eef1f6; --nacht-grau: #949bab; --nacht-haar: rgba(238,241,246,.13); --farbe: #d6e4ff; --breite: 1360px; --rand: clamp(16px,5vw,72px); --schrift: "Geist",-apple-system,"Helvetica Neue",Arial,sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
html { background: var(--grund); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0px; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1,h2 { margin: 0px; font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
h2 { font-size: clamp(40px, 6.4vw, 92px); margin-top: 14px; }
p,ul,ol,figure { margin: 0px; }
ul,ol { list-style: none; padding: 0px; }
:focus-visible { outline: rgb(77, 125, 255) solid 2px; outline-offset: 3px; }
.label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grau); }
.leise { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); color: var(--grau); max-width: 44ch; }
.kapitel-kopf { max-width: var(--breite); width: 100%; margin: 0px auto; }
.kopf { position: sticky; top: 0px; z-index: 5; display: flex; align-items: center; gap: clamp(14px, 3vw, 36px); padding: calc(env(safe-area-inset-top,0px) + 14px) var(--rand) 14px; background: rgba(236,238,241,.94); background: color-mix(in srgb,var(--grund) 86%,transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--haar); }
.marke { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-right: auto; white-space: nowrap; }
.marke span { color: var(--grau); font-weight: 400; }
.nav { display: flex; gap: clamp(14px, 2.6vw, 32px); font-size: 14px; color: var(--grau); }
.nav a:hover { color: var(--tinte); }
.kopf-knopf { font-size: 14px; font-weight: 500; padding: 9px 16px; background: var(--tinte); color: var(--grund); }
.knopf { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; background: var(--tinte); color: var(--grund); font-size: 16px; font-weight: 500; white-space: nowrap; }
.knopf::after { content: ""; width: 18px; height: 1px; background: currentcolor; transition: width 0.3s; }
.knopf:hover::after { width: 30px; }
.start-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grau); }
.start-label i { width: 4px; height: 4px; border-radius: 50%; background: var(--grau-hell); }
.start-titel { margin-top: 18px; font-size: clamp(58px, 15vw, 200px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.86; }
.start-titel .duenn { font-weight: 300; color: var(--grau-hell); }
.silberlinie { position: relative; height: 2px; margin: clamp(26px, 3.6vw, 48px) 0px; background: var(--haar); }
.silberlinie i { position: absolute; inset: 0px; background: linear-gradient(90deg, transparent, rgb(143, 180, 255) 30%, rgb(255, 255, 255) 50%, rgb(143, 180, 255) 70%, transparent); box-shadow: rgba(143, 180, 255, 0.6) 0px 0px 18px 2px; transform-origin: left center; animation: 2.2s cubic-bezier(0.6, 0, 0.2, 1) 0s 1 normal both running ziehen; }
@keyframes ziehen { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
fieldset { border: 0px; margin: 0px; padding: 0px; min-width: 0px; }
legend { width: 100%; padding: 0px 0px 10px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nacht-grau); }
.ablauf { max-width: var(--breite); width: 100%; margin: 0px auto; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(12px, 2vw, 24px); counter-reset: s 0; }
.ablauf li { counter-increment: s 1; background: var(--papier); padding: 22px 22px 26px; display: grid; gap: 8px; align-content: start; border: 1px solid var(--haar); }
.ablauf li::before { content: "0" counter(s); font-size: 12px; letter-spacing: 0.15em; color: var(--grau-hell); }
.ablauf b { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.ablauf span { color: var(--grau); font-size: 15px; }
.warum { background: var(--papier); border-top: 1px solid var(--haar); padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 4vw, 56px); }
.warum-reihe { max-width: var(--breite); width: 100%; margin: 0px auto; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(20px, 3vw, 48px); }
.warum-reihe li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--haar); }
.warum-reihe b { font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.warum-reihe span { color: var(--grau); }
.fragen { padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 4vw, 56px); }
.fragen-liste { max-width: var(--breite); width: 100%; margin: 0px auto; border-top: 1px solid var(--haar); }
.fragen-liste details { border-bottom: 1px solid var(--haar); }
.fragen-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0px; font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -0.01em; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 1.5px solid var(--tinte); border-bottom: 1.5px solid var(--tinte); transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.3s; }
.fragen-liste details[open] summary::after { transform: rotate(225deg); }
.fragen-liste details p { padding: 0px 0px 24px; max-width: 62ch; color: var(--grau); }
.nachruestungen { background: var(--papier); padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 5vw, 56px); border-top: 1px solid var(--haar); }
.gutachten > * { max-width: var(--breite); width: 100%; margin-left: auto; margin-right: auto; }
.gutachten > .knopf { width: max-content; max-width: 100%; margin-left: max(0px,calc((100% - var(--breite))/2)); }
.gut-oben { display: grid; grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.partner { background: rgb(255, 255, 255); border: 1px solid var(--haar); padding: clamp(24px, 3vw, 40px); display: grid; gap: 20px; }
.partner figcaption { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grau); }
.partner img { width: 100%; height: auto; }
.gut-karten { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(12px, 2vw, 24px); }
.gut-karten li { border-top: 2px solid var(--tinte); padding-top: 20px; display: grid; gap: 8px; align-content: start; }
.gut-karten small { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grau); }
.gut-karten b { font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.gut-karten span { color: var(--grau); font-size: 16px; }
.anfrage { background: var(--nacht); color: var(--nacht-text); padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 4vw, 56px); }
.anfrage .label { color: var(--nacht-grau); }
.anfrage .leise { color: var(--nacht-grau); }
.form { max-width: var(--breite); width: 100%; margin: 0px auto; display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; gap: 20px clamp(16px, 3vw, 40px); align-items: end; }
.thema { display: flex; flex-wrap: wrap; gap: 8px; }
.thema button { padding: 13px 16px; border: 1px solid rgba(238, 241, 246, 0.22); background: transparent; font-size: 15px; transition: background 0.3s, color 0.3s; }
.thema button[aria-pressed="true"] { background: var(--nacht-text); color: var(--nacht); border-color: var(--nacht-text); }
.feld { display: grid; gap: 10px; min-width: 0px; }
.feld label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nacht-grau); }
.feld input { width: 100%; background: transparent; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-bottom-style: solid; border-bottom-color: rgba(238, 241, 246, 0.35); padding: 12px 0px; font-size: 18px; border-radius: 0px; }
.feld input::placeholder { color: rgb(95, 102, 116); }
.feld input:focus { outline: none; border-color: var(--nacht-text); }
.knopf.gross { background: var(--nacht-text); color: var(--nacht); padding: 18px 28px; }
.kontakt-reihe { max-width: var(--breite); width: 100%; margin: 0px auto; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); border-top: 1px solid var(--nacht-haar); }
.kontakt-reihe p { padding: 22px 20px 0px 0px; display: grid; gap: 6px; font-size: clamp(17px, 1.5vw, 19px); min-width: 0px; overflow-wrap: anywhere; }
.kontakt-reihe small { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nacht-grau); }
.kontakt-reihe a:hover { color: rgb(159, 192, 255); }
.fuss { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 26px var(--rand) calc(26px + env(safe-area-inset-bottom,0px)); background: var(--nacht); color: var(--nacht-grau); border-top: 1px solid var(--nacht-haar); font-size: 14px; }
.fuss span { margin-right: auto; }
.fuss a:hover { color: var(--nacht-text); }
@media (max-width: 980px) {
  .nav { display: none; }
  .form { grid-template-columns: 1fr; }
  .form .knopf { justify-self: start; }
  .gut-oben { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 720px) {
  .ablauf,.kontakt-reihe,.gut-karten,.warum-reihe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
.start { padding: clamp(48px,8vw,120px) var(--rand) clamp(40px,5vw,64px); max-width: calc(var(--breite) + 2 * 72px); margin: 0px auto; padding-bottom: clamp(64px, 8vw, 110px); }
.start-text { font-size: clamp(19px, 2.1vw, 26px); line-height: 1.35; letter-spacing: -0.01em; max-width: 30ch; }
.label b { font-weight: 600; color: var(--tinte); margin-right: 10px; }
.leistungen { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.leistungen a { display: grid; gap: 6px; align-content: start; height: 100%; background: var(--papier); border: 1px solid var(--haar); padding: 12px 12px 24px; transition: transform 0.4s, box-shadow 0.4s; }
.leistungen a:hover { transform: translateY(-4px); box-shadow: rgba(20, 22, 26, 0.45) 0px 24px 40px -28px; }
.leistungen small { margin: 18px 12px 0px; font-size: 12px; letter-spacing: 0.15em; color: var(--grau-hell); }
.leistungen b { margin: 0px 12px; font-size: clamp(20px, 1.75vw, 26px); hyphens: auto; font-weight: 600; letter-spacing: -0.025em; }
.leistungen a > span:last-child { margin: 0px 12px; color: var(--grau); font-size: 15px; }
.l-bild { display: grid; place-items: center; aspect-ratio: 16 / 8; max-width: 100%; background: var(--nacht); position: relative; overflow: hidden; }
.l-licht i { position: absolute; left: 8%; right: 8%; top: 52%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(143, 180, 255) 20%, rgb(255, 255, 255) 50%, rgb(143, 180, 255) 80%, transparent); box-shadow: rgba(143, 180, 255, 0.35) 0px 0px 22px 5px; }
.l-licht::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(60% 50% at 50% 55%, rgba(143, 180, 255, 0.16), transparent 70%); }
.l-technik { grid-auto-flow: column; gap: clamp(14px, 2.4vw, 30px); justify-content: center; }
.l-technik svg,.t-bild svg { width: clamp(30px, 3.4vw, 46px); height: auto; fill: none; stroke: rgb(238, 241, 246); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(rgba(160, 190, 255, 0.55) 0px 0px 6px); }
.l-technik svg circle[r="1.4"],.t-bild svg circle[r="1.4"] { fill: rgb(238, 241, 246); }
.l-gutachten img { width: 72%; height: auto; }
.ambiente { padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(40px, 5vw, 64px); padding-top: clamp(80px, 10vw, 140px); }
.nachruestungen > .knopf,.gutachten > .knopf { width: max-content; max-width: 100%; margin-left: max(0px,calc((100% - var(--breite))/2)); }
.technik { max-width: var(--breite); width: 100%; margin: 0px auto; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.technik > li { display: grid; gap: 8px; align-content: start; background: rgb(255, 255, 255); border: 1px solid var(--haar); padding: 12px 12px 26px; }
.technik > li > b,.technik > li > span:not(.t-bild) { margin: 0px 12px; }
.t-bild { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; background: var(--nacht); margin-bottom: 14px; position: relative; overflow: hidden; }
.t-bild::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(50% 50%, rgba(143, 180, 255, 0.14), transparent 70%); }
.t-bild svg { width: clamp(54px, 6vw, 80px); position: relative; }
.technik > li > b { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.technik > li > span:not(.t-bild) { color: var(--grau); font-size: 15px; }
.technik-idee { background: var(--grund) !important; padding: 0px !important; }
.technik-idee a { display: grid; gap: 10px; align-content: center; height: 100%; padding: clamp(24px, 3vw, 40px); }
.technik-idee b { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.025em; }
.technik-idee span { color: var(--grau); }
.technik-idee i { width: 28px; height: 1px; background: var(--tinte); margin-top: 10px; transition: width 0.3s; }
.technik-idee a:hover i { width: 48px; }
.gutachten { padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 4vw, 56px); border-top: 1px solid var(--haar); }
.gut-oben .kapitel-kopf { margin: 0px; }
@media (max-width: 980px) {
  .leistungen,.technik { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 720px) {
  .leistungen,.technik { grid-template-columns: minmax(0px, 1fr); }
  .l-bild { aspect-ratio: 16 / 6; }
  .t-bild { aspect-ratio: 16 / 7; }
}
@media (max-width: 720px) {
  .technik > li { grid-template-columns: 72px minmax(0px, 1fr); gap: 4px 16px; padding: 12px; align-items: start; }
  .technik > li > b,.technik > li > span:not(.t-bild) { margin: 0px; }
  .t-bild { grid-row: 1 / 3; aspect-ratio: 1 / 1; width: 72px; margin: 0px; }
  .t-bild svg { width: 38px; }
  .technik > li.technik-idee { grid-template-columns: minmax(0px, 1fr); padding: 0px; }
  .ablauf li { padding: 16px 18px 18px; }
}
.infoleiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: calc(env(safe-area-inset-top,0px) + 8px) var(--rand) 8px; background: var(--nacht); color: var(--nacht-grau); font-size: 13px; letter-spacing: 0.02em; }
.infoleiste a { color: var(--nacht-text); }
.infoleiste + .kopf { padding-top: 14px; }
.amb-raster { max-width: var(--breite); width: 100%; margin: 0px auto; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.amb-text { display: grid; gap: 0px; align-content: start; }
.amb-text .knopf { justify-self: start; margin-top: clamp(28px, 3vw, 40px); }
.amb-punkte { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--haar); }
.amb-punkte li { display: grid; grid-template-columns: 150px minmax(0px, 1fr); gap: 16px; padding: 16px 0px; border-bottom: 1px solid var(--haar); }
.amb-punkte b { font-weight: 600; }
.amb-punkte span { color: var(--grau); }
.handy-rahmen { border-radius: clamp(30px, 3.6vw, 48px); padding: clamp(7px, 0.8vw, 10px); background: linear-gradient(145deg, rgb(59, 63, 71), rgb(20, 22, 27) 40%, rgb(42, 45, 51)); box-shadow: rgba(11, 13, 17, 0.7) 0px 50px 90px -40px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; }
.handy-rahmen img { display: block; width: 100%; height: auto; border-radius: clamp(24px, 3vw, 40px); }
.t-liste { margin: 6px 12px 0px; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--haar); }
.t-liste li { font-size: 14px; color: var(--tinte); display: flex; gap: 10px; align-items: baseline; }
.t-liste li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: rgb(111, 143, 216); transform: translateY(-2px); }
.gut-zahl { margin-top: clamp(24px, 3vw, 36px); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.gut-zahl b { font-size: clamp(56px, 7vw, 96px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.gut-zahl span { font-size: clamp(17px, 1.6vw, 20px); color: var(--tinte); max-width: 22ch; }
.l-gutachten { background: rgb(255, 255, 255); border-bottom: 1px solid var(--haar); grid-template-rows: 1fr auto; padding: 16px 0px 14px; }
.l-gutachten em { font-style: normal; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(11, 85, 166); font-weight: 600; }
.standort { background: var(--papier); border-top: 1px solid var(--haar); padding: clamp(80px,10vw,140px) var(--rand); }
.standort-innen { max-width: var(--breite); margin: 0px auto; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: clamp(36px, 5vw, 80px); align-items: end; }
.standort address { font-style: normal; margin: clamp(24px, 3vw, 36px) 0px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; letter-spacing: -0.02em; }
.standort-daten { margin: 0px; border-top: 1px solid var(--haar); }
.standort-daten div { display: grid; grid-template-columns: 140px minmax(0px, 1fr); gap: 16px; padding: 16px 0px; border-bottom: 1px solid var(--haar); }
.standort-daten dt { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grau); padding-top: 4px; }
.standort-daten dd { margin: 0px; font-size: clamp(17px, 1.5vw, 19px); overflow-wrap: anywhere; min-width: 0px; }
.standort-daten a:hover { color: rgb(47, 95, 217); }
@media (max-width: 980px) {
  .amb-raster,.standort-innen { grid-template-columns: minmax(0px, 1fr); }
  .app-bilder { max-width: 560px; }
}
@media (max-width: 720px) {
  .infoleiste { font-size: 12px; justify-content: center; text-align: center; }
  .infoleiste span { display: none; }
  .amb-punkte li,.standort-daten div { grid-template-columns: minmax(0px, 1fr); gap: 2px; }
  .t-liste { margin: 8px 0px 0px; grid-column: 2; }
}
.partner-text { margin-top: 14px; color: var(--grau); font-size: 15px; }
.gut-vorteile { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1px; background: var(--haar); border: 1px solid var(--haar); }
.gut-vorteile li { background: var(--papier); padding: 22px 22px 24px; display: grid; gap: 6px; align-content: start; }
.gut-vorteile b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.gut-vorteile span { color: var(--grau); font-size: 15px; }
.gut-karten.sechs { row-gap: clamp(28px, 3vw, 40px); }
.unfall-tipps { background: var(--nacht); color: rgb(241, 243, 246); padding: clamp(28px, 4vw, 48px); display: grid; gap: 22px; }
.unfall-tipps .label { color: rgb(154, 161, 171); }
.unfall-tipps ol { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: clamp(18px, 3vw, 40px); counter-reset: u 0; }
.unfall-tipps li { display: grid; gap: 8px; align-content: start; counter-increment: u 1; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 16px; }
.unfall-tipps li b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.unfall-tipps li span { color: rgb(180, 186, 195); font-size: 15px; }
@media (max-width: 900px) {
  .gut-vorteile { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .unfall-tipps ol { grid-template-columns: minmax(0px, 1fr); }
}
@media (max-width: 560px) {
  .gut-vorteile { grid-template-columns: minmax(0px, 1fr); }
}
.app-erste { margin: clamp(22px, 3vw, 32px) 0px 0px; padding: 20px 22px; border: 1px solid var(--haar); background: var(--papier); display: grid; gap: 6px; max-width: 46ch; }
.app-erste-kopf { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--tinte); }
.app-erste p:last-child { color: var(--grau); font-size: 16px; }
.flagge { display: inline-grid; grid-template-rows: repeat(3, 4px); width: 22px; border-radius: 2px; overflow: hidden; }
.flagge i:nth-child(1) { background: rgb(17, 17, 17); }
.flagge i:nth-child(2) { background: rgb(221, 0, 0); }
.flagge i:nth-child(3) { background: rgb(255, 204, 0); }
.app-bilder { margin: 0px; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: start; padding-bottom: 0px; }
.app-bilder .app-geraet { display: grid; gap: 14px; justify-items: center; }
.app-bilder .app-geraet.versetzt { margin-top: 14%; }
.app-bilder .app-geraet > p { font-size: 13px; color: var(--grau); text-align: center; }
.app-bilder .handy-rahmen { position: relative; width: 100%; grid-area: auto; margin: 0px; opacity: 1; aspect-ratio: 900 / 1957; padding: clamp(6px, 0.7vw, 9px); border-radius: clamp(32px, 3.8vw, 52px); background: linear-gradient(150deg, rgb(90, 95, 104) 0%, rgb(27, 29, 34) 18%, rgb(13, 14, 17) 60%, rgb(58, 62, 70) 100%); box-shadow: rgba(11, 13, 17, 0.75) 0px 60px 80px -50px, rgba(11, 13, 17, 0.5) 0px 20px 40px -30px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1.5px inset; }
.app-bilder .handy-rahmen img { width: 100%; height: 100%; object-fit: cover; border-radius: clamp(26px, 3.2vw, 44px); }
.app-bilder .handy-rahmen::after { content: ""; position: absolute; left: 50%; top: calc(1.6% + clamp(6px, 0.7vw, 9px)); transform: translateX(-50%); width: 29%; height: 3.3%; border-radius: 999px; background: rgb(0, 0, 0); }
.app-bilder figcaption { grid-area: auto / 1 / auto / -1; margin-top: 8px; font-size: 14px; color: var(--grau); }

/* Startanimation: Schriftzug steigt auf, Silberlinie zieht durch, Inhalte folgen.
   --v verschiebt alles nach hinten, wenn vorher ein Intro läuft. */
.start-titel .zeile { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.start-titel .zeile > span { display: block; transform: translateY(105%); animation: steigen 1.25s cubic-bezier(.19,1,.22,1) var(--v) forwards; }
.start-titel .duenn > span { animation-delay: calc(var(--v) + .22s); }
.start-label, .start-text, .leistungen > li, .kopf, .infoleiste { animation: erscheinen .9s cubic-bezier(.2,.7,.2,1) var(--v) both; }
.infoleiste, .kopf { animation-delay: calc(var(--v) + .1s); }
.start-label { animation-delay: calc(var(--v) + .35s); }
.silberlinie i { animation: ziehen 1.6s cubic-bezier(.65,0,.15,1) calc(var(--v) + .7s) both; }
.silberlinie::after { content: ""; position: absolute; top: -6px; bottom: -6px; width: 22%; left: 0; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(143,180,255,.35) 55%, transparent); opacity: 0; animation: glanz 1.6s cubic-bezier(.65,0,.15,1) calc(var(--v) + .7s) both; pointer-events: none; }
.start-text { animation-delay: calc(var(--v) + 1.05s); }
.leistungen > li:nth-child(1) { animation-delay: calc(var(--v) + 1.2s); }
.leistungen > li:nth-child(2) { animation-delay: calc(var(--v) + 1.32s); }
.leistungen > li:nth-child(3) { animation-delay: calc(var(--v) + 1.44s); }
.leistungen > li:nth-child(4) { animation-delay: calc(var(--v) + 1.56s); }
@keyframes steigen { to { transform: none; } }
@keyframes erscheinen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes glanz { 0% { opacity: 0; transform: translateX(-50%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(355%); } }
@media (prefers-reduced-motion: reduce) {
  .start-titel .zeile > span { transform: none; }
}

/* Intro „Vorhang“: Lichtlinie zieht durch, dann öffnet sich das Schwarz. Nur beim ersten Aufruf pro Sitzung. */
:root { --v: 1.6s; }
html.ohne-intro { --v: 0s; }
.ohne-intro .intro { display: none; }
.intro { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; pointer-events: none; }
.intro::before, .intro::after { content: ""; position: absolute; left: 0; right: 0; height: 50.5%; background: var(--nacht); }
.intro::before { top: 0; animation: auf-oben 1.2s cubic-bezier(.77,0,.18,1) 1.5s forwards; }
.intro::after { bottom: 0; animation: auf-unten 1.2s cubic-bezier(.77,0,.18,1) 1.5s forwards; }
.intro-strahl { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 1; background: linear-gradient(90deg, transparent, #8fb4ff 22%, #fff 50%, #8fb4ff 78%, transparent); box-shadow: 0 0 28px 5px rgba(143,180,255,.5); transform: scaleX(0); animation: intro-strahl 1.2s cubic-bezier(.65,0,.35,1) .2s forwards, intro-aus .6s ease 1.55s forwards; }
.intro-name { position: absolute; left: 0; right: 0; top: 50%; margin-top: -46px; text-align: center; z-index: 1; color: var(--nacht-text); font-size: 13px; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; font-weight: 600; opacity: 0; transform: translateY(8px); animation: intro-name .9s cubic-bezier(.2,.7,.2,1) .5s forwards, intro-aus .45s ease 1.4s forwards; }
.intro-name span { font-weight: 300; color: var(--nacht-grau); }
@keyframes intro-strahl { to { transform: scaleX(1); } }
@keyframes intro-aus { to { opacity: 0; } }
@keyframes intro-name { to { opacity: 1; transform: none; } }
@keyframes auf-oben { to { transform: translateY(-100%); } }
@keyframes auf-unten { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  :root { --v: 0s; }
}

/* Yachtelektrik */
.l-yacht svg { width: clamp(34px, 3.6vw, 48px); height: auto; fill: none; stroke: #eef1f6; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(160,190,255,.55)); position: relative; z-index: 1; }
.l-yacht i { position: absolute; left: 22%; right: 22%; top: 76%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #8fb4ff 25%, #fff 50%, #8fb4ff 75%, transparent); box-shadow: 0 0 16px 3px rgba(143,180,255,.45); }
.yacht { background: var(--nacht); color: var(--nacht-text); padding: clamp(80px, 10vw, 140px) var(--rand); display: grid; gap: clamp(36px, 4vw, 56px); }
.yacht > * { max-width: var(--breite); width: 100%; margin-left: auto; margin-right: auto; }
.yacht .label, .yacht .leise { color: var(--nacht-grau); }
.yacht .label b { color: var(--nacht-text); }
.yacht-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.yacht-raster .kapitel-kopf { margin: 0; }
.yacht-bild { margin: 0; }
.yacht-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.y-linie path { fill: none; stroke: #c9d0dc; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.y-leiste { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.y-leiste-glow { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .7; }
.y-wasser { fill: none; stroke: rgba(143,180,255,.25); stroke-width: 1.2; stroke-linecap: round; }
.yacht-punkte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.yacht-punkte li { border-top: 1px solid var(--nacht-haar); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.yacht-punkte b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.yacht-punkte span { color: var(--nacht-grau); font-size: 15px; }
.yacht > .knopf { width: max-content; max-width: 100%; margin-left: max(0px, calc((100% - var(--breite)) / 2)); }
@media (max-width: 980px) {
  .yacht-raster { grid-template-columns: minmax(0, 1fr); }
  .yacht-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .yacht-punkte { grid-template-columns: minmax(0, 1fr); }
}

/* Rechtstexte (Impressum, Datenschutz) */
.recht .kopf { justify-content: space-between; }
.recht-seite { max-width: 820px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--rand) clamp(64px, 9vw, 120px); }
.recht-seite h1 { margin-top: 14px; font-size: clamp(40px, 7vw, 72px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.recht-zurueck { display: inline-block; margin-top: 18px; font-size: 15px; color: var(--grau); border-bottom: 1px solid var(--haar); }
.recht-zurueck:hover { color: var(--tinte); }
.recht-inhalt { margin-top: clamp(32px, 5vw, 56px); display: grid; gap: 1px; background: var(--haar); border: 1px solid var(--haar); }
.recht-block { background: var(--papier); padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; }
.recht-block h2 { font-size: clamp(19px, 2vw, 22px); font-weight: 600; letter-spacing: -0.015em; }
.recht-block p, .recht-block li { color: var(--grau); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.recht-block a { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--haar); }
.recht-block strong { color: var(--tinte); font-weight: 600; }

/* Unterseite Yachtelektrik */
.yacht h1 { margin-top: 14px; font-size: clamp(44px, 7vw, 100px); }
.y-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.yacht > .y-knoepfe, .y-schluss > .y-knoepfe { margin-top: 0; max-width: var(--breite); width: 100%; margin-left: auto; margin-right: auto; }
.y-link { font-size: 16px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.yacht .y-link { color: var(--nacht-text); }
.y-leistungen { background: var(--papier); padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 5vw, 56px); }
.y-leistungen > *, .y-ablauf > * { max-width: var(--breite); width: 100%; margin-left: auto; margin-right: auto; }
.y-ablauf { padding: clamp(80px,10vw,140px) var(--rand); display: grid; gap: clamp(36px, 5vw, 56px); border-top: 1px solid var(--haar); }
.y-schluss .kontakt-reihe { margin-top: 8px; }