/* =========================================================
   01. Variablen
   ========================================================= */
:root{
    --bg:#f4f8f2;
    --surface:#ffffff;
    --surface-soft:#edf5e9;
    --ink:#17231a;
    --muted:#5b6b5e;
    --green:#226b3a;
    --green-dark:#164a29;
    --green-light:#d9edcf;
    --gold:#c9942d;
    --danger:#9e3d32;
    --line:rgba(23,35,26,.11);
    --shadow:0 20px 60px rgba(28,63,35,.10);
    --radius:28px;
    --max:1180px;
}
/* =========================================================
   02. Reset & Grundlayout
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.65;
    text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit}
a{color:inherit}
/* =========================================================
   03. Barrierefreiheit & Container
   ========================================================= */
.skip-link{
    position:absolute;
    left:-9999px;
    top:8px;
    z-index:1000;
    padding:10px 14px;
    background:#fff;
    border-radius:10px;
}
.skip-link:focus{left:8px}
.container{
    width:min(calc(100% - 32px),var(--max));
    margin-inline:auto;
}
/* =========================================================
   04. Header & Navigation
   ========================================================= */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(244,248,242,.93);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
}
.header-inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.05em;
}
.brand-mark{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(145deg,var(--green),var(--green-dark));
    color:#fff;
    box-shadow:0 10px 22px rgba(34,107,58,.22);
}
.logo{
    width:48px;
    height:auto;
    display:block;
    flex-shrink:0;
}
.nav{
    display:flex;
    align-items:center;
    gap:18px;
    font-size:.94rem;
    font-weight:700;
}
.nav a{text-decoration:none}
.nav a:hover,.nav a:focus-visible{color:var(--green)}
/* =========================================================
   05. Hero
   ========================================================= */
.hero{
    position:relative;
    overflow:hidden;
    padding:clamp(70px,10vw,130px) 0 72px;
    background:
        radial-gradient(circle at 82% 18%,rgba(201,148,45,.20),transparent 26%),
        radial-gradient(circle at 10% 30%,rgba(34,107,58,.18),transparent 30%),
        linear-gradient(180deg,#fbfdf9 0%,#edf5e9 100%);
}
.hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
    align-items:center;
    gap:clamp(42px,7vw,90px);
}
.series{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 13px;
    border:1px solid rgba(34,107,58,.2);
    border-radius:999px;
    background:rgba(255,255,255,.74);
    color:var(--green-dark);
    font-weight:800;
    font-size:.84rem;
    letter-spacing:.02em;
}
.series-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gold);
}
h1,h2,h3{line-height:1.12}
h1{
    max-width:820px;
    margin:24px 0 20px;
    font-size:clamp(2.1rem,4.8vw,4.2rem);
    letter-spacing:-.055em;
}
.hero-lead{
    max-width:720px;
    margin:0;
    color:var(--muted);
    font-size:clamp(1.15rem,2.4vw,1.45rem);
}
.hero-lead strong{color:var(--green-dark)}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}
/* =========================================================
   06. Buttons
   ========================================================= */
.button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:50px;
    padding:0 20px;
    border:0;
    border-radius:15px;
    text-decoration:none;
    font-weight:850;
    cursor:pointer;
}
.button-primary{
    background:var(--green);
    color:#fff;
    box-shadow:0 12px 26px rgba(34,107,58,.23);
}
.button-primary:hover,.button-primary:focus-visible{background:var(--green-dark)}
.button-secondary{
    background:#fff;
    color:var(--green-dark);
    border:1px solid var(--line);
}
.hero-visual{
    min-height:430px;
    display:grid;
    place-items:center;
    position:relative;
}
.wallet-scene{
    width:min(100%,470px);
    aspect-ratio:1/1;
    position:relative;
}
.glow{
    position:absolute;
    inset:12%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(34,107,58,.20),rgba(34,107,58,0) 68%);
}
.wallet-main{
    position:absolute;
    inset:24% 19%;
    display:grid;
    place-items:center;
    border-radius:36px;
    background:linear-gradient(145deg,#fff,#e8f2e4);
    border:1px solid rgba(34,107,58,.14);
    box-shadow:var(--shadow);
    transform:rotate(-3deg);
}
.wallet-number{
    position:relative;
    z-index:2;
    text-align:center;
}
.wallet-number strong{
    display:block;
    color:var(--green-dark);
    font-size:clamp(2.2rem,6vw,4.5rem);
    letter-spacing:-.06em;
}
.wallet-number span{
    display:block;
    color:var(--muted);
    font-weight:800;
}
.orbit{
    position:absolute;
    inset:5%;
    border:1px dashed rgba(34,107,58,.26);
    border-radius:50%;
}
.person{
    position:absolute;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(34,107,58,.16);
    box-shadow:0 10px 24px rgba(28,63,35,.11);
    font-size:1.45rem;
}
.p1{left:5%;top:42%}
.p2{left:22%;top:4%}
.p3{right:15%;top:8%}
.p4{right:2%;top:47%}
.p5{right:20%;bottom:3%}
.p6{left:20%;bottom:5%}
/* =========================================================
   07. Allgemeine Sektionen
   ========================================================= */
.section{
    padding:clamp(72px,9vw,118px) 0;
}
.section-head{
    max-width:760px;
    margin-bottom:38px;
}
.eyebrow{
    margin:0 0 12px;
    color:var(--green);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.78rem;
}
h2{
    margin:0 0 18px;
    font-size:clamp(2rem,4.5vw,3.65rem);
    letter-spacing:-.045em;
}
.section-head p{
    margin:0;
    color:var(--muted);
    font-size:1.1rem;
}
/* =========================================================
   08. Karten & Inhaltsraster
   ========================================================= */
.problem-grid,.benefit-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.card{
    padding:28px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:0 12px 36px rgba(28,63,35,.06);
}
.card-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border-radius:17px;
    background:var(--surface-soft);
    font-size:1.45rem;
}
.card h3{margin:0 0 10px;font-size:1.3rem}
.card p{margin:0;color:var(--muted)}
/* =========================================================
   09. Vergleich
   ========================================================= */
