/* Anmeldeseite im Stil der Startseite: heller Grund mit schwebenden Farbflächen, Milchglas-Flächen, grüne Knöpfe */
#kontoTor { background: #eef3f0; }
#kontoTor::before { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(60px); opacity: .85;
  background: radial-gradient(26% 32% at 14% 22%, #2f9a83aa, transparent 70%), radial-gradient(24% 30% at 80% 16%, #e7b878aa, transparent 70%),
    radial-gradient(30% 36% at 64% 86%, #6aa7c788, transparent 70%), radial-gradient(22% 28% at 24% 88%, #c4e6da99, transparent 70%);
  animation: ktg-schweben 24s ease-in-out infinite alternate; }
@keyframes ktg-schweben { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, -3%, 0) rotate(6deg) scale(1.05); } 100% { transform: translate3d(-3%, 2%, 0) rotate(-5deg) scale(1.02); } }
#kontoTor .kt { position: relative; z-index: 1; gap: 22px; padding: 22px 22px 0; }

/* Linke Fläche: Milchglas statt Dunkelgrün */
#kontoTor .kt-bild { color: #14323a; background: transparent; border-radius: 30px; border: 1px solid #ffffffb3;
  box-shadow: 0 40px 90px -40px #14323a66, 0 2px 0 #ffffffcc inset, 0 0 0 1px #14323a0f; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
