/* ---------------------------------------------------------------------------
   Landingpage im Erscheinungsbild der Handwerkskammer Berlin.

   Das folgende CSS ist unverändert aus der Vorlage
   Material/gruendung-uebersicht (3).html übernommen. Einzige Änderung: der
   @import auf fonts.googleapis.com ist entfernt, die Schriften liegen lokal
   in assets/css/fonts-hwk.css.

   Eigene Ergänzungen stehen im Abschnitt am Ende und sind als solche markiert.

   Developed by Toni Sciacca - mail@tonisciacca.com
--------------------------------------------------------------------------- */

:root{--navy:#003b7a;--blue:#0969bb;--sky:#dbeafa;--pale:#f4f7fb;--ink:#15263b;--orange:#f58220;--line:#c7d7e9;--white:#fff;}
    *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--pale);color:var(--ink);font-family:Barlow,Arial,sans-serif;font-size:16px;line-height:1.48}.wrap{max-width:1180px;margin:auto;padding:0 28px}
    .utility{height:59px;background:#c7dcf4;color:var(--navy);font-size:13px}.utility .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;font-weight:700;line-height:1.02}.brand-mark{font-family:'Barlow Condensed';font-size:34px;letter-spacing:-2px}.brand-mark small{font-size:10px;letter-spacing:0;display:inline-block;margin-left:1px}.brand-sign{border-left:2px solid var(--navy);padding-left:10px;font-size:12px}.tools{display:flex;gap:13px;align-items:center}.tools a{color:inherit;text-decoration:none}.tools a:not(:last-child)::after{content:'|';margin-left:13px;color:#6c94c2}
    .nav{background:var(--navy);color:white;box-shadow:0 2px 5px #001d4030;position:relative;z-index:2}.nav .wrap{display:flex;height:48px;align-items:center}.nav a{color:white;text-decoration:none;font-weight:600;font-size:15px;padding:14px 19px;white-space:nowrap}.nav a.active{background:#3c6ba1}.nav a:hover{background:#174f8c}.nav .search{margin-left:auto;font-size:22px;padding-right:0}
    .crumb{color:#5b6e83;font-size:14px;padding:23px 0 12px}.crumb a{color:var(--navy);text-decoration:none}.hero{background:white;border-top:1px solid #e1e9f2}.hero-grid{display:grid;grid-template-columns:1fr 390px;min-height:310px}.hero-copy{padding:45px 0 44px;position:relative}.eyebrow{font-size:14px;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.055em;margin-bottom:12px}.hero h1{font:700 clamp(42px,5vw,64px)/.95 'Barlow Condensed';letter-spacing:-.02em;margin:0 0 20px;color:var(--ink);max-width:640px}.hero p{font-size:20px;line-height:1.38;max-width:670px;margin:0}.hero-art{background:linear-gradient(148deg,#d8eafa 0%,#9bc8ee 54%,#1c72ba 55%,#075493 100%);position:relative;overflow:hidden}.hero-art:before{content:'';position:absolute;width:270px;height:270px;border:32px solid #ffffff80;border-radius:50%;right:-105px;top:-20px}.hero-art:after{content:'START';position:absolute;bottom:26px;left:28px;color:#fff;font:700 82px/.8 'Barlow Condensed';letter-spacing:-3px;opacity:.9}.tool-lines{position:absolute;top:55px;left:0;width:100%;height:4px;background:var(--orange);box-shadow:0 35px 0 #fff,0 70px 0 #fff;opacity:.9}
    main{padding:55px 0 0}.intro{display:grid;grid-template-columns:245px 1fr;gap:42px;padding-bottom:24px}.intro h2{margin:0;font:700 30px/1 'Barlow Condensed';color:var(--navy)}.intro p{font-size:19px;margin:0;max-width:710px}.section-label{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 18px}.section-label:after{content:'';height:1px;background:#9db9d8;flex:1}
    .topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:54px}.topic{background:white;border:1px solid #d7e2ee;min-height:204px;padding:25px 24px 22px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}.topic:hover{transform:translateY(-4px);box-shadow:0 9px 22px #113b6920;border-color:#74a9d8}.topic .num{font:600 15px 'Barlow Condensed';color:var(--orange);letter-spacing:.08em;margin-bottom:18px}.topic h3{font:700 27px/1.03 'Barlow Condensed';margin:0;max-width:270px}.topic .arrow{margin-top:auto;padding-top:21px;color:var(--blue);font-weight:700;font-size:15px}.topic .arrow span{font-size:22px;vertical-align:-1px;margin-left:7px}
    .contact{background:var(--navy);color:#fff;position:relative;overflow:hidden}.contact:after{content:'?';position:absolute;right:7%;bottom:-70px;font:700 280px/1 'Barlow Condensed';color:#2166a4}.contact-inner{padding:42px 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:34px;position:relative;z-index:1}.contact .eyebrow{color:#98c9f0;margin-bottom:7px}.contact h2{font:700 38px/1 'Barlow Condensed';margin:0 0 8px}.contact p{font-size:18px;margin:0}.btn{background:var(--orange);color:#17293b;text-decoration:none;font-weight:700;padding:15px 22px;display:inline-flex;align-items:center;gap:18px;white-space:nowrap}.btn:hover{background:#ffa250}.btn strong{font-size:23px}
    .newsletter{background:#d7e8f8;padding:49px 0 55px}.newsletter-inner{display:grid;grid-template-columns:245px 1fr auto;gap:36px;align-items:center}.newsletter h2{margin:0;font:700 35px/.96 'Barlow Condensed';color:var(--navy)}.newsletter p{font-size:18px;margin:0;max-width:520px}.text-link{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:3px;white-space:nowrap}
    footer{background:#132b47;color:white;padding:31px 0;font-size:14px}footer .wrap{display:flex;justify-content:space-between;gap:20px}footer a{color:white;text-decoration:none;margin-left:16px}
    @media(max-width:780px){.utility{height:auto;padding:13px 0}.tools{display:none}.nav{overflow:auto}.nav .wrap{padding:0}.nav a{font-size:14px;padding:14px 12px}.nav a:nth-of-type(n+4){display:none}.hero-grid{grid-template-columns:1fr}.hero-copy{padding:38px 0}.hero-art{height:110px}.hero-art:after{font-size:58px;bottom:13px}.hero h1{font-size:48px}.hero p{font-size:18px}.intro{grid-template-columns:1fr;gap:15px}.topics{grid-template-columns:1fr}.topic{min-height:164px}.contact-inner,.newsletter-inner{grid-template-columns:1fr;gap:20px}.contact-inner{padding:35px 0}.contact h2{font-size:35px}.newsletter{padding:38px 0}footer .wrap{flex-direction:column}.brand{padding-left:4px}}
    .detail-page{display:none;background:#fff}.detail-page:target{display:block}.detail-page:target~main{display:none}.detail-hero{border-bottom:1px solid var(--line);padding:25px 0 47px}.back{display:inline-flex;gap:8px;color:var(--navy);font-weight:700;text-decoration:none;font-size:15px;margin:8px 0 18px}.trail{font-size:13px;color:#5b6e83;margin:0 0 23px}.trail a{color:var(--navy);text-decoration:none}.level{display:inline-block;background:var(--sky);padding:4px 8px;color:var(--navy);font-size:12px;font-weight:700;letter-spacing:.05em;margin-bottom:14px}.detail-hero h1{font:700 clamp(42px,5vw,60px)/.96 'Barlow Condensed';margin:0;max-width:720px}.detail-hero .lead{font-size:20px;line-height:1.4;max-width:740px;margin:20px 0 0}.detail-content{padding:48px 0 0}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px}.detail-copy h2{font:700 32px/1 'Barlow Condensed';color:var(--navy);margin:0 0 16px}.detail-copy p{font-size:18px;margin:0 0 30px}.questions{list-style:none;padding:0;margin:0 0 42px;border-top:1px solid var(--line)}.questions li{padding:16px 0 16px 28px;border-bottom:1px solid var(--line);font-size:18px;position:relative}.questions li:before{content:'→';position:absolute;left:0;color:var(--orange);font-weight:700}.support-list{padding-left:20px;font-size:18px;margin:0 0 46px}.support-list li{margin:0 0 12px}.detail-aside{border-top:5px solid var(--orange);background:var(--sky);padding:25px}.detail-aside h2{font:700 27px/1 'Barlow Condensed';margin:0 0 11px;color:var(--navy)}.detail-aside p{margin:0 0 21px}.detail-contact{margin-top:48px;padding:30px;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:22px}.detail-contact h2{font:700 32px/1 'Barlow Condensed';margin:0 0 7px}.detail-contact p{margin:0;font-size:17px}.related{margin-top:56px;padding:43px 0 55px;background:var(--pale)}.related h2{font:700 31px/1 'Barlow Condensed';margin:0 0 21px;color:var(--navy)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.related a{display:block;background:#fff;border:1px solid var(--line);padding:19px;text-decoration:none;color:var(--ink);font:600 20px/1.1 'Barlow Condensed'}.related a:hover{border-color:var(--blue);color:var(--blue)}.next-step{border-left:5px solid var(--orange);background:var(--pale);padding:24px;margin:30px 0 10px}.next-step h2{margin-bottom:8px}.next-step p{margin-bottom:17px}
    @media(max-width:780px){.detail-grid{grid-template-columns:1fr;gap:30px}.detail-contact{display:block}.detail-contact .btn{margin-top:20px}.related-grid{grid-template-columns:1fr}.detail-hero{padding-bottom:35px}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* =========================================================================
   Ergänzungen für die Landingpage des Rechtsformfinders.
   Nutzen ausschließlich die Farben und Schriften der Vorlage.
   ========================================================================= */

/* Aufklappbare Sätze - der Baustein fehlt in der Vorlage */
.saetze { border-top: 1px solid var(--line); margin: 0 0 8px; }
.satz { border-bottom: 1px solid var(--line); background: #fff; }
.satz > summary {
    list-style: none;
    cursor: pointer;
    padding: 21px 54px 21px 22px;
    position: relative;
    font: 700 23px/1.15 'Barlow Condensed', Arial, sans-serif;
    color: var(--ink);
}
.satz > summary::-webkit-details-marker { display: none; }
.satz > summary:after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font: 700 30px/1 'Barlow Condensed', Arial, sans-serif;
    color: var(--orange);
}
.satz[open] > summary:after { content: '–'; }
.satz > summary:hover { color: var(--navy); }
.satz > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.satz[open] > summary { color: var(--navy); background: var(--pale); }
.satz-body { padding: 0 22px 24px; background: var(--pale); }
.satz-antwort {
    font: 700 19px/1.35 Barlow, Arial, sans-serif;
    color: var(--navy);
    margin: 0 0 10px;
    padding-left: 15px;
    border-left: 4px solid var(--orange);
}
.satz-text { font-size: 17px; line-height: 1.55; margin: 0; max-width: 700px; }

/* Kartenraster für Hinweise und Fragen */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kachel {
    background: #fff;
    border: 1px solid #d7e2ee;
    padding: 24px 23px;
    display: flex;
    flex-direction: column;
}
.kachel h3 { font: 700 22px/1.08 'Barlow Condensed', Arial, sans-serif; margin: 0 0 9px; }
.kachel p { font-size: 16px; margin: 0; color: #33455c; }
.kachel .marke {
    font: 600 14px 'Barlow Condensed', Arial, sans-serif;
    color: var(--orange);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.kachel-zusatz { font-size: 15px; color: #5b6e83; margin: 10px 0 0; }

/* Zweispaltige Gegenüberstellung */
.gegen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gegen-block { background: #fff; border: 1px solid #d7e2ee; border-top: 4px solid var(--navy); padding: 22px 23px; }
.gegen-block h3 { font: 700 21px/1.1 'Barlow Condensed', Arial, sans-serif; margin: 0 0 8px; color: var(--navy); }
.gegen-block p { font-size: 16px; margin: 0; }
.gegen-block .zusatz { font-size: 15px; color: #5b6e83; margin-top: 9px; }

/* Aufzählung mit Pfeilmarke, wie .questions in der Vorlage */
.punkte { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); max-width: 760px; }
.punkte li { padding: 17px 0 17px 30px; border-bottom: 1px solid var(--line); position: relative; }
.punkte li:before { content: '→'; position: absolute; left: 0; top: 17px; color: var(--orange); font-weight: 700; }
.punkte b { display: block; font: 700 20px/1.1 'Barlow Condensed', Arial, sans-serif; margin-bottom: 4px; }
.punkte span { font-size: 16px; color: #33455c; }
.punkte .zusatz { display: block; font-size: 15px; color: #5b6e83; margin-top: 6px; }

/* Zitatblock */
.stimmen { display: grid; gap: 20px; max-width: 780px; }
.stimme { border-left: 4px solid var(--sky); padding-left: 20px; }
.stimme b { display: block; font: 700 21px/1.12 'Barlow Condensed', Arial, sans-serif; margin-bottom: 5px; }
.stimme p { font-size: 17px; margin: 0; color: #33455c; }
.stimme .zusatz { color: var(--navy); font-weight: 600; margin-top: 6px; }

/* Vertrauensbelege im Abschlussblock */
.belege {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    font-size: 15px;
    color: #cfe2f5;
}
.belege li:before { content: '✓'; color: var(--orange); font-weight: 700; margin-right: 8px; }
.btn-hell {
    background: #fff;
    color: var(--navy);
    text-decoration: none;
    font-weight: 700;
    padding: 15px 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.btn-hell:hover { background: var(--sky); }
.cta-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 780px) {
    .kacheln, .gegen { grid-template-columns: 1fr; }
    .satz > summary { font-size: 20px; padding: 17px 46px 17px 16px; }
    .satz-body { padding: 0 16px 20px; }
    .cta-reihe { flex-direction: column; align-items: stretch; }
    .cta-reihe .btn, .cta-reihe .btn-hell { justify-content: center; }
}

/* =========================================================================
   Werkzeugseiten im selben Erscheinungsbild wie die Landingpage.
   Fragebogen, Auswertung und Vergleich verwenden dieselben Farben, Schriften
   und Kanten wie die Vorlage gruendung-uebersicht: Barlow und Barlow
   Condensed, Navy und Orange, scharfe Ecken.
   ========================================================================= */

.werkzeug { background: #fff; border-top: 1px solid #e1e9f2; padding: 0 0 60px; }
.werkzeug-innen { max-width: 780px; }

/* Fortschritt */
.fortschritt { height: 6px; background: var(--sky); margin-bottom: 34px; }
.fortschritt > i { display: block; height: 100%; background: var(--orange); transition: width .25s ease; }

/* Frage */
.frage-nr {
    font: 700 14px 'Barlow Condensed', Arial, sans-serif;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .075em;
    margin-bottom: 10px;
}
.frage-text {
    font: 700 clamp(28px, 3.4vw, 40px)/1.04 'Barlow Condensed', Arial, sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 12px;
    max-width: 680px;
}
.frage-hinweis { font-size: 18px; color: #33455c; margin: 0 0 26px; max-width: 660px; }

/* Antworten als Karten, angelehnt an .topic der Vorlage */
.antworten { display: grid; gap: 12px; margin: 0 0 8px; }
.antwort {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #d7e2ee;
    padding: 19px 22px;
    font-family: Barlow, Arial, sans-serif;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.antwort:hover, .antwort:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 9px 22px #113b6920;
    border-color: #74a9d8;
}
.antwort:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.antwort b { display: block; font: 600 21px/1.18 'Barlow Condensed', Arial, sans-serif; }
.antwort span { display: block; font-size: 15px; color: #5b6e83; margin-top: 3px; }
.antwort.gewaehlt { border-color: var(--orange); border-left-width: 5px; background: #fffaf4; }
.antwort.gewaehlt b { color: var(--navy); }

/* Formularfelder */
.feld {
    width: 100%;
    max-width: 560px;
    font-family: Barlow, Arial, sans-serif;
    font-size: 17px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #c7d7e9;
    padding: 13px 15px;
}
.feld:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
textarea.feld { min-height: 110px; resize: vertical; }

/* Aktionszeile */
.schritt-aktionen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.zurueck-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--navy);
    font-weight: 700;
    font-size: 15px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: Barlow, Arial, sans-serif;
}
.zurueck-link:hover { text-decoration: underline; }
.fehler-hinweis {
    border-left: 5px solid #c0392b;
    background: #fdf2f0;
    padding: 14px 18px;
    margin: 0 0 22px;
    font-size: 16px;
}
.fortschritt-text { font-size: 14px; color: #5b6e83; margin: 26px 0 0; }

/* Auswertung */
.empfehlung { border-top: 5px solid var(--orange); background: var(--sky); padding: 30px; margin-bottom: 34px; }
.empfehlung .marke {
    font: 700 14px 'Barlow Condensed', Arial, sans-serif;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .075em;
}
.empfehlung h2 { font: 700 clamp(30px,3.6vw,42px)/1 'Barlow Condensed', Arial, sans-serif; margin: 8px 0 10px; color: var(--ink); }
.empfehlung p { font-size: 18px; margin: 0; }
.eignung { font: 700 46px/1 'Barlow Condensed', Arial, sans-serif; color: var(--navy); }

.liste-schlicht { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.liste-schlicht li { padding: 15px 0 15px 28px; border-bottom: 1px solid var(--line); position: relative; font-size: 17px; }
.liste-schlicht li:before { content: '→'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.liste-schlicht b { display: block; font: 700 19px/1.15 'Barlow Condensed', Arial, sans-serif; margin-bottom: 3px; }
.liste-schlicht span { font-size: 16px; color: #33455c; }

.rangliste { width: 100%; border-collapse: collapse; font-size: 16px; }
.rangliste th, .rangliste td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rangliste thead th {
    font: 700 15px 'Barlow Condensed', Arial, sans-serif;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid #9db9d8;
}
.rangliste .platz { font: 700 22px 'Barlow Condensed', Arial, sans-serif; color: var(--orange); width: 46px; }
.rangliste tr.beste td { background: var(--sky); }
.rangliste tr.raus { opacity: .6; }
.rangliste .name { font: 700 19px/1.1 'Barlow Condensed', Arial, sans-serif; }

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
.paar-block { border-top: 4px solid var(--navy); background: var(--pale); padding: 20px 22px; }
.paar-block.gut { border-top-color: #2f7d46; }
.paar-block.schlecht { border-top-color: var(--orange); }
.paar-block h3 { font: 700 20px/1 'Barlow Condensed', Arial, sans-serif; margin: 0 0 10px; color: var(--navy); }
.paar-block ul { margin: 0; padding-left: 20px; font-size: 16px; }
.paar-block li { margin-bottom: 7px; }

.merkmale { width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 30px; }
.merkmale td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.merkmale td:first-child { color: #5b6e83; width: 42%; }
.merkmale td:last-child { font-weight: 600; }

.balkenzelle { min-width: 140px; }
.balkenzelle .schiene { height: 8px; background: var(--sky); margin-bottom: 5px; }
.balkenzelle .schiene i { display: block; height: 100%; background: var(--navy); }
.balkenzelle .schiene.stark i { background: #2f7d46; }
.balkenzelle .zahl { font-size: 13px; color: #5b6e83; }

.wahlknoepfe { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.wahlknoepfe button {
    padding: 10px 17px;
    border: 1px solid #c7d7e9;
    background: #fff;
    font-family: Barlow, Arial, sans-serif;
    font-size: 15px;
    cursor: pointer;
    color: var(--ink);
}
.wahlknoepfe button.sel { border-color: var(--orange); background: #fffaf4; font-weight: 600; }

.einstieg-karten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

@media (max-width: 780px) {
    .paar, .einstieg-karten { grid-template-columns: 1fr; }
    .frage-text { font-size: 27px; }
    .schritt-aktionen { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
    .schritt-aktionen .btn { justify-content: center; }
    .rangliste { font-size: 14px; }
}