.comparison{
    background:var(--green-dark);
    color:#fff;
}
.comparison .eyebrow{color:#b9dcae}
.comparison .section-head p{color:rgba(255,255,255,.73)}

.compare-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* Standard: helle Vergleichskarten */
.compare-panel{
    padding:32px;
    border-radius:32px;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink);
    box-shadow:0 12px 36px rgba(28,63,35,.06);
}
.compare-panel.good{
    background:linear-gradient(145deg,var(--surface-soft),#fff);
    border-color:rgba(34,107,58,.16);
}
.compare-label{
    display:inline-block;
    margin-bottom:24px;
    padding:7px 11px;
    border-radius:999px;
    background:var(--surface-soft);
    color:var(--green-dark);
    font-size:.82rem;
    font-weight:900;
}
.compare-panel h3{
    margin:0 0 12px;
    color:var(--ink);
    font-size:1.7rem;
}
.compare-panel p{
    margin:0;
    color:var(--muted);
}

/* Dunkle Darstellung nur innerhalb eines .comparison-Bereichs */
.comparison .compare-panel{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.13);
    color:#fff;
    box-shadow:none;
}
.comparison .compare-panel.good{
    background:linear-gradient(145deg,rgba(217,237,207,.17),rgba(255,255,255,.07));
}
.comparison .compare-label{
    background:rgba(255,255,255,.12);
    color:#fff;
}
.comparison .compare-panel h3{color:#fff}
.comparison .compare-panel p{color:rgba(255,255,255,.76)}

.whale{
    width:170px;
    height:170px;
    display:grid;
    place-items:center;
    margin:20px auto 28px;
    border-radius:50%;
    background:var(--surface-soft);
    color:var(--green-dark);
    font-size:4rem;
}
.comparison .whale{
    background:rgba(255,255,255,.12);
    color:#fff;
}
.people-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin:32px 0;
}
.people-grid span{
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--surface-soft);
    color:var(--green-dark);
    font-size:1.35rem;
}
.comparison .people-grid span{
    background:rgba(255,255,255,.13);
    color:#fff;
}
/* =========================================================
   10. Zahlen & Hinweise
   ========================================================= */
