:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 56px);
  margin: 0 0 28px;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  color: var(--muted);
  margin: 0 0 18px;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

button,
.button,
.cta,
a[href^="/app"],
a[href*="login"],
a[href*="register"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
}

button:hover,
.button:hover,
.cta:hover,
a[href^="/app"]:hover,
a[href*="login"]:hover,
a[href*="register"]:hover {
  background: var(--primary-dark);
  color: #fff;
  text-decoration: none;
}

ul, ol {
  color: var(--muted);
  padding-left: 1.4rem;
}

li {
  margin: 0 0 8px;
}

@media (max-width: 720px) {
  main {
    width: min(100% - 20px, 1120px);
    padding: 28px 0 48px;
  }

  section {
    padding: 24px;
    border-radius: 14px;
  }
}


.seo-container{
    max-width:900px;
    margin:0 auto;
}

.seo-container > *:first-child{
    margin-top:0;
}

.seo-container img{
    max-width:100%;
    height:auto;
    display:block;
}

.seo-container table{
    width:100%;
    overflow-x:auto;
}



.seo-container > section:first-child{
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 34rem),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border:1px solid rgba(37,99,235,.18);
    padding-top:clamp(42px,6vw,76px);
    padding-bottom:clamp(42px,6vw,76px);
}

.seo-container > section:first-child p{
    font-size:1.12rem;
    max-width:720px;
}

.seo-container > section:first-child a.button,
.seo-container > section:first-child a.cta,
.seo-container > section:first-child a[href^="/app"],
.seo-container > section:first-child a[href*="login"],
.seo-container > section:first-child a[href*="register"]{
    margin-top:10px;
    box-shadow:0 14px 30px rgba(37,99,235,.22);
}

.seo-container > section:first-child a.button + a,
.seo-container > section:first-child a.cta + a{
    margin-left:10px;
}



