/* hotels-pension.de – Stylesheet (Theme »Metropole«, Entwurf B, Skyline »Lichter II«)
   Generiert aus dem freigegebenen Design-Prototyp. Fonts lokal (DSGVO). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/archivo-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/public-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/public-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/public-sans-latin-700-normal.woff2') format('woff2')}

/* ============ RESET & BASIS ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;}
img{max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;color:var(--head,var(--ink))}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============ METROPOLE – GRUNDWERTE ============ */
body{
  --font-display:"Archivo",sans-serif; --font-body:"Public Sans",sans-serif;
  --bg:#FAF6EE; --surface:#FFFFFF; --ink:#2B2825; --muted:#7C766B;
  --brand:#274E8D; --brand-ink:#F6F1E4; --accent:#C13B33; --accent-soft:#F1E6D8;
  --line:#E0D8C6; --radius:4px; --head:#274E8D;
}

/* ============ HEADER ============ */
.site-header{background:var(--brand);color:var(--brand-ink)}
.site-header .wrap{display:flex;align-items:center;gap:26px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.logo{font-family:var(--font-display);font-size:24px;color:var(--brand-ink);letter-spacing:.5px}
.logo:hover{text-decoration:none}
.logo small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.75}
.mainnav{display:flex;gap:20px;margin-left:auto;align-items:center}
.mainnav a{color:var(--brand-ink);font-weight:600;font-size:15px;opacity:.9}
.mainnav a:hover{opacity:1;text-decoration:none}
.btn{display:inline-block;font-weight:700;border-radius:var(--radius);padding:10px 20px;border:2px solid transparent;cursor:pointer;font-family:var(--font-body);font-size:15px}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn-cta{background:var(--accent);color:#fff}
.btn-ghost{border-color:var(--brand);color:var(--brand);background:transparent}

.navtoggle{display:none;margin-left:auto;background:transparent;border:2px solid var(--brand-ink);color:var(--brand-ink);border-radius:10px;padding:7px 14px;font:700 15px var(--font-body);cursor:pointer}
@media(max-width:820px){
  .navtoggle{display:inline-flex;flex:0 0 auto}
  .site-header .wrap{padding-top:12px;padding-bottom:12px}
  .logo{flex:1 1 auto;min-width:0;font-size:20px}
  .logo small{font-size:9px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mainnav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:6px;margin-left:0;padding:10px 0 4px}
  .mainnav.open{display:flex}
  .mainnav a{padding:11px 14px;background:rgba(255,255,255,.09);border-radius:10px}
  .mainnav a.btn-cta{text-align:center;margin-top:4px}
}
/* ============ HERO / SUCHE ============ */
.eyebrow{font:700 11px var(--font-body);letter-spacing:3px;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.hero h1 em{font-style:normal}
.hero{padding:52px 0 38px;text-align:center}
.hero h1{font-size:clamp(28px,4.4vw,44px);margin-bottom:10px}
.hero p{color:var(--muted);max-width:640px;margin:0 auto 26px;font-size:17px}
.searchbox{display:flex;max-width:620px;margin:0 auto;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.searchbox input{flex:1;border:0;padding:15px 18px;font:16px var(--font-body);background:transparent;color:var(--ink);min-width:0}
.searchbox input:focus{outline:none}
.searchbox button{border:0;background:var(--brand);color:var(--brand-ink);padding:0 26px;font:700 15px var(--font-body);cursor:pointer}
.hero .hint{font-size:13px;color:var(--muted);margin-top:10px}

/* ============ A–Z-LEISTE ============ */
.azbar{display:grid;grid-template-columns:repeat(26,1fr);gap:6px;margin:8px 0 34px}
.azbar a{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font:700 14px var(--font-body);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--brand)}
.azbar a:hover{background:var(--brand);color:var(--brand-ink);text-decoration:none}
@media(max-width:760px){.azbar{grid-template-columns:repeat(13,1fr)}}

/* ============ SEKTIONEN & KACHELN ============ */
section.block{padding:26px 0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.sec-head h2{font-size:24px}
.sec-head .all{margin-left:auto;font-size:14px;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;transition:transform .15s}
.tile:hover{text-decoration:none;transform:translateY(-2px)}
.tile b{color:var(--head);font-size:15px}
.count{font:700 12px var(--font-body);background:var(--accent-soft);color:var(--brand);border-radius:999px;padding:3px 10px;white-space:nowrap}

/* ============ EINTRAGSLISTE ============ */
.entry-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.entry-card h3{font-size:19px;margin-bottom:6px}
.entry-card .meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.entry-card .meta span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:2px}
.badge{display:inline-block;font:700 11px var(--font-body);letter-spacing:1px;text-transform:uppercase;background:var(--accent-soft);color:var(--brand);padding:3px 9px;border-radius:var(--radius);margin-left:10px;vertical-align:3px}
.pagination{display:flex;gap:8px;justify-content:center;margin:26px 0}
.pagination a,.pagination span{min-width:38px;text-align:center;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-weight:700;font-size:14px}
.pagination .cur{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* ============ ORTSSEITE EXTRAS ============ */
.breadcrumbs{font-size:13px;color:var(--muted);padding:16px 0 0}
.breadcrumbs a{color:var(--muted)}
.ortstext{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:18px 0;font-size:15px}
.map-consent{background:var(--accent-soft);border:1px dashed var(--brand);border-radius:var(--radius);padding:34px;text-align:center;margin:20px 0}
.map-consent p{color:var(--muted);font-size:14px;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.chips a:hover{background:var(--brand);color:var(--brand-ink);text-decoration:none}

/* ============ EINTRAGSSEITE ============ */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;margin:22px 0}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.panel h2{font-size:19px;margin-bottom:14px}
.kontakt dt{font:700 12px var(--font-body);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:12px}
.kontakt dd{font-size:16px}
.cta-box{background:var(--brand);color:var(--brand-ink);border-radius:var(--radius);padding:24px;text-align:center}
.cta-box h2{color:var(--brand-ink);font-size:20px;margin-bottom:8px}
.cta-box p{font-size:14px;opacity:.85;margin-bottom:16px}
.report-link{font-size:13px;color:var(--muted);margin-top:16px;display:block}

/* ============ RATGEBER ============ */
.article{max-width:760px;margin:0 auto;padding:30px 0}
.article h1{font-size:clamp(26px,4vw,38px);margin-bottom:8px}
.article .standfirst{color:var(--muted);font-size:17px;margin-bottom:26px}
.article h2{font-size:23px;margin:30px 0 10px}
.article p{margin-bottom:14px;font-size:16px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:0 18px}
.faq summary{font-weight:700;padding:14px 0;cursor:pointer;list-style:none}
.faq summary::before{content:"+";display:inline-block;margin-right:10px;color:var(--accent);font-weight:800}
.faq details[open] summary::before{content:"–"}
.faq details p{padding-bottom:14px}

/* ============ SEO-TEXT & FOOTER ============ */
.seotext{color:var(--muted);font-size:14.5px;columns:2;column-gap:40px;margin:10px 0 30px}
@media(max-width:760px){.seotext{columns:1}}
.linktipps{display:flex;flex-wrap:wrap;gap:10px}
.linktipps a{font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px}
.site-footer{background:var(--brand);color:var(--brand-ink);margin-top:44px;padding:34px 0}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
@media(max-width:760px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h3{color:var(--brand-ink);font-size:16px;margin-bottom:10px}
.site-footer a{color:var(--brand-ink);opacity:.85;font-size:14px;display:block;padding:3px 0}
.site-footer a:hover{opacity:1}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.2);margin-top:26px;padding-top:16px;font-size:13px;opacity:.75;display:flex;gap:18px;flex-wrap:wrap}


body{--skyline:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path fill='%23274E8D' opacity='.3' d='M0 90 V30 V14 H71 V23 H161 V20 H246 V30 H334 V8 H409 V28 H476 V23 H553 V6 H631 V4 H699 V18 H764 V6 H843 V28 H928 V29 H1011 V11 H1091 V24 H1170 V28 H1200 V90 Z'/><g fill='%23F0DFA0' opacity='.35'><rect x='8' y='32' width='3' height='3.5'/><rect x='8' y='44' width='3' height='3.5'/><rect x='20' y='56' width='3' height='3.5'/><rect x='32' y='56' width='3' height='3.5'/><rect x='91' y='29' width='3' height='3.5'/><rect x='103' y='53' width='3' height='3.5'/><rect x='139' y='29' width='3' height='3.5'/><rect x='181' y='38' width='3' height='3.5'/><rect x='181' y='50' width='3' height='3.5'/><rect x='205' y='38' width='3' height='3.5'/><rect x='229' y='26' width='3' height='3.5'/><rect x='254' y='48' width='3' height='3.5'/><rect x='266' y='48' width='3' height='3.5'/><rect x='278' y='48' width='3' height='3.5'/><rect x='326' y='48' width='3' height='3.5'/><rect x='342' y='14' width='3' height='3.5'/><rect x='342' y='38' width='3' height='3.5'/><rect x='354' y='14' width='3' height='3.5'/><rect x='354' y='26' width='3' height='3.5'/><rect x='378' y='14' width='3' height='3.5'/><rect x='402' y='26' width='3' height='3.5'/><rect x='402' y='50' width='3' height='3.5'/><rect x='417' y='34' width='3' height='3.5'/><rect x='484' y='41' width='3' height='3.5'/><rect x='532' y='53' width='3' height='3.5'/><rect x='544' y='41' width='3' height='3.5'/><rect x='561' y='36' width='3' height='3.5'/><rect x='573' y='36' width='3' height='3.5'/><rect x='597' y='48' width='3' height='3.5'/><rect x='609' y='36' width='3' height='3.5'/><rect x='621' y='36' width='3' height='3.5'/><rect x='621' y='48' width='3' height='3.5'/><rect x='651' y='22' width='3' height='3.5'/><rect x='663' y='58' width='3' height='3.5'/><rect x='675' y='10' width='3' height='3.5'/><rect x='687' y='10' width='3' height='3.5'/><rect x='687' y='22' width='3' height='3.5'/><rect x='687' y='34' width='3' height='3.5'/><rect x='707' y='24' width='3' height='3.5'/><rect x='719' y='24' width='3' height='3.5'/><rect x='755' y='36' width='3' height='3.5'/><rect x='755' y='48' width='3' height='3.5'/><rect x='863' y='46' width='3' height='3.5'/><rect x='863' y='58' width='3' height='3.5'/><rect x='899' y='34' width='3' height='3.5'/><rect x='899' y='58' width='3' height='3.5'/><rect x='911' y='46' width='3' height='3.5'/><rect x='936' y='35' width='3' height='3.5'/><rect x='972' y='59' width='3' height='3.5'/><rect x='984' y='47' width='3' height='3.5'/><rect x='1019' y='41' width='3' height='3.5'/><rect x='1019' y='53' width='3' height='3.5'/><rect x='1067' y='29' width='3' height='3.5'/><rect x='1067' y='53' width='3' height='3.5'/><rect x='1079' y='17' width='3' height='3.5'/><rect x='1099' y='42' width='3' height='3.5'/><rect x='1111' y='30' width='3' height='3.5'/></g><path fill='%23274E8D' d='M0 90 V26 H40 V19 H79 V31 H123 V46 H165 V41 H195 V28 H202 V15 H230 V28 H243 V30 H284 V17 H300 L303 10 306 17 H323 V33 H330 V17 H354 V33 H363 V33 H404 V20 H446 V26 H480 V54 L491 39 503 54 V57 L518 46 533 57 V66 H544 V27 L540 23 540 14 547 8 554 14 554 23 550 27 V66 H561 V56 L576 43 591 56 V55 L604 43 617 55 V30 H648 V30 H655 V18 H685 V30 H699 V26 H732 V53 L743 39 755 53 V57 L770 44 785 57 V61 L799 47 813 61 V53 L826 40 840 53 V54 L853 39 867 54 V53 L880 39 894 53 V58 L906 45 919 58 V54 L932 41 945 54 V40 H980 V9 H996 L999 2 1002 9 H1019 V60 L1030 45 1042 60 V54 L1057 41 1072 54 V59 L1083 47 1094 59 V60 L1106 47 1118 60 V54 L1133 42 1148 54 V54 L1160 41 1172 54 V27 H1179 V14 H1200 V27 H1200 H1200 V90 Z'/><g fill='%23F0DFA0'><rect x='5' y='67' width='3.5' height='4.5'/><rect x='5' y='76' width='3.5' height='4.5'/><rect x='13' y='49' width='3.5' height='4.5'/><rect x='13' y='67' width='3.5' height='4.5'/><rect x='13' y='76' width='3.5' height='4.5'/><rect x='21' y='31' width='3.5' height='4.5'/><rect x='21' y='40' width='3.5' height='4.5'/><rect x='21' y='49' width='3.5' height='4.5'/><rect x='21' y='58' width='3.5' height='4.5'/><rect x='21' y='76' width='3.5' height='4.5'/><rect x='29' y='31' width='3.5' height='4.5'/><rect x='29' y='40' width='3.5' height='4.5'/><rect x='29' y='49' width='3.5' height='4.5'/><rect x='29' y='67' width='3.5' height='4.5'/><rect x='29' y='76' width='3.5' height='4.5'/><rect x='15' y='80' width='6' height='4'/><rect x='45' y='33' width='3.5' height='4.5'/><rect x='45' y='42' width='3.5' height='4.5'/><rect x='45' y='60' width='3.5' height='4.5'/><rect x='45' y='69' width='3.5' height='4.5'/><rect x='45' y='78' width='3.5' height='4.5'/><rect x='53' y='33' width='3.5' height='4.5'/><rect x='53' y='42' width='3.5' height='4.5'/><rect x='53' y='51' width='3.5' height='4.5'/><rect x='53' y='78' width='3.5' height='4.5'/><rect x='61' y='24' width='3.5' height='4.5'/><rect x='61' y='33' width='3.5' height='4.5'/><rect x='61' y='42' width='3.5' height='4.5'/><rect x='61' y='51' width='3.5' height='4.5'/><rect x='61' y='60' width='3.5' height='4.5'/><rect x='61' y='69' width='3.5' height='4.5'/><rect x='61' y='78' width='3.5' height='4.5'/><rect x='69' y='24' width='3.5' height='4.5'/><rect x='69' y='33' width='3.5' height='4.5'/><rect x='69' y='42' width='3.5' height='4.5'/><rect x='69' y='69' width='3.5' height='4.5'/><rect x='44' y='80' width='6' height='4'/><rect x='55' y='80' width='6' height='4'/><rect x='66' y='80' width='6' height='4'/><rect x='84' y='54' width='3.5' height='4.5'/><rect x='84' y='63' width='3.5' height='4.5'/><rect x='92' y='36' width='3.5' height='4.5'/><rect x='92' y='72' width='3.5' height='4.5'/><rect x='100' y='36' width='3.5' height='4.5'/><rect x='100' y='54' width='3.5' height='4.5'/><rect x='100' y='63' width='3.5' height='4.5'/><rect x='108' y='63' width='3.5' height='4.5'/><rect x='108' y='72' width='3.5' height='4.5'/><rect x='83' y='80' width='6' height='4'/><rect x='94' y='80' width='6' height='4'/><rect x='128' y='69' width='3.5' height='4.5'/><rect x='136' y='51' width='3.5' height='4.5'/><rect x='152' y='60' width='3.5' height='4.5'/><rect x='152' y='69' width='3.5' height='4.5'/><rect x='127' y='80' width='6' height='4'/><rect x='149' y='80' width='6' height='4'/><rect x='170' y='46' width='3.5' height='4.5'/><rect x='170' y='55' width='3.5' height='4.5'/><rect x='170' y='64' width='3.5' height='4.5'/><rect x='170' y='73' width='3.5' height='4.5'/><rect x='178' y='55' width='3.5' height='4.5'/><rect x='186' y='46' width='3.5' height='4.5'/><rect x='180' y='80' width='6' height='4'/><rect x='207' y='38' width='3.5' height='4.5'/><rect x='207' y='47' width='3.5' height='4.5'/><rect x='215' y='29' width='3.5' height='4.5'/><rect x='215' y='38' width='3.5' height='4.5'/><rect x='215' y='56' width='3.5' height='4.5'/><rect x='215' y='65' width='3.5' height='4.5'/><rect x='215' y='74' width='3.5' height='4.5'/><rect x='206' y='80' width='6' height='4'/><rect x='248' y='44' width='3.5' height='4.5'/><rect x='256' y='71' width='3.5' height='4.5'/><rect x='264' y='44' width='3.5' height='4.5'/><rect x='264' y='71' width='3.5' height='4.5'/><rect x='272' y='53' width='3.5' height='4.5'/><rect x='272' y='71' width='3.5' height='4.5'/><rect x='247' y='80' width='6' height='4'/><rect x='269' y='80' width='6' height='4'/><rect x='289' y='22' width='3.5' height='4.5'/><rect x='289' y='49' width='3.5' height='4.5'/><rect x='289' y='67' width='3.5' height='4.5'/><rect x='289' y='76' width='3.5' height='4.5'/><rect x='297' y='49' width='3.5' height='4.5'/><rect x='297' y='58' width='3.5' height='4.5'/><rect x='305' y='22' width='3.5' height='4.5'/><rect x='305' y='31' width='3.5' height='4.5'/><rect x='305' y='40' width='3.5' height='4.5'/><rect x='305' y='49' width='3.5' height='4.5'/><rect x='305' y='58' width='3.5' height='4.5'/><rect x='305' y='67' width='3.5' height='4.5'/><rect x='305' y='76' width='3.5' height='4.5'/><rect x='313' y='22' width='3.5' height='4.5'/><rect x='313' y='31' width='3.5' height='4.5'/><rect x='313' y='40' width='3.5' height='4.5'/><rect x='313' y='49' width='3.5' height='4.5'/><rect x='313' y='58' width='3.5' height='4.5'/><rect x='313' y='76' width='3.5' height='4.5'/><rect x='288' y='80' width='6' height='4'/><rect x='335' y='22' width='3.5' height='4.5'/><rect x='335' y='31' width='3.5' height='4.5'/><rect x='335' y='40' width='3.5' height='4.5'/><rect x='335' y='49' width='3.5' height='4.5'/><rect x='335' y='67' width='3.5' height='4.5'/><rect x='335' y='76' width='3.5' height='4.5'/><rect x='343' y='22' width='3.5' height='4.5'/><rect x='343' y='31' width='3.5' height='4.5'/><rect x='343' y='40' width='3.5' height='4.5'/><rect x='343' y='49' width='3.5' height='4.5'/><rect x='343' y='58' width='3.5' height='4.5'/><rect x='343' y='67' width='3.5' height='4.5'/><rect x='334' y='80' width='6' height='4'/><rect x='368' y='38' width='3.5' height='4.5'/><rect x='368' y='47' width='3.5' height='4.5'/><rect x='368' y='65' width='3.5' height='4.5'/><rect x='376' y='38' width='3.5' height='4.5'/><rect x='376' y='47' width='3.5' height='4.5'/><rect x='376' y='56' width='3.5' height='4.5'/><rect x='384' y='38' width='3.5' height='4.5'/><rect x='384' y='56' width='3.5' height='4.5'/><rect x='384' y='65' width='3.5' height='4.5'/><rect x='384' y='74' width='3.5' height='4.5'/><rect x='392' y='38' width='3.5' height='4.5'/><rect x='392' y='74' width='3.5' height='4.5'/><rect x='367' y='80' width='6' height='4'/><rect x='378' y='80' width='6' height='4'/><rect x='409' y='25' width='3.5' height='4.5'/><rect x='409' y='43' width='3.5' height='4.5'/><rect x='409' y='52' width='3.5' height='4.5'/><rect x='409' y='61' width='3.5' height='4.5'/><rect x='417' y='25' width='3.5' height='4.5'/><rect x='417' y='34' width='3.5' height='4.5'/><rect x='417' y='43' width='3.5' height='4.5'/><rect x='417' y='52' width='3.5' height='4.5'/><rect x='417' y='61' width='3.5' height='4.5'/><rect x='417' y='70' width='3.5' height='4.5'/><rect x='425' y='25' width='3.5' height='4.5'/><rect x='425' y='34' width='3.5' height='4.5'/><rect x='425' y='70' width='3.5' height='4.5'/><rect x='433' y='25' width='3.5' height='4.5'/><rect x='433' y='43' width='3.5' height='4.5'/><rect x='433' y='61' width='3.5' height='4.5'/><rect x='433' y='70' width='3.5' height='4.5'/><rect x='419' y='80' width='6' height='4'/><rect x='430' y='80' width='6' height='4'/><rect x='451' y='40' width='3.5' height='4.5'/><rect x='451' y='58' width='3.5' height='4.5'/><rect x='459' y='58' width='3.5' height='4.5'/><rect x='459' y='67' width='3.5' height='4.5'/><rect x='467' y='67' width='3.5' height='4.5'/><rect x='467' y='76' width='3.5' height='4.5'/><rect x='450' y='80' width='6' height='4'/><rect x='461' y='80' width='6' height='4'/><rect x='485' y='60' width='3.5' height='4.5'/><rect x='489' y='45' width='3.5' height='4'/><rect x='508' y='73' width='3.5' height='4.5'/><rect x='542' y='16' width='10' height='2.5'/><rect x='566' y='72' width='3.5' height='4.5'/><rect x='575' y='62' width='3.5' height='4.5'/><rect x='596' y='71' width='3.5' height='4.5'/><rect x='622' y='44' width='3.5' height='4.5'/><rect x='622' y='62' width='3.5' height='4.5'/><rect x='630' y='35' width='3.5' height='4.5'/><rect x='630' y='44' width='3.5' height='4.5'/><rect x='630' y='53' width='3.5' height='4.5'/><rect x='630' y='62' width='3.5' height='4.5'/><rect x='630' y='71' width='3.5' height='4.5'/><rect x='632' y='80' width='6' height='4'/><rect x='660' y='23' width='3.5' height='4.5'/><rect x='660' y='50' width='3.5' height='4.5'/><rect x='660' y='68' width='3.5' height='4.5'/><rect x='660' y='77' width='3.5' height='4.5'/><rect x='668' y='23' width='3.5' height='4.5'/><rect x='668' y='32' width='3.5' height='4.5'/><rect x='676' y='23' width='3.5' height='4.5'/><rect x='676' y='59' width='3.5' height='4.5'/><rect x='676' y='77' width='3.5' height='4.5'/><rect x='659' y='80' width='6' height='4'/><rect x='670' y='80' width='6' height='4'/><rect x='704' y='31' width='3.5' height='4.5'/><rect x='712' y='58' width='3.5' height='4.5'/><rect x='737' y='69' width='3.5' height='4.5'/><rect x='746' y='69' width='3.5' height='4.5'/><rect x='778' y='63' width='3.5' height='4.5'/><rect x='768' y='50' width='3.5' height='4'/><rect x='790' y='67' width='3.5' height='4.5'/><rect x='818' y='59' width='3.5' height='4.5'/><rect x='827' y='59' width='3.5' height='4.5'/><rect x='824' y='46' width='3.5' height='4'/><rect x='845' y='70' width='3.5' height='4.5'/><rect x='899' y='74' width='3.5' height='4.5'/><rect x='908' y='64' width='3.5' height='4.5'/><rect x='908' y='74' width='3.5' height='4.5'/><rect x='904' y='51' width='3.5' height='4'/><rect x='950' y='45' width='3.5' height='4.5'/><rect x='950' y='54' width='3.5' height='4.5'/><rect x='950' y='63' width='3.5' height='4.5'/><rect x='950' y='72' width='3.5' height='4.5'/><rect x='966' y='63' width='3.5' height='4.5'/><rect x='960' y='80' width='6' height='4'/><rect x='985' y='14' width='3.5' height='4.5'/><rect x='985' y='50' width='3.5' height='4.5'/><rect x='985' y='59' width='3.5' height='4.5'/><rect x='985' y='77' width='3.5' height='4.5'/><rect x='993' y='32' width='3.5' height='4.5'/><rect x='993' y='77' width='3.5' height='4.5'/><rect x='1001' y='32' width='3.5' height='4.5'/><rect x='1001' y='41' width='3.5' height='4.5'/><rect x='1001' y='59' width='3.5' height='4.5'/><rect x='1009' y='59' width='3.5' height='4.5'/><rect x='1006' y='80' width='6' height='4'/><rect x='1033' y='76' width='3.5' height='4.5'/><rect x='1028' y='51' width='3.5' height='4'/><rect x='1056' y='60' width='3.5' height='4.5'/><rect x='1077' y='65' width='3.5' height='4.5'/><rect x='1086' y='65' width='3.5' height='4.5'/><rect x='1099' y='66' width='3.5' height='4.5'/><rect x='1108' y='66' width='3.5' height='4.5'/><rect x='1104' y='53' width='3.5' height='4'/><rect x='1123' y='60' width='3.5' height='4.5'/><rect x='1132' y='70' width='3.5' height='4.5'/><rect x='1141' y='70' width='3.5' height='4.5'/><rect x='1162' y='60' width='3.5' height='4.5'/><rect x='1162' y='70' width='3.5' height='4.5'/><rect x='1184' y='19' width='3.5' height='4.5'/><rect x='1184' y='28' width='3.5' height='4.5'/><rect x='1184' y='37' width='3.5' height='4.5'/><rect x='1184' y='46' width='3.5' height='4.5'/><rect x='1184' y='55' width='3.5' height='4.5'/><rect x='1184' y='64' width='3.5' height='4.5'/><rect x='1184' y='73' width='3.5' height='4.5'/><rect x='1192' y='28' width='3.5' height='4.5'/><rect x='1192' y='37' width='3.5' height='4.5'/><rect x='1192' y='55' width='3.5' height='4.5'/><rect x='1192' y='64' width='3.5' height='4.5'/><rect x='1192' y='73' width='3.5' height='4.5'/><rect x='1183' y='80' width='6' height='4'/></g><g fill='%23F0DFA0'><circle cx='303' cy='10' r='1.6'/><circle cx='547' cy='6' r='1.6'/><circle cx='999' cy='2' r='1.6'/></g></svg>")}

/* ============ METROPOLE – SIGNATUREN ============ */
.site-header::before{content:"";display:block;height:8px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,#FAF6EE 14px 26px,var(--brand) 26px 40px,#FAF6EE 40px 52px)}
.site-header::after{content:"";display:block;height:64px;background:var(--skyline) bottom/1200px 64px repeat-x #FAF6EE}
.site-footer{position:relative;margin-top:110px}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-63px;height:64px;background:var(--skyline) bottom/1200px 64px repeat-x}
.hero h1{font-weight:900;letter-spacing:-.5px}
.eyebrow{letter-spacing:4px}
.count{background:#fff;border:1px dashed var(--accent);color:var(--accent);border-radius:2px}
.badge{background:#fff;border:1px dashed var(--brand);color:var(--brand)}
.azbar a{border:1px solid var(--brand);border-radius:2px}
.cta-box{border:6px solid transparent;border-image:repeating-linear-gradient(135deg,var(--accent) 0 12px,#fff 12px 22px,var(--brand) 22px 34px,#fff 34px 44px) 6}
.btn-cta{background:var(--accent);color:#fff}
.searchbox{border-color:var(--brand)}


.anfrage{margin:14px 0 6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 16px}
.anfrage summary{font-weight:700;padding:13px 0;cursor:pointer;list-style:none;color:var(--brand)}
.anfrage summary::before{content:"+";display:inline-block;margin-right:10px;color:var(--accent);font-weight:800}
.anfrage[open] summary::before{content:"–"}
.anfrage .bl-code{margin-bottom:14px}
.eintragstext{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-top:14px;font-size:15px}
.eintragen-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start;margin-bottom:20px}
.eg-right{position:sticky;top:64px}
@media(max-width:960px){.eintragen-grid{grid-template-columns:1fr}.eg-right{position:static}}
/* ============ CTA-BUTTON-KOLLEKTION ============ */
.cta-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:20px 0}
@media(max-width:820px){.cta-demo{grid-template-columns:1fr}}
.cta-item{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:20px 22px}
.cta-item h3{font-size:15px;margin-bottom:4px}
.cta-item .note{font-size:13px;color:var(--muted);margin-bottom:14px}
.ctab{display:inline-flex;align-items:center;gap:10px;font:700 16px var(--font-body);padding:14px 26px;border-radius:6px;cursor:pointer;border:0;color:#fff;text-decoration:none;position:relative;transition:transform .15s,box-shadow .15s,background .2s}
.ctab:hover{text-decoration:none}
/* 1 Klassik */
.cta1{background:var(--accent)}
.cta1:hover{transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
/* 2 Glanzlauf */
.cta2{background:var(--accent);overflow:hidden}
.cta2::after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 2.8s infinite}
@keyframes shine{0%{left:-80%}55%{left:135%}100%{left:135%}}
/* 3 Puls-Glow */
.cta3{background:var(--brand);animation:pulseglow 2s infinite}
@keyframes pulseglow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* 4 Pfeil */
.cta4{background:var(--accent)}
.cta4 .arr{display:inline-block;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.cta4:hover{filter:brightness(1.08)}
/* 5 Verlaufswandler */
.cta5{background:linear-gradient(270deg,var(--brand),var(--accent),var(--brand));background-size:300% 100%;animation:gradmove 6s ease infinite}
@keyframes gradmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* 6 Luftpost-Lauf */
.cta6{padding:5px;background:repeating-linear-gradient(135deg,var(--accent) 0 12px,#fff 12px 22px,var(--brand) 22px 34px,#fff 34px 44px);animation:march 1.6s linear infinite;border-radius:8px}
.cta6 span{display:block;background:#fff;color:var(--brand);padding:10px 22px;border-radius:4px}
@keyframes march{to{background-position:62px 0}}
/* 7 Briefmarke */
.cta7{background:#fff;color:var(--accent);border:2px dashed var(--accent);animation:floaty 3s ease-in-out infinite}
.cta7:hover{transform:rotate(-2deg) scale(1.04)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* 8 Druckknopf */
.cta8{background:var(--brand);box-shadow:0 5px 0 #17335F,0 9px 14px rgba(23,51,95,.35)}
.cta8:active{transform:translateY(4px);box-shadow:0 1px 0 #17335F}
.cta8:hover{filter:brightness(1.07)}
/* 9 Skyline-Panorama */
.cta9{background:var(--brand);overflow:hidden;padding-bottom:20px}
.cta9::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;opacity:.35;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 90V40h40l12-14 12 14h20V24l10-12 10 12v16h26V32h18l8-10 8 10h22V16l8-10 8 10v24h30V36h24l10-12 10 12h20V22l12-14 12 14v18h26v-8l8-10 8 10v8h30V30l10-12 10 12h22V40h28l12-14 12 14h20V26l10-12 10 12v14h26v-6l8-8 8 8v6h30V34h22l10-12 10 12h24V20l12-12 12 12v20h28l10-12 10 12h20v20z'/></svg>") bottom/600px 16px repeat-x;animation:citypan 14s linear infinite}
@keyframes citypan{to{background-position-x:600px}}
/* 10 Gold-Schimmer */
.cta10{background:linear-gradient(110deg,#B98530 15%,#EBCB7C 32%,#B98530 50%,#EBCB7C 68%,#B98530 85%);background-size:250% 100%;color:#3A2A05;animation:shimmer 3s linear infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
@keyframes shimmer{to{background-position:-250% 0}}

/* ============ EINTRAGEN-FORMULAR ============ */
.form-panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:24px;margin-bottom:20px}
.form-panel h2{font-size:19px;margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:5px}
.fld.wide{grid-column:1/-1}
.fld label{font:700 12px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;font:15px var(--font-body);color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.req::after{content:" *";color:var(--accent)}
.form-hint{font-size:13px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0}
.check input{margin-top:3px}
.bl-item{border:1px solid var(--line);border-radius:4px;padding:16px;margin-bottom:14px;background:#fff}
.bl-item h3{font-size:15px;margin-bottom:8px}
.bl-prev{background:var(--bg);border:1px dashed var(--line);border-radius:4px;padding:12px 14px;font-size:14px;margin-bottom:10px}
.bl-code{display:flex;gap:10px;align-items:stretch}
.bl-code pre{flex:1;margin:0;background:#2B2825;color:#EDE7DA;border-radius:4px;padding:12px 14px;font:12.5px/1.5 ui-monospace,Consolas,monospace;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.copybtn{align-self:center;background:var(--brand);color:var(--brand-ink);border:0;border-radius:4px;padding:10px 14px;font:700 13px var(--font-body);cursor:pointer;white-space:nowrap}
.copybtn:hover{filter:brightness(1.1)}
.copybtn.ok{background:#1F7A5C}


/* ============ ENTWURF B: Skyline über dem Header, runde Ecken ============ */
body{--radius:14px}
body .site-header::before{height:64px;background:var(--skyline) bottom/1200px 64px repeat-x #FAF6EE}
body .site-header::after{height:8px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,#FAF6EE 14px 26px,var(--brand) 26px 40px,#FAF6EE 40px 52px)}
body .fld input,body .fld select,body .fld textarea{border-radius:12px}
body .searchbox{border-radius:999px;overflow:hidden}
body .azbar a{border-radius:10px}
body .count,body .badge{border-radius:999px}
body .form-panel,body .cta-item,body .bl-item{border-radius:14px}
body .bl-prev,body .bl-code pre,body .copybtn{border-radius:10px}
body .cta-box{border-image:none;border:3px solid var(--accent);border-radius:14px}

/* Farb-Swatches in der Toolbar */
.toolbar .sw{width:20px;height:20px;border-radius:50%;border:2px solid #3a3f47;padding:0;flex:0 0 auto}
.toolbar .sw:hover{border-color:#666}
.toolbar .sw.on{border-color:#8fd3c7;box-shadow:0 0 0 2px rgba(143,211,199,.35)}

/* Seiten-Umschaltung */
.page{display:none}
.page.on{display:block}

/* ============ CONSENT-BANNER ============ */
#consent{position:fixed;inset:0;background:rgba(30,28,24,.55);z-index:400;display:flex;align-items:flex-end;justify-content:center;padding:16px}
/* Fix: display:flex hob das hidden-Attribut auf – das Overlay blieb dauerhaft über der Seite und blockierte jeden Klick */
#consent[hidden]{display:none}
@media(min-width:700px){#consent{align-items:center}}
.consent-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius,14px);max-width:560px;width:100%;padding:24px;box-shadow:0 18px 50px rgba(30,28,24,.28)}
.consent-box h2{font-size:20px;margin-bottom:8px}
.consent-box p{font-size:14px;color:var(--muted);margin-bottom:14px}
.consent-box label{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;padding:7px 0;cursor:pointer}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.consent-actions .btn{cursor:pointer}
/* ============ AUTOCOMPLETE ============ */
.searchbox{position:relative}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(30,28,24,.16);z-index:120;overflow:hidden;text-align:left}
.ac-list a{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;font-size:15px;color:var(--ink);text-decoration:none}
.ac-list a:hover,.ac-list a.sel{background:var(--surface)}
.ac-list .typ{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
/* ============ KARTE (Leaflet) ============ */
.map-live{height:340px;border:1px solid var(--line);border-radius:var(--radius,14px);overflow:hidden;margin-bottom:6px}
.leaflet-container{font:14px var(--font-body)}

/* ============ SIDEBAR & STADTVIERTEL (Phase 8) ============ */
main:has(> .sidebar){display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;
  max-width:var(--wrap,1180px);margin:0 auto;padding:0 20px;align-items:start}
main:has(> .sidebar) > .wrap{max-width:none;margin:0;padding:0}
.sidebar{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px;padding-top:34px}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius,14px);padding:16px 18px}
.side-box h2{font:800 16px/1.25 var(--font-head,'Archivo',sans-serif);margin:0 0 4px}
.side-hint{font-size:13px;color:var(--muted);margin:0 0 10px}
.side-list{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.side-list li + li{border-top:1px solid var(--line)}
.side-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 2px;font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:600}
.side-list a:hover{color:var(--brand)}
.side-list a span{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);
  border-radius:999px;padding:2px 9px;flex:none}
.side-all{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--brand)}
.side-cta{background:var(--brand);color:#fff;border-color:var(--brand)}
.side-cta h2{color:#fff}
.side-cta p{font-size:14px;margin:6px 0 12px;color:rgba(255,255,255,.9)}
.side-cta .btn-cta{background:#fff;color:var(--brand);width:100%;text-align:center}

/* CTA-Box auf Stadtviertel-Seiten */
.cta-viertel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  background:linear-gradient(135deg,var(--surface) 0%,#fff 70%);
  border:1px solid var(--line);border-left:6px solid var(--accent);
  border-radius:var(--radius,14px);padding:20px 24px;margin:24px 0}
.cta-viertel h2{font:800 19px/1.25 var(--font-head,'Archivo',sans-serif);margin:0 0 6px}
.cta-viertel p{font-size:14.5px;color:var(--muted);margin:0;max-width:62ch}
.cta-viertel .cv-action{text-align:center}
.cta-viertel .cv-action small{display:block;margin-top:7px;font-size:11.5px;color:var(--muted)}
.cta-viertel.schlank{background:#fff;border-left-width:4px;padding:16px 20px}
.cta-viertel.schlank h2{font-size:17px}
@media(max-width:960px){
  main:has(> .sidebar){grid-template-columns:1fr;gap:6px}
  .sidebar{position:static;padding-top:0;padding-bottom:20px}
  .side-list{max-height:none}
  .cta-viertel{grid-template-columns:1fr;text-align:left}
  .cta-viertel .cv-action{text-align:left}
  .cta-viertel .cv-action .btn{width:100%;text-align:center}
}

/* Zielblock in Ratgeber-Artikeln */
.ziele{border-top:1px solid var(--line);padding-top:8px}
.ziele-hint{font-size:14px;color:var(--muted);margin:-4px 0 12px}

/* Vorschläge auf der 404-Seite */
.vorschlaege{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:6px 0 20px}
.vorschlag{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 15px;text-decoration:none;color:var(--ink)}
.vorschlag:hover{border-color:var(--brand)}
.vorschlag b{display:block;font:700 15.5px var(--font-head,'Archivo',sans-serif)}
.vorschlag span{font-size:13px;color:var(--muted)}