.number-band{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.number-card{
    text-align:center;
    padding:34px 24px;
    border-radius:26px;
    background:var(--surface);
    border:1px solid var(--line);
}
.number-card strong{
    display:block;
    color:var(--green-dark);
    font-size:clamp(2rem,5vw,3.5rem);
    letter-spacing:-.05em;
}
.number-card span{color:var(--muted);font-weight:700}
.callout{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:20px;
    align-items:start;
    margin-top:24px;
    padding:28px;
    border-radius:26px;
    background:#fff7e5;
    border:1px solid rgba(201,148,45,.25);
}
.callout-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#fff;
    font-size:1.35rem;
}
.callout h3{margin:0 0 8px}
.callout p{margin:0;color:#665833}
/* =========================================================
   11. Unique-Box
   ========================================================= */
.unique-box{
    width:min(calc(100% - 40px),960px);
    margin:80px auto;
    padding:42px 48px;
    background:#fffaf0;
    border:1px solid #ead7a2;
    border-radius:26px;
    box-shadow:0 18px 45px rgba(0,0,0,.07);
}

.unique-box h2{
    margin:0 0 24px;
    text-align:center;
    font-size:42px;
    color:#14365b;
}

.unique-box p{
    margin:0;
    font-size:22px;
    line-height:1.9;
    color:#222;
}

.unique-box strong{
    color:#14365b;
}

.unique-box .small-note{
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid rgba(20,54,91,.12);
    font-size:16px;
    line-height:1.6;
    text-align:center;
    opacity:.8;
}
/* =====================================
   LIG1 Erklärreihe Navigation
===================================== */

.lig1-series-nav{
  max-width:1100px;
  margin:35px auto;
  padding:18px 22px;
  background:#f7fbfa;
  border:1px solid #dceee9;
  border-radius:16px;
}

.lig1-series-head{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
  color:#123;
}

.lig1-series-head span{
  font-size:14px;
  font-weight:400;
  margin-left:10px;
  opacity:.7;
}

.lig1-series-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lig1-series-links a{
  padding:7px 13px;
  border-radius:20px;
  font-size:14px;
  text-decoration:none;
  background:white;
  color:#146c60;
  border:1px solid #dceee9;
}

.lig1-series-links a.active{
  background:#146c60;
  color:white;
}

/* =========================================================
   12. Faktenbereich
   ========================================================= */
.truth{
    background:linear-gradient(180deg,#edf5e9,var(--bg));
}
.truth-list{
    display:grid;
    gap:13px;
}
.truth-item{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:16px;
    align-items:start;
    padding:21px 22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
}
.truth-item b{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:var(--surface-soft);
    color:var(--green-dark);
}
.truth-item h3{margin:2px 0 6px;font-size:1.12rem}
.truth-item p{margin:0;color:var(--muted)}
/* =========================================================
   13. Quiz
   ========================================================= */
.quiz-wrap{
    max-width:850px;
    margin-inline:auto;
    padding:clamp(28px,6vw,52px);
    border-radius:34px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.quiz-options{
    display:grid;
    gap:12px;
    margin:28px 0 18px;
}
.quiz-option{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:17px;
    border:1px solid var(--line);
    border-radius:17px;
    cursor:pointer;
}
.quiz-option:hover{border-color:rgba(34,107,58,.38)}
.quiz-option input{margin-top:5px}
.quiz-result{
    display:none;
    margin-top:18px;
    padding:18px;
    border-radius:17px;
    font-weight:750;
}
.quiz-result.show{display:block}
.quiz-result.correct{background:#e4f3de;color:#184f2b}
.quiz-result.wrong{background:#fff0e8;color:#7d352b}
/* =========================================================
   14. Community & Vorteile
   ========================================================= */
.community{
    background:
        radial-gradient(circle at 15% 15%,rgba(201,148,45,.14),transparent 28%),
        #fff;
}
.support-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}
.support-card{
    padding:24px 20px;
    border-radius:23px;
    background:var(--bg);
    border:1px solid var(--line);
}
.support-card span{font-size:1.65rem}
.support-card h3{margin:13px 0 8px;font-size:1.12rem}
.support-card p{margin:0;color:var(--muted);font-size:.95rem}
/* =========================================================
   15. Bewertung, Formulare & Kommentare
   ========================================================= */
.rating-comment-grid{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:22px;
    align-items:start;
}
.panel{
    padding:clamp(24px,4vw,36px);
    border-radius:30px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 12px 34px rgba(28,63,35,.06);
}
.panel h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.rating-summary{
    display:flex;
    align-items:end;
    gap:12px;
    margin:22px 0 16px;
}
.rating-summary strong{
    font-size:3.2rem;
    line-height:1;
    color:var(--green-dark);
}
.rating-summary span{color:var(--muted)}
.stars{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:5px;
    margin:18px 0;
}
.stars input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.stars label{
    color:#c7c7c7;
    font-size:2.25rem;
    line-height:1;
    cursor:pointer;
}
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label{color:var(--gold)}
.form-row{display:grid;gap:8px;margin-bottom:16px}
label{font-weight:800}
input[type="text"],textarea{
    width:100%;
    border:1px solid rgba(23,35,26,.18);
    border-radius:15px;
    background:#fbfcfa;
    color:var(--ink);
    padding:13px 14px;
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{
    outline:3px solid rgba(34,107,58,.15);
    border-color:var(--green);
}
.honeypot{
    position:absolute!important;
    left:-9999px!important;
}
.comments{
    display:grid;
    gap:13px;
    margin-top:25px;
}
.comment{
    padding:20px;
    border:1px solid var(--line);
    border-radius:19px;
    background:#fbfcfa;
}
.comment-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-bottom:8px;
}
.comment-head strong{color:var(--green-dark)}
.comment time{color:var(--muted);font-size:.85rem}
.comment p{margin:0;white-space:pre-wrap}
.flash{
    width:min(calc(100% - 32px),var(--max));
    margin:18px auto 0;
    padding:14px 16px;
    border-radius:14px;
    font-weight:750;
}
.flash-success{background:#e4f3de;color:#184f2b}
.flash-error{background:#ffebe8;color:#7d352b}
.flash-info{background:#edf2ff;color:#2f466f}
/* =========================================================
   16. Footer
   ========================================================= */
.site-footer{
    padding:55px 0 28px;
    background:#102d1b;
    color:#fff;
}
.footer-top{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:42px;
    padding-bottom:38px;
}
.footer-top h2{font-size:clamp(2rem,4vw,3.3rem)}
.footer-top p{max-width:650px;color:rgba(255,255,255,.72)}
.footer-links{
    display:grid;
    align-content:start;
    gap:10px;
}
.footer-links a{color:rgba(255,255,255,.8);text-decoration:none}
.footer-links a:hover{color:#fff}
.footer-bottom{
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.6);
    font-size:.9rem;
}
/* =========================================================
   17. Responsive
   ========================================================= */
@media (max-width:900px){
    .hero-grid,.rating-comment-grid,.footer-top{grid-template-columns:1fr}
    .hero-visual{min-height:360px}
    .problem-grid,.benefit-grid{grid-template-columns:1fr 1fr}
    .support-grid{grid-template-columns:1fr 1fr}
    .number-band{grid-template-columns:1fr}
}
@media (max-width:680px){
    .nav{display:none}
    .hero{padding-top:62px}
    .hero-grid{gap:12px}
    .hero-visual{min-height:330px}
    .problem-grid,.benefit-grid,.compare-grid,.support-grid{grid-template-columns:1fr}
    .compare-panel{min-height:auto}
    .people-grid{grid-template-columns:repeat(5,1fr)}
    .card,.compare-panel{padding:24px}
    .callout{grid-template-columns:1fr}
    .comment-head{display:block}

    .unique-box{
            width:min(calc(100% - 24px),900px);
            margin:40px auto;
            padding:24px 20px;
        }

        .unique-box h2{
            font-size:27px;
        }

        .unique-box p{
            font-size:17px;
        }
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
}
/* =========================================================
   LIGONE SPARWELT
   Additive Styles

   WICHTIG:
   Farben und Grunddesign kommen aus den zentralen
   LIGONE-Variablen im :root-Bereich.
   ========================================================= */


/* =========================================================
   01. Grundlayout Sparwelt
   ========================================================= */

.sparen-page {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
}

.sparen-page * {
    box-sizing: border-box;
}

.sparen-container {
    width: min(var(--max), calc(100% - 34px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   02. Navigation
   ========================================================= */

.sparen-header {
    background: rgba(244, 248, 242, 0.96);
    border-bottom: 1px solid var(--line);
}

.sparen-nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.sparen-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 900;
}

.sparen-brand img {
    display: block;
    width: 43px;
    height: 43px;
    object-fit: contain;
}

.sparen-navigation {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-left: auto;
}

.sparen-navigation a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 700;
}

.sparen-navigation a:hover,
.sparen-navigation a:focus-visible,
.sparen-navigation a.active {
    color: var(--green);
}

.sparen-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 10px;
    background: var(--green);
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(34, 107, 58, 0.18);
}

.sparen-account:hover,
.sparen-account:focus-visible {
    background: var(--green-dark);
}


/* =========================================================
   03. Hero
   ========================================================= */

.sparen-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 0 55px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(201, 148, 45, 0.14),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 28%,
            rgba(34, 107, 58, 0.12),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            var(--bg) 53%,
            var(--surface-soft) 100%
        );
}

.sparen-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 60px;
}

.sparen-eyebrow,
.sparen-section-label {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid rgba(34, 107, 58, 0.14);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.sparen-hero h1 {
    max-width: 650px;
    margin: 17px 0 20px;
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.sparen-hero h1 strong,
.sparen-section-intro h2 strong {
    color: var(--green-dark);
}

.sparen-hero-lead {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.55;
    font-weight: 700;
}

.sparen-hero-text {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.sparen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 25px;
}


/* =========================================================
   04. Sparwelt-Buttons
   ========================================================= */

.sparen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 10px 19px;
    border: 0;
    border-radius: 11px;
    background: var(--green);
    color: #ffffff;
    text-decoration: none;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(34, 107, 58, 0.18);
}

.sparen-button:hover,
.sparen-button:focus-visible {
    background: var(--green-dark);
}

.sparen-button-light {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--green-dark);
    box-shadow: none;
}

.sparen-button-light:hover,
.sparen-button-light:focus-visible {
    background: var(--surface-soft);
    color: var(--green-dark);
}

.sparen-hero-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 19px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.sparen-hero-note span::before {
    content: "✓";
    margin-right: 5px;
    color: var(--green);
}


/* =========================================================
   05. Hero-Grafik
   ========================================================= */

.sparen-visual {
    width: 100%;
    max-width: 475px;
    margin-left: auto;
}

.sparen-visual-card {
    position: relative;
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
}

.sparen-visual-label {
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.sparen-visual-card h2 {
    margin: 8px 0 17px;
    color: var(--ink);
    font-size: 1.75rem;
}

.sparen-visual-search {
    padding: 13px 14px;
    margin-bottom: 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg);
    color: var(--muted);
}

.sparen-visual-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    margin-top: 10px;
    border-radius: 13px;
    background: var(--surface-soft);
}

.sparen-visual-icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface);
    font-size: 1.25rem;
}

.sparen-visual-item strong,
.sparen-visual-item small {
    display: block;
}

.sparen-visual-item strong {
    color: var(--ink);
}

.sparen-visual-item small {
    margin-top: 3px;
    color: var(--muted);
}


/* =========================================================
   06. Schnellwahl
   ========================================================= */

.sparen-quick {
    padding: 17px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.sparen-quick-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sparen-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sparen-quick-links a {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--green-dark);
    text-decoration: none;
    font-size: 0.89rem;
    font-weight: 800;
}

.sparen-quick-links a:hover,
.sparen-quick-links a:focus-visible {
    border-color: rgba(34, 107, 58, 0.28);
    background: var(--surface-soft);
}


/* =========================================================
   07. Allgemeine Abschnitte
   ========================================================= */

.sparen-section {
    padding: 64px 0;
}

.sparen-soft {
    background: var(--surface-soft);
}

.sparen-section-intro {
    max-width: 760px;
    margin-bottom: 32px;
}

.sparen-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sparen-section-intro h2 {
    margin: 13px 0 10px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.sparen-section-intro p {
    color: var(--muted);
    line-height: 1.65;
}


/* =========================================================
   08. Schritte
   ========================================================= */

.sparen-steps {
    display: grid;
    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;
    gap: 15px;
    align-items: start;
}

.sparen-step {
    text-align: center;
}

.sparen-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 13px;
    border-radius: 20px;
    background: var(--surface-soft);
    color: var(--green-dark);
    font-size: 1.7rem;
}

.sparen-step > span {
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 900;
}

.sparen-step h3 {
    margin: 7px 0;
    color: var(--ink);
    font-size: 1.03rem;
}

.sparen-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.91rem;
    line-height: 1.55;
}