.seo-container > section:not(:first-child){
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.seo-container > section:not(:first-child):hover{
    transform:translateY(-2px);
    border-color:rgba(37,99,235,.24);
    box-shadow:0 22px 52px rgba(15,23,42,.11);
}

.seo-container > section:not(:first-child) h2{
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}

.seo-container > section:not(:first-child) h3{
    margin-top:26px;
}



.seo-container{
    font-size:18px;
}

.seo-container p,
.seo-container li{
    line-height:1.85;
    color:#475569;
}

.seo-container strong{
    color:#0f172a;
    font-weight:700;
}

.seo-container h1{
    max-width:14ch;
    margin-bottom:24px;
}

.seo-container h2{
    margin-top:0;
    margin-bottom:20px;
}

.seo-container h3{
    color:#1e293b;
    margin-bottom:12px;
}

.seo-container ul,
.seo-container ol{
    margin:20px 0;
}

.seo-container li{
    margin-bottom:10px;
}

.seo-container blockquote{
    margin:28px 0;
    padding:18px 24px;
    border-left:4px solid var(--primary);
    background:#f8fafc;
    border-radius:10px;
    font-style:italic;
}



.seo-container details{
    border:1px solid var(--border);
    border-radius:14px;
    background:#ffffff;
    padding:18px 20px;
    margin:14px 0;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.seo-container details[open]{
    border-color:rgba(37,99,235,.28);
    background:#f8fafc;
}

.seo-container summary{
    cursor:pointer;
    font-weight:700;
    color:#0f172a;
    list-style:none;
}

.seo-container summary::-webkit-details-marker{
    display:none;
}

.seo-container summary::after{
    content:"+";
    float:right;
    font-size:1.25rem;
    color:var(--primary);
    line-height:1;
}

.seo-container details[open] summary::after{
    content:"–";
}

.seo-container details p{
    margin-top:14px;
    margin-bottom:0;
}



.seo-container table{
    width:100%;
    border-collapse:collapse;
    margin:28px 0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.seo-container thead{
    background:#eff6ff;
}

.seo-container th{
    padding:16px 18px;
    text-align:left;
    font-weight:700;
    color:#0f172a;
    border-bottom:1px solid var(--border);
}

.seo-container td{
    padding:15px 18px;
    border-bottom:1px solid var(--border);
    color:#475569;
    vertical-align:top;
}

.seo-container tbody tr:nth-child(even){
    background:#fafcff;
}

.seo-container tbody tr:last-child td{
    border-bottom:none;
}

@media (max-width:768px){

    .seo-container table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}



header,
footer{
    width:min(1120px, calc(100% - 32px));
    margin:0 auto;
}

header{
    padding:20px 0;
}

header nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

header a{
    font-weight:700;
}

footer{
    padding:36px 0 48px;
    color:var(--muted);
    font-size:.95rem;
}

footer a{
    color:var(--muted);
}

@media (max-width:720px){

    header,
    footer{
        width:min(100% - 20px, 1120px);
    }

    header nav{
        align-items:flex-start;
        flex-direction:column;
    }

}



.seo-container hr{
    border:0;
    height:1px;
    background:var(--border);
    margin:42px 0;
}

.seo-container code{
    background:#eef2ff;
    color:#1e3a8a;
    padding:2px 6px;
    border-radius:6px;
    font-size:.95em;
}

.seo-container pre{
    background:#0f172a;
    color:#e2e8f0;
    border-radius:14px;
    padding:20px;
    overflow-x:auto;
    margin:24px 0;
}

.seo-container pre code{
    background:transparent;
    color:inherit;
    padding:0;
}

.seo-container input,
.seo-container select,
.seo-container textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    font:inherit;
    background:#fff;
    margin-bottom:14px;
}

.seo-container input:focus,
.seo-container select:focus,
.seo-container textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}



.seo-container img{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
    margin:28px auto;
    box-shadow:0 18px 40px rgba(15,23,42,.10);
}

.seo-container figure{
    margin:36px 0;
}

.seo-container figcaption{
    margin-top:12px;
    text-align:center;
    font-size:.95rem;
    color:var(--muted);
}

.seo-container iframe,
.seo-container video{
    display:block;
    width:100%;
    max-width:100%;
    border:0;
    border-radius:16px;
    margin:28px 0;
    box-shadow:0 18px 40px rgba(15,23,42,.10);
}

.seo-container svg{
    max-width:100%;
    height:auto;
}

@media (max-width:720px){

    .seo-container img,
    .seo-container iframe,
    .seo-container video{
        border-radius:12px;
        margin:20px 0;
    }

}



.seo-container ul{
    list-style:none;
    padding-left:0;
}

.seo-container ul li{
    position:relative;
    padding-left:30px;
    margin-bottom:14px;
}

.seo-container ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0.05em;
    color:var(--primary);
    font-weight:700;
}

.seo-container ol{
    padding-left:1.6rem;
}

.seo-container ol li::marker{
    color:var(--primary);
    font-weight:700;
}

.seo-container li > ul,
.seo-container li > ol{
    margin-top:12px;
    margin-bottom:0;
}




.seo-container > * + *{
    margin-top:32px;
}

.seo-container section + section{
    margin-top:36px;
}

.seo-container h1 + p,
.seo-container h2 + p,
.seo-container h3 + p{
    margin-top:12px;
}

.seo-container p + ul,
.seo-container p + ol,
.seo-container p + table,
.seo-container p + details,
.seo-container p + figure{
    margin-top:20px;
}

.seo-container ul + p,
.seo-container ol + p,
.seo-container table + p,
.seo-container details + p{
    margin-top:20px;
}

.seo-container > :last-child{
    margin-bottom:0;
}




.seo-container a:not(.button):not(.cta):not([href^="/app"]):not([href*="login"]):not([href*="register"]){
    font-weight:650;
    text-underline-offset:4px;
}

.seo-container a:not(.button):not(.cta):not([href^="/app"]):not([href*="login"]):not([href*="register"]):hover{
    text-decoration-thickness:2px;
}

button,
.button,
.cta,
a[href^="/app"],
a[href*="login"],
a[href*="register"]{
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

button:hover,
.button:hover,
.cta:hover,
a[href^="/app"]:hover,
a[href*="login"]:hover,
a[href*="register"]:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 34px rgba(37,99,235,.24);
}

button:focus-visible,
.button:focus-visible,
.cta:focus-visible,
a:focus-visible{
    outline:3px solid rgba(37,99,235,.35);
    outline-offset:3px;
}




