/* =====================================================================
   zapf-apple.css  –  Apple-Stil für alle Unterseiten von zapf-finanz.de
   Stand 20.10.2026. Wird nach den bisherigen Styles geladen und überschreibt sie.
   Alle Regeln hängen an body.ap, damit sie sicher greifen.
   ===================================================================== */
:root{
  /* Apple-Stil, dunkel (seit 20.10.2026 die ganze Website) */
  --bg:#000000; --bg2:#161617; --tile2:#232325; --tx:#f5f5f7; --mut:#a1a1a6; --body2:#d2d2d7; --line:#38383a;
  --acc:#b23a36; --acc2:#9c2b28; --hl:#f0716b; --link:#f0716b; --nav:rgba(22,22,23,.78);
  --hero1:#000000; --hero2:#170909; --notice:#2a1513; --field:#1c1c1e; --res:#232325;
  /* alte Variablen der Seiten auf die neuen Farben umbiegen */
  --navy:#f5f5f7; --navy2:#000000; --gold:#f0716b; --gold2:#f0716b; --redlight:#f0a29e;
  --anthra:#000000; --anthra2:#000000; --bord:#f0716b; --bord-d:#f0716b; --bord-l:#f0a29e;
  color-scheme:dark;
}
html{scroll-padding-top:64px}
body.ap{margin:0;background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;padding-top:0}
.ap a{color:var(--link)}
.ap h1,.ap h2,.ap h3,.ap h4{letter-spacing:-.03em}
.ap .wrap{max-width:1024px;padding:0 22px}

/* ---------- Navigation ---------- */
.ap .anav{position:sticky;top:0;z-index:900;background:var(--nav);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.ap .anav .w{max-width:1024px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:28px;height:52px;position:relative}
.ap .abrand{display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--tx);text-decoration:none}
.ap .roof{width:28px;height:28px;flex:none} .ap .roof path{fill:var(--acc)} .ap .roof rect{fill:var(--bg)}
.ap .lg{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.ap .lg b{font-size:19px;font-weight:600;letter-spacing:.34em;margin-right:-.34em;color:var(--tx)}
.ap .lg small{display:flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:.04em;color:var(--mut);margin-top:3px;white-space:nowrap}
.ap .lg small::before,.ap .lg small::after{content:"";width:12px;height:1px;background:var(--acc)}
.ap .alinks{display:flex;gap:26px;align-items:center}
.ap .alinks a{color:var(--tx);font-size:13px;opacity:.85;text-decoration:none}
.ap .alinks a:hover,.ap .alinks a[aria-current]{opacity:1}
.ap .alinks a[aria-current]{font-weight:600}
.ap .apill{display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:#fff !important;border-radius:980px;
  padding:5px 14px;font-size:13px;opacity:1 !important;text-decoration:none}
.ap .apill:hover{background:var(--acc2)}
.ap #amt{position:absolute;opacity:0;pointer-events:none}
.ap .aburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;margin-right:-10px}
.ap .aburger span,.ap .aburger span::before,.ap .aburger span::after{display:block;width:17px;height:1.5px;background:var(--tx);border-radius:1px;position:relative}
.ap .aburger span::before,.ap .aburger span::after{content:"";position:absolute;left:0}
.ap .aburger span::before{top:-6px} .ap .aburger span::after{top:6px}
@media (max-width:833px){
  .ap .aburger{display:flex}
  .ap .alinks{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);padding:8px 22px 22px;border-bottom:1px solid var(--line)}
  .ap .alinks a{font-size:24px;font-weight:600;padding:8px 0;opacity:1}
  .ap .alinks .apill{font-size:17px;padding:11px 22px;margin-top:12px}
  .ap #amt:checked~.alinks{display:flex}
}