.sparen-step-line {
    width: 55px;
    height: 2px;
    margin-top: 31px;
    background: var(--green-light);
}


/* =========================================================
   09. Meldungen
   ========================================================= */

/* LIGONE Sparwelt – sichtbare Systemmeldungen */
.sparen-message {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    width: min(680px, calc(100% - 32px));
    padding: 16px 20px;

    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(23, 35, 26, 0.18);

    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.sparen-success {
    background: #edf8ee;
    border: 1px solid #b8ddb9;
    color: #185a2c;
}

.sparen-error {
    background: #fff2f0;
    border: 1px solid #e4b7b1;
    color: #8a3028;
}

@media (max-width: 700px) {
    .sparen-message {
        top: 76px;
        width: calc(100% - 24px);
        padding: 14px 16px;
    }
}

.sparen-success {
    border: 1px solid rgba(34, 107, 58, 0.22);
    background: var(--surface-soft);
    color: var(--green-dark);
}

.sparen-error {
    border: 1px solid rgba(158, 61, 50, 0.25);
    background: #fff3f1;
    color: var(--danger);
}


/* =========================================================
   10. Nachfrage
   ========================================================= */

.sparen-request-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sparen-request-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: var(--surface);
    box-shadow: 0 8px 30px rgba(28, 63, 35, 0.055);
}

.sparen-request-category {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 900;
}

.sparen-request-card h3 {
    margin: 14px 0 8px;
    color: var(--ink);
    font-size: 1.25rem;
}

.sparen-request-card p {
    color: var(--muted);
    line-height: 1.55;
}

.sparen-request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0 19px;
}

.sparen-request-meta span {
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.sparen-empty {
    padding: 42px 27px;
    border: 1px dashed rgba(34, 107, 58, 0.28);
    border-radius: 22px;
    background: linear-gradient(
        120deg,
        var(--surface),
        var(--surface-soft)
    );
    text-align: center;
}

.sparen-empty-icon {
    margin-bottom: 10px;
    font-size: 2.5rem;
}

.sparen-empty h3 {
    margin: 0 0 9px;
    color: var(--ink);
    font-size: 1.5rem;
}

.sparen-empty p {
    max-width: 650px;
    margin: 0 auto 20px;
    color: var(--muted);
    line-height: 1.6;
}


/* =========================================================
   11. Echte Zahlen
   ========================================================= */

.sparen-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 25px;
}

.sparen-stats > div {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    text-align: center;
}

.sparen-stats strong,
.sparen-stats span {
    display: block;
}

.sparen-stats strong {
    color: var(--green-dark);
    font-size: 1.7rem;
}

.sparen-stats span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
}


/* =========================================================
   12. Formulare
   ========================================================= */

.sparen-form-layout {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 35px;
    align-items: start;
}

.sparen-form-info h2 {
    margin: 13px 0;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3rem);
}

.sparen-form-info p {
    color: var(--muted);
    line-height: 1.65;
}

.sparen-checks {
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.sparen-checks li {
    margin: 9px 0;
    color: var(--muted);
}

.sparen-checks li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--green);
    font-weight: 900;
}

.sparen-form {
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.sparen-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.sparen-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sparen-field-full {
    grid-column: 1 / -1;
}

.sparen-field label {
    color: var(--ink);
    font-size: 0.91rem;
    font-weight: 900;
}

.sparen-field input,
.sparen-field select,
.sparen-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.sparen-field textarea {
    min-height: 105px;
    resize: vertical;
}

.sparen-field input:focus,
.sparen-field select:focus,
.sparen-field textarea:focus {
    outline: 3px solid rgba(34, 107, 58, 0.15);
    border-color: var(--green);
}

.sparen-field small,
.sparen-small-note {
    color: var(--muted);
    font-size: 0.85rem;
}

.sparen-checkbox {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    line-height: 1.5;
}

.sparen-checkbox input {
    width: auto;
    min-height: 0;
    margin-top: 3px;
}

.sparen-login-note {
    padding: 13px 14px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    line-height: 1.5;
}


/* =========================================================
   13. Suchende / Anbieter
   ========================================================= */

.sparen-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sparen-choice-card {
    padding: 29px;
    border: 1px solid var(--line);
    border-radius: 23px;
}

.sparen-choice-card:first-child {
    background: linear-gradient(
        135deg,
        var(--surface-soft),
        var(--surface)
    );
}

.sparen-choice-card:last-child {
    background: linear-gradient(
        135deg,
        var(--bg),
        var(--surface)
    );
}

.sparen-choice-icon {
    color: var(--green-dark);
    font-size: 2rem;
}

.sparen-choice-card h3 {
    margin: 13px 0 9px;
    color: var(--ink);
    font-size: 1.65rem;
}

.sparen-choice-card p {
    color: var(--muted);
    line-height: 1.6;
}


/* =========================================================
   14. LIGONE Bereiche
   ========================================================= */

.sparen-world-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sparen-world-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 8px 26px rgba(28, 63, 35, 0.045);
}

.sparen-world-card > span {
    font-size: 1.8rem;
}