@media print{

    body{
        background:#fff;
        color:#000;
    }

    header,
    footer{
        display:none;
    }

    main,
    .seo-container{
        width:100%;
        max-width:none;
        padding:0;
        margin:0;
    }

    section,
    .seo-container > section:first-child,
    .seo-container > section:not(:first-child){
        box-shadow:none;
        border:1px solid #ddd;
        break-inside:avoid;
    }

    a{
        color:#000;
        text-decoration:underline;
    }

}



@media (prefers-color-scheme: dark){

    :root{
        --bg:#020617;
        --surface:#0f172a;
        --text:#e5e7eb;
        --muted:#cbd5e1;
        --border:#1e293b;
        --shadow:0 18px 45px rgba(0,0,0,.35);
    }

    .seo-container > section:first-child{
        background:
            radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 34rem),
            linear-gradient(135deg, #0f172a 0%, #111827 100%);
    }

    .seo-container strong,
    .seo-container h3,
    .seo-container summary{
        color:#f8fafc;
    }

    .seo-container details,
    .seo-container input,
    .seo-container select,
    .seo-container textarea,
    .seo-container table{
        background:#0f172a;
    }

    .seo-container details[open],
    .seo-container blockquote,
    .seo-container tbody tr:nth-child(even){
        background:#111827;
    }

    .seo-container thead{
        background:#172554;
    }

    .seo-container code{
        background:#1e293b;
        color:#bfdbfe;
    }

}



@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

    .seo-container > section:not(:first-child):hover,
    button:hover,
    .button:hover,
    .cta:hover,
    a[href^="/app"]:hover,
    a[href*="login"]:hover,
    a[href*="register"]:hover{
        transform:none;
    }

}



.seo-container .badge,
.seo-container .pill,
.seo-container .label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:auto;
    padding:6px 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:.9rem;
    font-weight:700;
    line-height:1.2;
    box-shadow:none;
}

.seo-container .note,
.seo-container .hint,
.seo-container .info{
    padding:18px 20px;
    border:1px solid rgba(37,99,235,.22);
    border-left:4px solid var(--primary);
    border-radius:14px;
    background:#f8fafc;
    color:var(--muted);
    margin:24px 0;
}

@media (prefers-color-scheme: dark){

    .seo-container .badge,
    .seo-container .pill,
    .seo-container .label{
        background:#172554;
        color:#bfdbfe;
    }

    .seo-container .note,
    .seo-container .hint,
    .seo-container .info{
        background:#111827;
    }

}



html,
body{
    max-width:100%;
    overflow-x:hidden;
}

.seo-container{
    overflow-wrap:break-word;
    word-wrap:break-word;
}

.seo-container a,
.seo-container code,
.seo-container pre{
    overflow-wrap:anywhere;
}

.seo-container pre{
    max-width:100%;
}

.seo-container iframe{
    aspect-ratio:16 / 9;
}