#kontoTor .kt-bild::before { width: auto; height: auto; inset: 0; right: 0; top: 0; border-radius: inherit; animation: none; background: linear-gradient(135deg, #ffffffb3 0%, #ffffff73 45%, #ffffffa1 100%); z-index: 0; }
#kontoTor .kt-bild::after { width: 340px; height: 340px; left: auto; right: -90px; bottom: -110px; background: radial-gradient(circle, #2a907933, transparent 68%); z-index: 0; }
#kontoTor .kt-marke img { box-shadow: 0 10px 26px #14323a40; }
/* Firmenlogo Hahne Digital */
#kontoTor .kt-marke-hd { gap: 16px; }
#kontoTor .kt-marke-hd img.kt-hd { width: auto; height: 44px; border-radius: 0; box-shadow: none; }
#kontoTor .kt-marke-hd > div { padding-left: 16px; border-left: 1.5px solid #14323a26; }
#kontoTor .kt-marke-hd b { font-size: 16px; color: #14323a; }
#kontoTor .kt-marke.kt-marke-hd small { color: #1f6fb8; white-space: nowrap; }
@media (max-width: 420px) { #kontoTor .kt-marke-hd { gap: 12px; } #kontoTor .kt-marke-hd img.kt-hd { height: 32px; } #kontoTor .kt-marke-hd > div { padding-left: 12px; min-width: 0; } #kontoTor .kt-marke-hd b { font-size: 14px; } #kontoTor .kt-marke.kt-marke-hd small { white-space: normal; letter-spacing: .1em; } }
#kontoTor .kt-marke b { color: #14323a; }
#kontoTor .kt-marke small { color: #a96f2c; }
.kt-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #1d6d5e; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; }
.kt-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #c99a5b; box-shadow: 0 0 0 4px #c99a5b33; animation: ktg-puls 2.4s ease-in-out infinite; }
@keyframes ktg-puls { 50% { box-shadow: 0 0 0 7px #c99a5b14; } }
#kontoTor .kt-claim h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #14323a; }
#kontoTor .kt-wort { display: inline-block; background: linear-gradient(100deg, #17705f, #2a9079 40%, #b07a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .3s, transform .3s, filter .3s; }
#kontoTor .kt-wort-raus { opacity: 0; transform: translateY(10px); filter: blur(4px); }
#kontoTor .kt-claim p { color: #3d5258; }
#kontoTor .kt-vorteile li { background: #ffffffa6; border-color: #ffffff; box-shadow: 0 10px 24px -20px #14323a80; color: #14323a; }
#kontoTor .kt-vorteile span { color: #5a6d72; }

/* Standardpreise */
.kt-preise { max-width: 420px; padding: 16px 16px 12px; border-radius: 18px; background: linear-gradient(130deg, #14323a, #1d5c55); color: #fff; box-shadow: 0 22px 44px -24px #0b1820b3; }
.kt-preise-titel { display: block; margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f1d6a8; }
.kt-preise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kt-preise li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #ffffff1a; font-size: 14px; animation: ktg-rein .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
.kt-preise li span { color: #dce9e5; } .kt-preise li b { color: #fff; white-space: nowrap; }
.kt-preise p { margin: 8px 0 0; font-size: 12px; color: #cfe0dc; }
@keyframes ktg-rein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* Rechte Seite: weiße Glaskarte */
#kontoTor .kt-karte { padding: 10px 0 30px; max-width: 540px; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.kt-glas { padding: clamp(24px, 3.6vw, 40px); border-radius: 28px; background: #ffffffd9; border: 1px solid #fff; box-shadow: 0 40px 80px -40px #14323a73, 0 0 0 1px #14323a0d;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: ktg-auf .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ktg-auf { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
#kontoTor .kt-reiter { background: #e8eeeb; }
#kontoTor .kt-reiter button[aria-selected="true"] { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 8px 18px -10px #1d6d5ecc; }
#kontoTor .kt-reiter button:not([aria-selected="true"]):hover { background: #ffffffb3 !important; color: #14323a !important; }
#kontoTor .kt-haupt { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 14px 28px -12px #1d6d5ecc !important; }
#kontoTor .kt-haupt:hover { background: linear-gradient(135deg, #1f7a68, #14323a) !important; color: #fff !important; filter: none; }
#kontoTor .kt-gast { background: #f3faf7cc !important; }

/* Fußzeile hell */
#kontoTor .kt-recht { margin: 0 -22px; background: #ffffff8c; color: #3d5258; border-top: 1px solid #ffffff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#kontoTor .kt-recht a { color: #16564b; border-bottom-color: #16564b55; }
#kontoTor .kt-recht a:hover { border-bottom-color: #16564b; }

/* Ladebildschirm passend hell */
#kontoTor .kt-laden { background: radial-gradient(circle at 30% 20%, #ffffff, #e3eee9 70%); color: #3d5258; }
#kontoTor .kt-laden span { border-color: #1d6d5e26; border-top-color: #1d6d5e; }
#kontoTor .kt-laden button { background: linear-gradient(135deg, #2a9079, #1d6d5e); color: #fff; }

/* ---------- Live-Demo auf der Anmeldeseite ---------- */
#kontoTor .kt:has(.kt-schau) { grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "bild karte" "schau karte" "recht recht"; }
#kontoTor .kt:has(.kt-schau) .kt-bild { grid-area: bild; gap: 18px; }
#kontoTor .kt:has(.kt-schau) .kt-vorteile { display: none; }
#kontoTor .kt:has(.kt-schau) .kt-karte { grid-area: karte; align-self: start; position: sticky; top: 22px; padding-top: 0; }
#kontoTor .kt:has(.kt-schau) .kt-recht { grid-area: recht; }
.kt-schau { grid-area: schau; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; color: #14323a; border: 1px solid #ffffffb3;
  box-shadow: 0 40px 90px -40px #14323a66, 0 2px 0 #ffffffcc inset, 0 0 0 1px #14323a0f; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  animation: ktg-auf .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
.kt-schau::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #ffffffb8, #ffffff70 50%, #ffffffa6); }
.kt-schau::after { content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; filter: blur(50px); opacity: .85;
  background: radial-gradient(26% 32% at 20% 70%, #2f9a83aa, transparent 70%), radial-gradient(24% 30% at 82% 30%, #e7b878aa, transparent 70%); animation: ktg-schweben 20s ease-in-out infinite alternate; }
.kt-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #fff; color: #b3261e; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; box-shadow: 0 6px 16px -8px #b3261e66; }
.kt-live i { width: 8px; height: 8px; border-radius: 50%; background: #e0352b; animation: ktg-live 1.4s ease-in-out infinite; }
@keyframes ktg-live { 0%, 100% { box-shadow: 0 0 0 0 #e0352b88; } 70% { box-shadow: 0 0 0 7px #e0352b00; } }
.kt-schau-kopf h2 { margin: 10px 0 6px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.02em; color: #14323a; }
.kt-schau-kopf p { margin: 0; color: #3d5258; font-size: 14.5px; max-width: 560px; }
.kt-schau-buehne { position: relative; padding: 14px 12px 10px; border-radius: 22px; background: linear-gradient(160deg, #ffffffa6, #ffffff59); border: 1px solid #ffffff; box-shadow: 0 24px 50px -30px #14323a80 inset, 0 18px 40px -30px #14323a99; }
.kt-schau-demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Demo-Steuerung hell wie im Einstieg der Startseite */
#kontoTor .kt-schau .sd-steps button { background: #ffffffb3 !important; color: #34474e !important; border: 1px solid #14323a1f !important; font-family: Manrope, "Segoe UI", system-ui, sans-serif !important; }
#kontoTor .kt-schau .sd-steps button span { background: #14323a14; color: #14323a; }
#kontoTor .kt-schau .sd-steps button.active { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; border-color: transparent !important; }
#kontoTor .kt-schau .sd-steps button.active span { background: #fff; color: #1d6d5e; }
#kontoTor .kt-schau .sd-steps button i { background: #f1d6a8; }
#kontoTor .kt-schau .sd-play { background: #ffffffb3 !important; color: #14323a !important; border: 1px solid #14323a26 !important; }
#kontoTor .kt-schau .sd-caption { color: #3d5258; font-weight: 600; }
.kt-schau-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
#kontoTor .kt-schau-los { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 14px; padding: 12px 14px 12px 20px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; box-shadow: 0 16px 30px -14px #1d6d5ecc !important; transition: transform .2s, box-shadow .2s; }
#kontoTor .kt-schau-los span { font-size: 16px; font-weight: 800; } #kontoTor .kt-schau-los small { grid-column: 1; font-size: 12.5px; color: #e2f2ec; }
#kontoTor .kt-schau-los b { grid-row: 1 / span 2; grid-column: 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #ffffff26; font-size: 18px; transition: transform .2s; }
#kontoTor .kt-schau-los::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff40 50%, transparent 70%); transform: translateX(-100%); animation: ktg-glanz 3.6s ease-in-out infinite; }
@keyframes ktg-glanz { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
#kontoTor .kt-schau-los:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px #14323acc !important; background: linear-gradient(135deg, #1f7a68, #14323a) !important; }
#kontoTor .kt-schau-los:hover b { transform: translateX(4px); }
.kt-schau-fakten { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kt-schau-fakten li { display: grid; min-width: 92px; padding: 8px 12px; border-radius: 14px; background: #ffffffb3; border: 1px solid #fff; text-align: center; }
.kt-schau-fakten b { font-size: 22px; font-weight: 800; color: #1d6d5e; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kt-schau-fakten span { font-size: 11.5px; font-weight: 700; color: #45585e; }
.kt-schau .kt-preise { max-width: none; }
.kt-schau .kt-preise ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
#kontoTor .kt:has(.kt-schau) .kt-claim p { display: none; }
.kt-glas { box-shadow: 0 24px 50px -30px #14323a59, 0 0 0 1px #14323a0d !important; }

@media (max-width: 860px) {
  #kontoTor .kt:has(.kt-schau) { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "bild" "karte" "schau" "recht"; }
  #kontoTor .kt:has(.kt-schau) .kt-karte { position: static; }
  .kt-schau { border-radius: 22px; padding: 18px 14px; align-self: start; }
  .kt-schau-buehne { padding: 10px 6px 8px; }
  .kt-schau-fakten { width: 100%; } .kt-schau-fakten li { flex: 1; min-width: 0; }
  #kontoTor .kt-schau-los { width: 100%; }
  .kt-schau .kt-preise:not([hidden]) { display: block; }
  .kt-schau .kt-preise ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .kt-schau, .kt-schau::after, .kt-live i, #kontoTor .kt-schau-los::after { animation: none; } }

@media (max-width: 860px) {
  #kontoTor .kt { padding: 12px 12px 0; gap: 12px; }
  #kontoTor .kt-recht { margin: 0 -12px; }
  #kontoTor .kt-karte { padding: 0 0 22px; }
  .kt-preise { display: none; }
}
@media (prefers-reduced-motion: reduce) { #kontoTor::before, .kt-kicker i, .kt-glas, .kt-preise li { animation: none; } }