.sparen-world-card h3 {
    margin: 12px 0 8px;
    color: var(--ink);
}

.sparen-world-card p {
    color: var(--muted);
    line-height: 1.55;
}


/* =========================================================
   15. Mission
   ========================================================= */

.sparen-mission {
    padding: 65px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(201, 148, 45, 0.10),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            var(--surface-soft),
            var(--bg) 48%,
            var(--surface)
        );
}

.sparen-mission-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
}

.sparen-mission-inner img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.sparen-mission-inner h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.sparen-mission-inner p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}


/* =========================================================
   16. Footer
   ========================================================= */

.sparen-footer {
    padding: 31px 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.sparen-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

.sparen-footer-inner strong {
    margin-right: auto;
    color: var(--ink);
}

.sparen-footer-inner a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
}

.sparen-footer-inner a:hover,
.sparen-footer-inner a:focus-visible {
    color: var(--green);
}


/* =========================================================
   17. Tablet
   ========================================================= */

@media (max-width: 930px) {

    .sparen-navigation {
        display: none;
    }

    .sparen-account {
        margin-left: auto;
    }

    .sparen-hero-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .sparen-visual {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    .sparen-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .sparen-step-line {
        display: none;
    }

    .sparen-request-grid,
    .sparen-world-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sparen-form-layout {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   18. Smartphone
   ========================================================= */

@media (max-width: 650px) {

    .sparen-container,
    .sparen-message {
        width: calc(100% - 22px);
    }

    .sparen-nav {
        min-height: 64px;
    }

    .sparen-brand img {
        width: 38px;
        height: 38px;
    }

    .sparen-account {
        padding: 7px 11px;
        font-size: 0.84rem;
    }

    .sparen-hero {
        padding: 44px 0 37px;
    }

    .sparen-hero h1 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .sparen-actions {
        flex-direction: column;
    }

    .sparen-actions .sparen-button {
        width: 100%;
    }

    .sparen-quick-inner {
        display: block;
    }

    .sparen-quick-inner > strong {
        display: block;
        margin-bottom: 10px;
    }

    .sparen-quick-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .sparen-quick-links a {
        flex: 0 0 auto;
    }

    .sparen-section {
        padding: 47px 0;
    }

    .sparen-steps,
    .sparen-request-grid,
    .sparen-stats,
    .sparen-choice-grid,
    .sparen-world-grid,
    .sparen-form-grid {
        grid-template-columns: 1fr;
    }

    .sparen-step {
        text-align: left;
    }

    .sparen-step-icon {
        margin-left: 0;
    }

    .sparen-field-full {
        grid-column: auto;
    }

    .sparen-form {
        padding: 18px;
    }

    .sparen-mission-inner {
        grid-template-columns: 1fr;
    }

    .sparen-mission-inner img {
        width: 62px;
        height: 62px;
    }
}
/* ==========================================================================
   LIGONE AI V3
   Pixelnäher am freigegebenen Layout.
   ALTEN .ligone-ai-* BLOCK KOMPLETT DURCH DIESEN BLOCK ERSETZEN.
   ========================================================================== */

.ligone-ai-page {
    --lai-blue: #0b3d73;
    --lai-bright: #0789eb;
    --lai-text: #173b62;
    --lai-muted: #60758a;
    --lai-line: #d9e7f1;
    --lai-soft: #eff8fd;
    --lai-card: #f5fbff;
    margin: 0;
    overflow-x: hidden;
    background: #ffffff;
    color: var(--lai-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

.ligone-ai-page *,
.ligone-ai-page *::before,
.ligone-ai-page *::after {
    box-sizing: border-box;
}

.ligone-ai-page img {
    max-width: 100%;
}

.ligone-ai-shell {
    width: min(calc(100% - 28px), 1220px);
    margin-inline: auto;
}

/* HEADER */

.ligone-ai-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e4edf4;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
}

.ligone-ai-nav {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ligone-ai-brand {
    width: 142px;
    flex: 0 0 auto;
}

.ligone-ai-brand img,
.ligone-ai-footer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.ligone-ai-navigation {
    display: none;
}

.ligone-ai-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ligone-ai-nav-search {
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--lai-blue);
    text-decoration: none;
    font-size: 1.35rem;
}

.ligone-ai-login {
    min-height: 39px;
    padding: 8px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lai-bright);
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
}

/* HERO */

.ligone-ai-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #e4eff7;
    background:
        radial-gradient(circle at 84% 38%, rgba(251,218,149,.30) 0, rgba(251,218,149,0) 19%),
        linear-gradient(112deg, #ffffff 0%, #f8fcff 43%, #eaf7ff 76%, #dceffa 100%);
}

.ligone-ai-hero::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -1px;
    height: 70px;
    opacity: .55;
    background:
        linear-gradient(153deg, transparent 0 33%, #cce5f3 34% 44%, transparent 45%) 0 0/33% 100% repeat-x;
    pointer-events: none;
}

.ligone-ai-hero-inner {
    position: relative;
    z-index: 1;
    min-height: 405px;
    padding: 34px 0 42px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 20px;
}

.ligone-ai-hero-copy {
    position: relative;
    z-index: 2;
}

.ligone-ai-eyebrow {
    margin: 0 0 8px;
    color: #204c76;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.ligone-ai-hero h1 {
    margin: 0;
    max-width: 640px;
    color: #0a315f;
    font-size: clamp(2rem, 9.2vw, 3.45rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 700;
}

.ligone-ai-hero h1 strong {
    color: #0a315f;
    font-weight: 700;
}

.ligone-ai-lead {
    margin: 8px 0 17px;
    color: #123d69;
    font-size: clamp(1.05rem, 4.8vw, 1.5rem);
    font-weight: 700;
}

.ligone-ai-prompt {
    width: min(100%, 620px);
    min-height: 57px;
    padding: 6px 7px 6px 17px;
    display: grid;
    grid-template-columns: 24px 1fr 44px;
    align-items: center;
    gap: 9px;
    border: 1px solid #cbdfea;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24,75,112,.10);
}

.ligone-ai-prompt-search {
    color: #1685d8;
    font-size: 1.35rem;
}

.ligone-ai-prompt-text {
    color: #5b7185;
    font-size: .91rem;
}

.ligone-ai-prompt-arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lai-bright);
    color: #fff;
    font-size: 1.25rem;
}

.ligone-ai-pills {
    max-width: 620px;
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ligone-ai-pills a {
    padding: 6px 11px;
    border: 1px solid #d5e4ee;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #315674;
    text-decoration: none;
    font-size: .69rem;
    font-weight: 700;
}

.ligone-ai-meta {
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #315879;
    font-size: .73rem;
}

.ligone-ai-hero-art {
    display: none;
}

/* SIX CARDS */

.ligone-ai-categories {
    position: relative;
    z-index: 3;
    padding: 13px 0 24px;
    background: #fff;
}

.ligone-ai-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ligone-ai-category-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 13px rgba(23,63,95,.07);
}

.ligone-ai-photo {
    position: relative;
    height: 105px;
    overflow: visible;
    background: linear-gradient(145deg,#dbeef8,#f2f8fb);
}

.ligone-ai-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ligone-ai-photo > span {
    position: absolute;
    left: 13px;
    bottom: -17px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #dff2ff;
    color: #0b75c5;
    box-shadow: 0 3px 8px rgba(19,69,105,.13);
    font-size: .95rem;
}

.ligone-ai-category-copy {
    position: relative;
    min-height: 118px;
    padding: 24px 12px 13px;
}

.ligone-ai-category-copy h2 {
    margin: 0 18px 6px 0;
    color: #113a65;
    font-size: .9rem;
    line-height: 1.16;
}

.ligone-ai-category-copy p {
    margin: 0;
    color: #61778b;
    font-size: .7rem;
    line-height: 1.35;
}

.ligone-ai-category-copy > a {
    position: absolute;
    right: 11px;
    bottom: 10px;
    color: #1187dc;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
}

/* EXAMPLE */

.ligone-ai-example {
    padding-bottom: 13px;
}

.ligone-ai-example-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}

.ligone-ai-learning-card,
.ligone-ai-human-card,
.ligone-ai-wide-card,
.ligone-ai-principles-box {
    overflow: hidden;
    border: 1px solid #dce9f1;
    border-radius: 13px;
    background: #f5fbff;
}

.ligone-ai-learning-card {
    display: grid;
    grid-template-columns: 1fr;
}

.ligone-ai-learning-photo {
    min-height: 180px;
    background: #e5f1f7;
}

.ligone-ai-learning-photo img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: block;
    object-fit: cover;
}

.ligone-ai-learning-main {
    padding: 19px;
}

.ligone-ai-small-blue {
    margin: 0;
    color: #1687d8;
    font-size: .72rem;
}

.ligone-ai-learning-main h2 {
    margin: 2px 0 17px;
    color: #0870c2;
    font-size: 1.22rem;
    line-height: 1.15;
}

.ligone-ai-learning-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.ligone-ai-step {
    position: relative;
    min-width: 0;
    padding-left: 31px;
}

.ligone-ai-step b {
    position: absolute;
    left: 0;
    top: -2px;
    color: #1188dc;
    font-size: 1.35rem;
}

.ligone-ai-step-icon {
    display: block;
    margin-bottom: 3px;
    color: #1289dc;
    font-size: 1rem;
}

.ligone-ai-step strong,
.ligone-ai-step small {
    display: block;
}

.ligone-ai-step strong {
    color: #173f69;
    font-size: .76rem;
    line-height: 1.2;
}

.ligone-ai-step small {
    margin-top: 2px;
    color: #6a7d8e;
    font-size: .66rem;
    line-height: 1.25;
}

.ligone-ai-human-card {
    padding: 22px;
    background: linear-gradient(145deg,#f8fcff,#e7f5fd);
}

.ligone-ai-human-card h2 {
    margin: 0;
    color: #11385f;
    font-size: 1.18rem;
    line-height: 1.16;
}

.ligone-ai-human-card h3 {
    margin: 3px 0 12px;
    color: #087dcc;
    font-size: 1.05rem;
    line-height: 1.2;
}

.ligone-ai-human-card p {
    margin: 0 0 13px;
    color: #4d6980;
    font-size: .8rem;
}

.ligone-ai-human-lines {
    margin: 10px 0 16px;
}

.ligone-ai-human-lines strong {
    display: block;
    color: #087fd2;
    font-size: .94rem;
    line-height: 1.35;
}

.ligone-ai-human-card > a {
    display: inline-flex;
    padding: 8px 15px;
    border-radius: 999px;
    background: #0789e8;
    color: #fff;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 700;
}

/* TWO WIDE CARDS */

.ligone-ai-duo {
    padding-bottom: 13px;
}

.ligone-ai-duo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}

.ligone-ai-wide-card {
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(110deg,#f7fcff,#edf8fd);
}

.ligone-ai-wide-copy {
    padding: 20px;
}

.ligone-ai-wide-copy h2 {
    margin: 0;
    color: #113b66;
    font-size: 1.2rem;
}

.ligone-ai-wide-copy h3 {
    margin: 2px 0 10px;
    color: #2a5274;
    font-size: .83rem;
}

.ligone-ai-wide-copy p {
    margin: 0 0 14px;
    color: #5b7185;
    font-size: .76rem;
}

.ligone-ai-wide-copy a {
    color: #087fd2;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 700;
}

.ligone-ai-wide-card > img {
    width: 100%;
    height: 175px;
    display: block;
    object-fit: cover;
}

/* PRINCIPLES */

.ligone-ai-principles {
    padding-bottom: 13px;
}

.ligone-ai-principles-box {
    padding: 19px 18px;
    background: #f4faff;
}

.ligone-ai-principles-box > h2 {
    margin: 0 0 16px;
    color: #103962;
    font-size: 1.2rem;
}

.ligone-ai-principles-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px 10px;
    text-align: center;
}

.ligone-ai-principles-row > div {
    min-width: 0;
}

.ligone-ai-principles-row span {
    display: block;
    min-height: 29px;
    color: #0c86d8;
    font-size: 1.35rem;
}

.ligone-ai-principles-row p {
    margin: 3px 0 0;
    color: #355875;
    font-size: .67rem;
    line-height: 1.25;
}

.ligone-ai-constitution {
    grid-column: 1 / -1;
    align-self: center;
    padding-top: 12px;
    border-top: 1px solid #cfe0eb;
    color: #087fd2;
    text-decoration: none;
    font-size: .73rem;
    font-weight: 700;
}

/* CLOSING */

.ligone-ai-closing {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg,#dceefa,#f9fcff);
}

.ligone-ai-closing > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ligone-ai-closing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(246,251,255,.54);
}