/* ---------- Buttons ---------- */
.ap .btn{background:var(--acc);border-radius:980px;padding:11px 22px;font-weight:400;font-size:17px;border:0;
  font-family:inherit;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.ap .btn:hover{background:var(--acc2)}
.ap .btn.dark,.ap .btn.ghost{background:transparent;color:var(--hl) !important;border:1px solid var(--hl) !important}
.ap .btn.dark .ic-svg,.ap .btn.ghost .ic-svg{stroke:var(--hl) !important}
.ap .btn.dark:hover,.ap .btn.ghost:hover{background:var(--acc);color:#fff !important}
.ap .btn.dark:hover .ic-svg{stroke:#fff !important}

/* ---------- Hero ---------- */
.ap .hero{background:linear-gradient(180deg,var(--hero1) 0%,var(--hero2) 100%);color:var(--tx);text-align:center;padding:88px 0 72px}
.ap .hero::before,.ap .hero::after{display:none}
.ap .hero .kicker{color:var(--hl);text-transform:none;letter-spacing:-.01em;font-size:17px;font-weight:600;margin:0 0 10px}
.ap .hero h1,.ap .hero.small h1{font-size:clamp(36px,6.4vw,68px);line-height:1.06;letter-spacing:-.045em;font-weight:700;
  max-width:880px;margin:0 auto 16px}
.ap .hero h1 em{color:var(--mut);font-style:normal}
.ap .hero p.lead{color:var(--mut);font-size:clamp(19px,2.2vw,23px);line-height:1.38;max-width:680px;margin:0 auto 30px;letter-spacing:-.015em}
.ap .hero .cta-row{justify-content:center;align-items:center}
.ap .hero.small{padding:72px 0 56px}

/* ---------- Kennzahlen ---------- */
.ap .stats{background:var(--bg);border-bottom:1px solid var(--line)}
.ap .stat{border-left:0;padding:44px 12px}
.ap .stat b{font-size:clamp(36px,4.6vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--tx)}
.ap .stat b i{color:var(--hl)}
.ap .stat span{font-size:15px;color:var(--mut)}

/* ---------- Sektionen ---------- */
.ap section.sec{padding:88px 0}
.ap section.sec.alt{background:var(--bg2)}
.ap .tline{display:none}
.ap .sec h2.t{font-size:clamp(30px,4.4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.08;color:var(--tx);margin:0 0 12px}
.ap .sec p.sub{font-size:21px;color:var(--mut);letter-spacing:-.015em;max-width:700px;margin:0 0 40px}
.ap .ic-svg{stroke-width:1.5}

/* Karten */
.ap .cards{gap:20px}
.ap .card{background:var(--bg2);border:0;border-radius:28px;padding:36px;box-shadow:none}
.ap .sec.alt .card{background:var(--tile2)}
.ap .card .ic{color:var(--hl)}
.ap .card h3{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--tx);margin:6px 0 8px}
.ap .card p{color:var(--mut);font-size:17px}
.ap .card a.more{color:var(--hl);font-weight:400;font-size:17px}

/* Schritte */
.ap .steps{gap:16px}
.ap .step{background:var(--bg2);border:0;border-radius:22px;padding:28px 22px}
.ap .sec.alt .step{background:var(--tile2)}
.ap .step::before{position:static;display:block;width:auto;height:auto;background:none;border-radius:0;
  color:var(--hl) !important;font-size:15px;font-weight:600;margin-bottom:22px;justify-content:flex-start}
.ap .step h4{font-size:19px;letter-spacing:-.02em;color:var(--tx);margin:0 0 6px}
.ap .step p{color:var(--mut);font-size:15px}

/* Vorteile */
.ap .feat{gap:40px 32px}
.ap .feat .f{background:transparent;border:0;padding:0;border-radius:0}
.ap .feat .f b{font-size:21px;letter-spacing:-.02em;color:var(--tx)}
.ap .feat .f p{color:var(--mut);font-size:17px;line-height:1.47}

/* Tabellen */
.ap .wofl-table{border:0;border-radius:22px;background:var(--bg2);overflow:hidden}
.ap .sec.alt .wofl-table{background:var(--tile2)}
.ap .wofl-row{border-bottom:1px solid var(--line);font-size:17px;padding:16px 22px}
.ap .wofl-row:nth-child(2n){background:transparent}
.ap .wofl-head{background:transparent !important;color:var(--mut);font-weight:600;font-size:13px}
.ap .wofl-head span{color:var(--mut)}
.ap .wofl-row b{color:var(--tx)}

/* Hinweise */
.ap .kundenhinweis,.ap .notice{border:0;border-radius:18px;background:var(--bg2);padding:18px 22px;font-size:17px;color:var(--tx)}
.ap .notice{background:var(--notice)}

/* Bankpartner */
.ap .pcard{border:0;background:var(--bg2);border-radius:18px}
.ap .sec.alt .pcard{background:var(--tile2)}
.ap .pcard:hover{box-shadow:none;transform:none;background:var(--tile2)}
.ap .pcard .mono{background:var(--tile2);border:0;border-radius:12px}
.ap .pcard .pname{color:var(--tx);font-weight:600}

/* Rechner */
.ap .rtabs{border-bottom:0;gap:10px}
.ap .rtab{border:1px solid var(--line);border-radius:980px;font-weight:400;color:var(--tx);font-size:15px}
.ap .rtab[aria-selected="true"]{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.ap .calc .in{border:0;background:var(--bg2);border-radius:28px;padding:32px}
.ap .calc label{color:var(--tx);font-weight:600;font-size:15px}
.ap .calc input,.ap .calc select,.ap .cform input,.ap .cform select,.ap .cform textarea{
  border:1px solid var(--line);border-radius:12px;background:var(--field);font-size:17px;padding:12px 14px;font-family:inherit;color:var(--tx)}
.ap .calc input:focus,.ap .calc select:focus,.ap .cform input:focus,.ap .cform select:focus,.ap .cform textarea:focus{
  outline:none;border-color:var(--hl);box-shadow:0 0 0 4px rgba(156,43,40,.15)}
.ap .calc .seg button{border:1px solid var(--line);border-radius:12px;font-weight:400;color:var(--tx)}
.ap .calc .seg button[aria-pressed="true"]{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.ap .calc .res{background:var(--res);border-radius:28px;padding:32px}
.ap .calc .res h3{color:#fff}
.ap .calc .r b{color:#fff}
.ap .calc .r.big b{color:var(--hl)}
.ap .calc .val{color:var(--hl)}

/* Bewertungen */
.ap .pe-consent{border:0;background:var(--bg2);border-radius:22px}
.ap .pe-consent.pe-live{background:transparent}
.ap .trust{background:var(--bg2);color:var(--tx);padding:72px 0}
.ap .trust .starline{color:var(--hl)}
.ap .trust b{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em}
.ap .trust p{color:var(--mut);font-size:19px}

/* Team */
.ap .team{gap:56px}
.ap .team img{border:0;box-shadow:none;border-radius:28px}

/* CTA-Band */
.ap .ctaband{background:var(--bg2);padding:88px 0}
.ap .ctaband h2{color:var(--tx);font-size:clamp(30px,4.4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.08;margin:0 0 12px}
.ap .ctaband p{color:var(--mut);opacity:1;font-size:21px;max-width:620px;margin:0 auto 30px}
.ap .ctaband .btn.dark{background:var(--acc) !important;color:#fff !important;border:0 !important}
.ap .ctaband .btn.dark .ic-svg{stroke:#fff !important}
.ap .ctaband .btn.dark[style]{background:transparent !important;color:var(--hl) !important;border:1px solid var(--hl) !important;font-weight:400 !important}

/* Fließtext */
.ap .prose{max-width:760px;margin:0 auto}
.ap .prose p,.ap .prose li{font-size:17px;line-height:1.6}
.ap .prose h2,.ap .legal h2{border-left:0;padding-left:0;font-size:clamp(26px,3.2vw,32px);font-weight:700;letter-spacing:-.035em;
  line-height:1.12;color:var(--tx);margin:52px 0 14px}
.ap .prose h2:first-child{margin-top:0}
.ap .prose h3,.ap .legal h3{font-size:21px;color:var(--tx);margin:28px 0 8px}
.ap .prose ul{color:var(--body2)}
.ap .prose .hl{border-left:0;background:var(--bg2);border-radius:18px;padding:20px 24px;font-size:17px}
.ap .sec.alt .prose .hl{background:var(--tile2)}
.ap .prose .hl b{color:var(--tx)}
.ap .legal p,.ap .legal li{font-size:15px;color:var(--body2)}

/* FAQ */
.ap details.faq{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}
.ap details.faq summary{padding:22px 40px 22px 0;font-size:19px;font-weight:600;color:var(--tx);letter-spacing:-.02em}
.ap details.faq summary::after{right:4px;color:var(--mut);font-weight:300;font-size:28px}
.ap details.faq[open] summary{border-bottom:0;background:transparent}
.ap details.faq .a{padding:0 0 22px;color:var(--mut);font-size:17px}
.ap .faq-cat{border-bottom:0;font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.035em;margin:56px 0 8px;display:block}

/* Downloads, Kontakt */
.ap .dl{border:0;background:var(--bg2);border-radius:22px}
.ap .sec.alt .dl{background:var(--tile2)}
.ap .dl h3,.ap .cinfo .box h3{color:var(--tx);font-size:19px}
.ap .cform{border:0;background:var(--bg2);border-radius:28px;padding:32px}
.ap .cform label{color:var(--tx);font-weight:600;font-size:15px}
.ap .cinfo .box{border:0;background:var(--bg2);border-radius:22px}
.ap .breadcrumb{font-size:12px;color:var(--mut)}

/* ---------- Blog ---------- */
.ap .zb-page{font-family:inherit;color:var(--tx);padding:40px 22px 72px;max-width:980px;line-height:1.55}
.ap .zb-page .zb-hero{background:none;color:var(--tx);text-align:center;border-radius:0;padding:32px 0 20px;margin-bottom:28px}
.ap .zb-page .zb-hero::before{display:none}
.ap .zb-page .zb-hero h1{color:var(--tx);font-size:clamp(36px,6vw,64px);line-height:1.06;letter-spacing:-.045em;font-weight:700}
.ap .zb-page .zb-hero h1 em{color:var(--mut)}
.ap .zb-page .zb-hero p{color:var(--mut);font-size:21px;margin:0 auto;max-width:680px}
.ap .zb-page .zb-tags{justify-content:center}
.ap .zb-page .zb-tag{background:var(--bg2);color:var(--tx);border:0;border-radius:980px;font-weight:400;font-size:15px;padding:8px 16px}
.ap .zb-page .zb-featured,.ap .zb-page .zb-article{background:var(--bg2);border:0;border-radius:28px;box-shadow:none}
.ap .zb-page .zb-featured-img{height:320px}
.ap .zb-page .zb-featured-body{padding:36px}
.ap .zb-page .zb-featured h2{color:var(--tx);font-size:clamp(26px,3.4vw,36px);letter-spacing:-.035em;line-height:1.12}
.ap .zb-page .zb-article-header{background:transparent;border-bottom:1px solid var(--line);padding:24px 32px}
.ap .zb-page .zb-article-header h2{color:var(--tx);font-size:24px;letter-spacing:-.03em}
.ap .zb-page .zb-article-content{padding:24px 32px 32px}
.ap .zb-page .zb-article-body{font-size:17px;color:var(--body2)}
.ap .zb-page .zb-article-body h2{border-left:0;padding-left:0;color:var(--tx);font-size:21px}
.ap .zb-page .zb-article-body strong,.ap .zb-page .zb-highlight strong{color:var(--tx)}
.ap .zb-page .zb-highlight{background:var(--tile2);border-left:0;border-radius:16px;font-size:16px}
.ap .zb-page .zb-cat-badge{background:var(--acc);border-radius:980px;text-transform:none;letter-spacing:0;font-weight:600;font-size:12px;padding:4px 12px}
.ap .zb-page .zb-date{color:var(--mut)}
.ap .zb-page .zb-news-card{background:var(--bg2);border:0;border-radius:22px;box-shadow:none}
.ap .zb-page .zb-news-card h3{color:var(--tx);font-size:19px}
.ap .zb-page .zb-news-card p{color:var(--mut);font-size:15px}
.ap .zb-page .zb-cta{background:var(--bg2);border-radius:28px;padding:56px 32px}
.ap .zb-page .zb-cta h2{color:var(--tx);font-size:clamp(28px,4vw,40px);letter-spacing:-.04em}
.ap .zb-page .zb-cta p{color:var(--mut);opacity:1;font-size:19px}
.ap .zb-page .zb-cta-btn,.ap .zb-page .zb-link-btn{background:var(--acc);border-radius:980px;font-weight:400;font-size:15px;padding:10px 20px}
.ap .zb-page .zb-cta-btn{font-size:17px;padding:12px 24px}
.ap .zb-page .zb-cta-btn.outline{background:transparent;border:1px solid var(--hl);color:var(--hl) !important}
.ap .zb-page .zb-link-btn.gold{background:var(--tx)}

/* ---------- Terminseite ---------- */
.ap .zt-page{font-family:inherit;padding:40px 22px 72px;max-width:1024px;line-height:1.55}
.ap .zt-hero{background:none;color:var(--tx);text-align:center;border-radius:0;padding:32px 0 20px;margin-bottom:28px}
.ap .zt-hero::before{display:none}
.ap .zt-hero h1{font-size:clamp(36px,6vw,64px);line-height:1.06;letter-spacing:-.045em;font-weight:700}
.ap .zt-hero h1 em{color:var(--mut)}
.ap .zt-hero p{color:var(--mut);font-size:21px;margin:0 auto;max-width:680px}
.ap .zt-card{background:var(--bg2);border:0;border-radius:28px;box-shadow:none;padding:32px}
.ap .zt-booking{background:var(--bg2);border:1px solid var(--line);padding:18px}
.ap .zt-card h2{border-left:0;padding-left:0;color:var(--tx);font-size:24px;letter-spacing:-.03em}
.ap .zt-btn{background:var(--acc);border-radius:980px;font-weight:400;font-size:17px}
.ap .zt-btn:hover{background:var(--acc2)}
.ap .zt-note{background:var(--tile2);border-left:0;border-radius:16px}

/* ---------- Footer ---------- */
.ap .afoot{background:var(--bg2);color:var(--mut);font-size:12px;line-height:1.4;padding:24px 0 32px}
.ap .afoot .w{max-width:1024px;margin:0 auto;padding:0 22px}
.ap .afoot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.ap .afoot h3{color:var(--tx);font-size:12px;font-weight:600;margin:0 0 10px;letter-spacing:0}
.ap .afoot ul{list-style:none;margin:0;padding:0} .ap .afoot li{margin:0 0 8px}
.ap .afoot a{color:var(--mut);text-decoration:none} .ap .afoot a:hover{color:var(--tx);text-decoration:underline}
.ap .afoot .note{margin:0;padding:0 0 16px;border-bottom:1px solid var(--line)}
.ap .afoot .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:16px}
.ap .afoot .legal a+a::before{content:"|";margin:0 8px;color:var(--line)}
@media (max-width:700px){.ap .afoot .cols{grid-template-columns:1fr 1fr}}

.ap a:focus-visible,.ap button:focus-visible,.ap summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

/* Nachtrag: Button-Links behalten weiße Schrift */
.ap .zt-btn,.ap .zt-btn:hover,.ap .zt-btn:visited{color:#fff}

/* ---------- Dunkel: restliche fest verdrahtete Hellfarben der alten Seiten ---------- */
.ap .dl p,.ap .zt-info ul,.ap .zt-note,.ap .zb-page .zb-highlight,.ap .zb-page .zb-article-body ul,.ap .zb-page .zb-article-body ol{color:var(--body2)}
.ap .zt-fallback,.ap .zb-page .zb-date,.ap .hero .hero-note,.ap .breadcrumbs{color:var(--mut)}
.ap .zb-page{color:var(--tx)}
.ap .rtab{background:transparent}
.ap .rtab:hover{color:var(--hl);border-color:var(--hl)}
.ap .calc .seg button{background:var(--field)}
.ap .calc input[type="range"]{background:linear-gradient(to right,var(--hl) 0%,var(--hl) var(--pct,50%),#3a3a3c var(--pct,50%),#3a3a3c 100%) !important;border:0}
.ap .calc .note,.ap .calc .cnote{color:var(--mut)}
.ap .wr-adr,.ap .wr-sum{background:var(--bg2)}
.ap .costs caption{color:var(--tx)}
.ap .skip{background:var(--bg);color:var(--tx)}
.ap .dl-lock{background:var(--tile2);border-color:var(--line)}
.ap .pe-consent .pe-note{color:var(--mut)}
.ap hr{border-color:var(--line)}
.ap table{color:var(--tx)}
.ap ::placeholder{color:#6e6e73}

/* ---------- Ortsseiten (Krefeld-Aufbau) ---------- */
.ap .breadcrumbs{color:var(--mut);font-size:13px;margin:0 0 18px}
.ap .breadcrumbs a{color:var(--mut)}
.ap .hero .hero-note{color:var(--mut);font-size:15px;margin:22px 0 0}
.ap .quicknav{justify-content:center;gap:10px;padding:22px 22px 0}
.ap .quicknav a{color:var(--tx);background:var(--bg2);border-radius:980px;padding:8px 16px;font-size:14px;text-decoration:none}
.ap .quicknav a:hover{background:var(--tile2)}
.ap .sec .intro{color:var(--mut);font-size:19px;max-width:700px;margin:0 0 36px}
.ap .center .intro{margin-left:auto;margin-right:auto}
.ap .stat a{color:var(--mut)}
.ap .team .team-links{gap:12px 24px;margin-top:18px}
.ap .team .cap{color:var(--mut)}
.ap .table-wrap{border:0;border-radius:22px;background:var(--bg2);margin:24px 0}
.ap .sec.alt .table-wrap{background:var(--tile2)}
.ap .costs{font-size:16px}
.ap .costs caption{background:transparent;color:var(--mut);font-weight:600;font-size:13px;padding:18px 22px 6px}
.ap .costs th,.ap .costs td{border-bottom:1px solid var(--line);padding:14px 22px;color:var(--tx)}
.ap .costs tr:nth-child(even){background:transparent}
.ap .costs tr.total th,.ap .costs tr.total td{color:var(--hl);font-weight:700}
.ap .source-note{color:var(--mut);font-size:13px}
.ap .section-actions{gap:14px;align-items:center}
.ap .review{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.025em;line-height:1.3;color:var(--tx);max-width:760px}
.ap .review cite{color:var(--mut);font-size:14px;letter-spacing:0}
.ap .prose .zk-note{color:var(--mut)}
.ap .hero .btn.ghost{background:transparent}