/* Phase 10 UI Refresh - Homepage v2 */
.seo-container > section:first-child {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.seo-container > section:first-child::after {
    content: "";
    position: absolute;
    right: clamp(24px, 6vw, 72px);
    top: 50%;
    width: min(34vw, 360px);
    height: 230px;
    transform: translateY(-50%);
    border-radius: 26px;
    background:
        linear-gradient(90deg, rgba(37,99,235,.16) 1px, transparent 1px),
        linear-gradient(rgba(37,99,235,.16) 1px, transparent 1px),
        linear-gradient(135deg, #eff6ff 0%, #dbeafe 45%, #ffffff 100%);
    background-size: 34px 34px, 34px 34px, auto;
    border: 1px solid rgba(37,99,235,.22);
    box-shadow: 0 26px 70px rgba(37,99,235,.20);
    opacity: .95;
}

.seo-container > section:first-child::before {
    content: "Route optimiert";
    position: absolute;
    right: clamp(54px, 9vw, 126px);
    top: calc(50% + 64px);
    z-index: 1;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d4ed8;
    font-size: .9rem;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
}

.seo-container > section:first-child > * {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.seo-container .badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 8px 13px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.seo-container .card-grid,
.seo-container .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.seo-container .card-grid article,
.seo-container .feature-grid article {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

.seo-container .card-grid article h3,
.seo-container .feature-grid article h3 {
    margin-top: 0;
}

.seo-container .card-grid article p:last-child,
.seo-container .feature-grid article p:last-child {
    margin-bottom: 0;
}

.seo-container > section:last-child {
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(37,99,235,.18), transparent 30rem),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    border-color: rgba(37,99,235,.35);
}

.seo-container > section:last-child h2,
.seo-container > section:last-child p {
    color: #ffffff;
}

.seo-container > section:last-child p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    opacity: .88;
}

.seo-container > section:last-child .cta,
.seo-container > section:last-child a[href^="/app"] {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.seo-container > section:last-child .cta:hover,
.seo-container > section:last-child a[href^="/app"]:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 900px) {
    .seo-container > section:first-child::after,
    .seo-container > section:first-child::before {
        display: none;
    }

    .seo-container > section:first-child > * {
        max-width: none;
    }

    .seo-container .card-grid,
    .seo-container .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Phase 10 UI System v3 */
.seo-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 22px 0 0;
    list-style: none;
}

.seo-trust-strip li {
    padding: 10px 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 800;
    font-size: .95rem;
}

.seo-trust-strip li::before {
    content: "";
}

.seo-step-number {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
    margin-bottom: 14px;
}

.seo-highlight-section {
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 28rem),
        #ffffff;
}

.seo-comparison-card-positive {
    border-color: rgba(37,99,235,.32) !important;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
}

.seo-link-panel {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
}

.seo-container .seo-link-panel p:last-child {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .seo-trust-strip {
        gap: 8px;
    }

    .seo-trust-strip li {
        width: 100%;
    }
}



/* Homepage v2 - Production Styles */
main:has(.v9-hero) {
    width: min(1200px, calc(100% - 32px));
}

main:has(.v9-hero) > section {
    margin: 64px 0;
    padding: clamp(42px, 6vw, 72px);
    border-radius: 34px;
}

.v9-hero {
    min-height: auto;
    text-align: center;
    padding-top: clamp(54px, 7vw, 86px);
    padding-bottom: clamp(42px, 6vw, 70px);
    background:
        radial-gradient(circle at top, rgba(37,99,235,.18), transparent 34rem),
        linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.v9-hero h1 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(3rem, 6vw, 5.7rem);
    line-height: .98;
}

.v9-hero p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.product-showcase-real {
    text-align: center;
    overflow: hidden;
}

.product-showcase-real h2,
.product-showcase-real > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.product-showcase-real figure {
    width: 100%;
    max-width: 1080px;
    margin: 42px auto;
    overflow: hidden;
    border-radius: 30px;
}

.product-showcase-real figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 30px;
    object-fit: contain;
    box-shadow: 0 40px 100px rgba(15,23,42,.18);
}

.product-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}

.highlight {
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

.highlight strong {
    display: block;
    margin-bottom: 8px;
}

.highlight span {
    color: var(--muted);
    font-size: .95rem;
}

.final-cta {
    text-align: center;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at top, rgba(37,99,235,.34), transparent 30rem),
        linear-gradient(135deg,#020617,#172554);
    border: 0;
}

.final-cta h2,
.final-cta p {
    color: #ffffff;
}

@media (max-width: 900px) {
    main:has(.v9-hero) {
        width: min(100% - 20px, 1200px);
    }

    main:has(.v9-hero) > section {
        margin: 36px 0;
        padding: 28px 22px;
        border-radius: 24px;
    }

    .product-highlights {
        grid-template-columns: 1fr;
    }
}

/* Homepage FAQ Accordion */
.homepage-faq {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.homepage-faq h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.faq-accordion {
    display: grid;
    gap: 14px;
    margin-top: 34px;
}

.faq-accordion details {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

.faq-accordion summary {
    cursor: pointer;
    list-style: none;
    font-weight: 900;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary::after {
    content: "+";
    color: var(--primary);
    font-size: 1.4rem;
    line-height: 1;
}

.faq-accordion details[open] summary::after {
    content: "–";
}

.faq-accordion p {
    margin: 14px 0 0;
}

/* ---------- Homepage Polish ---------- */

.homepage-faq{
    max-width:none;
    width:100%;
}

.homepage-faq .faq-accordion{
    max-width:100%;
}

.homepage-faq details{
    width:100%;
}

.homepage-faq h2{
    margin-bottom:36px;
}

.homepage-faq{
    margin-top:32px !important;
}