.ligone-ai-closing-copy {
    position: relative;
    z-index: 2;
    padding: 25px 14px;
    text-align: center;
}

.ligone-ai-closing h2 {
    margin: 0;
    color: #0b3562;
    font-size: clamp(1.45rem,7vw,2.35rem);
    letter-spacing: -.025em;
}

.ligone-ai-closing p {
    margin: 1px 0 0;
    color: #17466f;
    font-size: .9rem;
}

/* FOOTER */

.ligone-ai-footer {
    padding: 17px 0;
    border-top: 1px solid #e2ecf3;
    background: #fff;
}

.ligone-ai-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.ligone-ai-footer-logo {
    width: 125px;
}

.ligone-ai-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 13px;
}

.ligone-ai-footer nav a {
    color: #385a76;
    text-decoration: none;
    font-size: .68rem;
}

/* 600+ */

@media (min-width: 600px) {
    .ligone-ai-shell {
        width: min(calc(100% - 40px), 1220px);
    }

    .ligone-ai-category-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .ligone-ai-learning-steps {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ligone-ai-principles-row {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

/* DESKTOP */

@media (min-width: 900px) {
    .ligone-ai-nav {
        min-height: 72px;
    }

    .ligone-ai-brand {
        width: 170px;
    }

    .ligone-ai-navigation {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: clamp(15px,2vw,28px);
    }

    .ligone-ai-navigation a {
        position: relative;
        color: #294b68;
        text-decoration: none;
        font-size: .74rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .ligone-ai-navigation a.active {
        color: #087fd2;
    }

    .ligone-ai-navigation a.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -16px;
        height: 2px;
        background: #0789e8;
    }

    .ligone-ai-nav-search {
        display: flex;
    }

    .ligone-ai-hero-inner {
        min-height: 405px;
        padding: 32px 0 39px;
        grid-template-columns: 1.03fr .97fr;
        gap: 30px;
    }

    .ligone-ai-hero-art {
        min-height: 315px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ligone-ai-hero-logo {
        width: min(100%, 450px);
    }

    .ligone-ai-hero-logo img {
        display: block;
        width: 100%;
        height: auto;
        mix-blend-mode: multiply;
    }

    .ligone-ai-hero-art p {
        margin: -2px 0 0 115px;
        color: #174e7e;
        font-size: 1rem;
        font-style: italic;
        font-weight: 700;
        transform: rotate(-4deg);
    }

    .ligone-ai-category-grid {
        grid-template-columns: repeat(6,minmax(0,1fr));
        gap: 10px;
    }

    .ligone-ai-photo {
        height: 112px;
    }

    .ligone-ai-category-copy {
        min-height: 113px;
    }

    .ligone-ai-example-grid {
        grid-template-columns: minmax(0,2.08fr) minmax(260px,.92fr);
    }

    .ligone-ai-learning-card {
        grid-template-columns: .82fr 1.68fr;
    }

    .ligone-ai-learning-photo,
    .ligone-ai-learning-photo img {
        min-height: 100%;
    }

    .ligone-ai-learning-main {
        padding: 18px 18px 15px;
    }

    .ligone-ai-learning-steps {
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: 8px;
    }

    .ligone-ai-step {
        padding-left: 0;
    }

    .ligone-ai-step b {
        position: static;
        display: block;
        margin-bottom: 3px;
    }

    .ligone-ai-human-card {
        padding: 24px 25px;
    }

    .ligone-ai-duo-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ligone-ai-wide-card {
        min-height: 220px;
        grid-template-columns: 1.13fr .87fr;
        align-items: stretch;
    }

    .ligone-ai-wide-card > img {
        height: 100%;
        min-height: 220px;
    }

    .ligone-ai-principles-box {
        padding: 18px 22px 20px;
    }

    .ligone-ai-principles-row {
        grid-template-columns: repeat(6,minmax(0,1fr)) minmax(135px,.95fr);
        align-items: center;
        gap: 8px;
    }

    .ligone-ai-constitution {
        grid-column: auto;
        min-height: 60px;
        padding: 9px 0 9px 18px;
        display: flex;
        align-items: center;
        border-top: 0;
        border-left: 1px solid #c7dbe8;
        text-align: left;
    }

    .ligone-ai-closing {
        min-height: 165px;
    }

    .ligone-ai-footer-inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .ligone-ai-footer-logo {
        width: 145px;
    }
}

/* LARGE DESKTOP */

@media (min-width: 1200px) {
    .ligone-ai-hero h1 {
        font-size: 3.35rem;
    }

    .ligone-ai-category-copy h2 {
        font-size: .94rem;
    }

    .ligone-ai-category-copy p {
        font-size: .72rem;
    }
}

/* VERY SMALL PHONES */

@media (max-width: 359px) {
    .ligone-ai-shell {
        width: min(calc(100% - 18px), 1220px);
    }

    .ligone-ai-brand {
        width: 122px;
    }

    .ligone-ai-login {
        padding-inline: 11px;
        font-size: .76rem;
    }

    .ligone-ai-category-grid,
    .ligone-ai-principles-row {
        grid-template-columns: 1fr;
    }

    .ligone-ai-constitution {
        grid-column: auto;
    }
}

/* MELDESTELLE: zentrale Layout- und Mobilregeln */
.compact-layout {
    max-width: 980px;
    padding-top: clamp(18px, 3vw, 36px);
    padding-bottom: 56px;
}

.compact-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
    align-items: center;
    gap: clamp(22px, 4vw, 48px);
    margin: 0 0 22px;
    padding: clamp(22px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: linear-gradient(135deg, #fff 0%, #edf5e9 100%);
    box-shadow: var(--shadow);
}

.compact-banner > div {
    min-width: 0;
}

.compact-banner h1 {
    margin: 10px 0 12px;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}

.compact-banner p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.compact-hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(23, 35, 26, 0.16);
}

.compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
}

.compact-section,
.compact-card {
    margin: 20px 0;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 12px 34px rgba(28, 63, 35, 0.07);
}

.compact-section h2,
.compact-card h2 {
    margin-top: 0;
}

.compact-search {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 14px;
}

.compact-search p,
.compact-card .form-row {
    display: grid;
    gap: 7px;
    margin: 0;
}

.compact-layout input:not([type="checkbox"]),
.compact-layout select,
.compact-layout textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbd8ce;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
}

.compact-layout textarea {
    min-height: 130px;
    resize: vertical;
}

.compact-layout input:focus-visible,
.compact-layout select:focus-visible,
.compact-layout textarea:focus-visible,
.compact-layout button:focus-visible,
.compact-layout a:focus-visible {
    outline: 3px solid rgba(34, 107, 58, 0.28);
    outline-offset: 2px;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--green-dark);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.chip[aria-current="true"] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.muted-small {
    color: var(--muted);
    font-size: 0.88rem;
}

.compact-layout details > summary {
    cursor: pointer;
    font-weight: 750;
}

.compact-layout details[open] > summary {
    margin-bottom: 12px;
}

.compact-card form > p {
    margin-block: 14px;
}

@media (max-width: 700px) {
    .compact-layout {
        width: min(calc(100% - 24px), 980px);
        padding-top: 12px;
        padding-bottom: 36px;
    }

    .compact-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 20px;
    }

    /* Auf dem Smartphone das vollständige Bild ohne Beschnitt zeigen; die
       Überschrift steht direkt darunter als lesbarer HTML-Text. */
    .compact-banner > img {
        order: -1;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
        border-radius: 14px;
    }

    .compact-banner h1 {
        margin: 4px 0 8px;
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .compact-actions .button {
        flex: 1 1 145px;
    }

    .compact-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .compact-section,
    .compact-card {
        margin: 14px 0;
        padding: 18px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .compact-layout,
    .compact-layout * {
        scroll-behavior: auto;
    }
}
/* LIGONE IDEENWELT – diesen Block ans ENDE der bestehenden ligone.css anfuegen */
.ideenwelt-page .iw-hero{padding:45px 0;background:linear-gradient(130deg,#f5faef,#fff)}
.ideenwelt-page .iw-hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px}
.ideenwelt-page .iw-hero h1{font-size:clamp(2.3rem,5vw,4.2rem);margin:14px 0}
.ideenwelt-page .iw-hero h1 em{font-style:normal;color:var(--green)}
.ideenwelt-page .iw-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px}
.ideenwelt-page .iw-lead{font-size:1.18rem;color:var(--muted)}
.ideenwelt-page .iw-small{color:var(--muted);font-size:.88rem}
.ideenwelt-page .iw-main{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start;padding-top:42px;padding-bottom:75px}
.ideenwelt-page .iw-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:25px;box-shadow:0 9px 25px rgba(20,70,35,.045);margin-bottom:18px}
.ideenwelt-page .iw-panel h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.ideenwelt-page .iw-panel h3{font-size:1.35rem;line-height:1.35}
.ideenwelt-page .iw-panel label{display:block;margin:14px 0 6px}
.ideenwelt-page .iw-panel input,.ideenwelt-page .iw-panel select,.ideenwelt-page .iw-panel textarea{display:block;width:100%;border:1px solid #b9c9bc;border-radius:12px;padding:12px;font:inherit;background:#fff;color:var(--ink)}
.ideenwelt-page .iw-panel textarea{min-height:110px}
.ideenwelt-page .iw-panel button{margin-top:12px}
.ideenwelt-page .iw-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--muted)}
.ideenwelt-page .iw-tag{padding:4px 10px;border-radius:20px;background:var(--surface-soft);color:var(--green-dark);font-weight:700}
.ideenwelt-page .iw-body{overflow-wrap:anywhere}
.ideenwelt-page .iw-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.ideenwelt-page .iw-actions .button{min-height:40px;padding:8px 12px;font-size:.86rem}
.ideenwelt-page .iw-actions button{margin:0}
.ideenwelt-page .iw-comment{background:var(--bg);padding:12px;border-radius:12px;margin:9px 0}
.ideenwelt-page .iw-comment small{display:block;color:var(--muted)}
.ideenwelt-page .iw-comment p{margin:6px 0;overflow-wrap:anywhere}
.ideenwelt-page .iw-trap{position:absolute;left:-10000px}
.ideenwelt-page .iw-report{margin-top:15px;color:var(--muted);font-size:.9rem}
.ideenwelt-page .iw-toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:999;background:#fff;padding:14px 20px;border-radius:14px;box-shadow:0 10px 40px #0002;width:min(500px,calc(100% - 24px))}
.ideenwelt-page .iw-ok{border:2px solid var(--green)}
.ideenwelt-page .iw-error{border:2px solid var(--danger)}
.ideenwelt-page .iw-nav{display:flex;gap:15px;flex-wrap:wrap}
.ideenwelt-page .iw-nav a{text-decoration:none;font-weight:700}
@media(max-width:850px){.ideenwelt-page .iw-hero-grid,.ideenwelt-page .iw-main{grid-template-columns:1fr}.ideenwelt-page .iw-hero{padding:24px 0}.ideenwelt-page .iw-hero-grid{gap:15px}}
@media(max-width:580px){.ideenwelt-page .iw-nav{display:none}.ideenwelt-page .iw-panel{padding:18px}.ideenwelt-page .iw-actions{gap:5px}.ideenwelt-page .iw-actions .button{font-size:.8rem}}

/* LIGONE IDEENWELT – gezielte Layoutkorrektur 2026-10-12 */
.ideenwelt-page .iw-hero-grid > *{min-width:0}
.ideenwelt-page .iw-hero img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.ideenwelt-page .iw-nav{align-items:center;gap:clamp(12px,2vw,26px)}
.ideenwelt-page .iw-nav a{white-space:nowrap}
.ideenwelt-page .iw-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ideenwelt-page .iw-panel form{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.ideenwelt-page .iw-panel form > label{display:block;margin:10px 0 0}
.ideenwelt-page .iw-panel form > input,.ideenwelt-page .iw-panel form > select,.ideenwelt-page .iw-panel form > textarea{min-width:0;max-width:100%;margin:0}
.ideenwelt-page .iw-panel form > button{justify-self:start}
.ideenwelt-page .iw-panel .iw-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.ideenwelt-page .iw-panel h2,.ideenwelt-page .iw-feed h2{font-size:clamp(1.65rem,2.8vw,2.5rem);line-height:1.15}
.ideenwelt-page .iw-feed{min-width:0}
.ideenwelt-page .iw-actions form{display:block}
.ideenwelt-page .iw-actions form button{margin:0}
.ideenwelt-page .iw-comments form{margin-top:14px}
.ideenwelt-page .iw-comments label input,.ideenwelt-page .iw-comments label textarea{margin-top:6px}
@media(max-width:900px){.ideenwelt-page .iw-main{grid-template-columns:1fr}}
@media(max-width:600px){
 .ideenwelt-page .header-inner{min-height:58px}
 .ideenwelt-page .brand{font-size:.92rem;letter-spacing:0}
 .ideenwelt-page .iw-hero{padding:18px 0 24px}
 .ideenwelt-page .iw-hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
 .ideenwelt-page .iw-lead{font-size:1rem;line-height:1.55}
 .ideenwelt-page .iw-hero img{width:100%;height:auto;object-fit:contain;border-radius:14px}
 .ideenwelt-page .iw-main{padding-top:22px;padding-bottom:42px;gap:22px}
 .ideenwelt-page .iw-panel{padding:18px}
 .ideenwelt-page .iw-panel form > button{width:100%;justify-self:stretch}
}