wrappen → fertig gestylt. ============================================================ */ .prose{font-size:18px;line-height:1.72;color:var(--ink-2);} .prose h2{font-family:var(--font-serif);font-weight:600;font-size:30px;line-height:1.12;letter-spacing:-.01em; color:#000;margin:44px 0 14px;scroll-margin-top:90px;} .prose h3{font-family:var(--font-serif);font-weight:600;font-size:23px;line-height:1.2;color:#000;margin:32px 0 10px;} .prose h4{font-family:var(--font-sans);font-weight:700;font-size:18px;color:#000;margin:24px 0 8px;} .prose p{margin:0 0 18px;} .prose a{color:var(--anchor);text-decoration:underline;text-underline-offset:2px;font-weight:600;} .prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none;} .prose ul li,.prose ol li{position:relative;padding-left:30px;margin:0 0 10px;} .prose ul li::before{content:"";position:absolute;left:6px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--anchor);} .prose ol{counter-reset:li;} .prose ol li{counter-increment:li;} .prose ol li::before{content:counter(li);position:absolute;left:0;top:1px;font-family:var(--font-sans);font-weight:700; font-size:14px;color:var(--anchor);background:var(--accent-soft);width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center;} .prose table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:16px;} .prose thead th{background:var(--accent-soft);text-align:left;font-weight:700;color:#000;padding:13px 16px;font-size:14px;letter-spacing:.02em;} .prose thead th:first-child{border-radius:10px 0 0 0;} .prose thead th:last-child{border-radius:0 10px 0 0;} .prose tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);} .prose tbody tr:last-child td{border-bottom:none;} .prose tbody td:first-child{font-weight:600;color:#000;} .prose blockquote{margin:26px 0;padding:6px 0 6px 24px;border-left:4px solid var(--anchor);} .prose blockquote p{font-family:var(--font-serif);font-style:italic;font-size:23px;line-height:1.4;color:#000;margin:0 0 8px;} .prose blockquote cite{font-style:normal;font-size:14px;font-weight:600;color:var(--ink-3);} /* Autor / Teilen / Sidebar */ .author{display:flex;gap:20px;align-items:flex-start;background:var(--bg);border-radius:18px;padding:26px 28px;margin:48px 0 0;} .author .avatar{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;} .author .avatar img{width:100%;height:100%;object-fit:cover;} .author .ainfo .arole{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--anchor);margin:0 0 4px;} .author .ainfo .aname{font-family:var(--font-serif);font-weight:600;font-size:22px;margin:0 0 8px;} .author .ainfo p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0;max-width:54ch;} .share{margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--line);} .share .sh-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;} .share .sh-h{font-weight:700;font-size:17px;} .share .sh-note{font-size:12.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;} .share .btns{display:flex;flex-wrap:wrap;gap:10px;} .share .btns button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;color:#000; background:#fff;border:1.5px solid rgba(0,0,0,.85);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .14s ease,color .14s ease;} .share .btns button:hover{background:#000;color:#fff;} .sidebar{align-self:start;position:sticky;top:90px;display:flex;flex-direction:column;gap:28px;} .swidget .sw-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--anchor);} .latest a{display:flex;gap:14px;align-items:flex-start;padding:12px 0;} .latest a + a{border-top:1px solid var(--line);} .latest .thumb{flex:none;width:74px;height:58px;border-radius:10px;object-fit:cover;} .latest .lt{font-family:var(--font-serif);font-weight:600;font-size:16.5px;line-height:1.2;color:#000;margin:0 0 5px;} .latest .lc{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--anchor);} .side-cta{background:var(--accent-soft);border-radius:16px;padding:22px 22px;} .side-cta .sc-h{font-family:var(--font-serif);font-weight:600;font-size:19px;margin:0 0 8px;} .side-cta p{font-size:14px;color:var(--ink-2);line-height:1.5;margin:0 0 14px;} .side-cta a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:#fff;background:var(--anchor);border-radius:999px;padding:10px 18px;} /* ============================================================ FOOTER (System – identisch auf allen Seiten) ============================================================ */ footer.site{background:var(--anchor-900);color:#fff;} footer.site .ftop{padding-block:56px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;} @media(max-width:860px){footer.site .ftop{grid-template-columns:1fr 1fr;gap:34px;}} footer .flogo{font-weight:800;font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:#fff;} footer .ftag{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin:14px 0 0;max-width:34ch;} footer .col h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 16px;} footer .col a{display:block;font-size:16px;color:rgba(255,255,255,.86);padding:7px 0;font-weight:500;} footer .col a:hover{color:#fff;} footer .fbot{border-top:1px solid rgba(255,255,255,.14);padding-block:20px 30px;display:flex;justify-content:space-between; flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.6);} /* Footer-Trust mit Lorbeer-Zweigen */ footer .trust{display:inline-flex;align-items:center;gap:4px;color:#fff;margin:18px 0 0;} footer .trust .laurel-svg{height:46px;width:auto;} footer .trust .tt b{display:block;font-size:16px;font-weight:700;line-height:1;} footer .trust .tt span{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:4px;} /* ============================================================ LORBEER-BADGE (Hero) — prozedural per JS gezeichnet (Base.astro) ============================================================ */ .laurel-badge{display:inline-flex;align-items:center;justify-content:center;gap:0;color:#000;margin:0 auto 22px;} .laurel-badge .laurel-svg{height:52px;width:auto;display:block;} .laurel-badge .lb-text{padding:0 4px;text-align:center;} .laurel-badge .lb-text b{display:block;font-size:15px;font-weight:700;line-height:1;} .laurel-badge .lb-text > span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;} /* ============================================================ CONTENT-SEITEN (Index · Übersicht · Recht) — geteilte Bausteine Lesbare Textspalte + Token-Karten; ersetzt alte per-Seite-Hex-Styles. ============================================================ */ .pagebody{max-width:920px;margin:0 auto;padding:24px 32px 80px;} .pagebody > .crumb:first-child{margin-top:0;} .pagebody h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(30px,4.4vw,46px); line-height:1.05;letter-spacing:-.015em;margin:0 0 14px;} .pagebody h2{font-family:var(--font-serif);font-weight:600;font-size:26px;line-height:1.15; letter-spacing:-.01em;margin:40px 0 16px;} .lead{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0 0 26px;} .empty{font-size:16px;color:var(--ink-3);background:var(--paper);border:1px dashed var(--line); border-radius:14px;padding:22px 24px;} /* Karten-Raster — Branchen-/Städte-/Verzeichnis-Kacheln */ .cards{list-style:none;margin:6px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;} .card{display:flex;flex-direction:column;gap:5px;background:var(--paper);border:1px solid var(--line); border-radius:16px;padding:20px 22px;color:inherit; box-shadow:0 1px 2px rgba(20,12,12,.04),0 10px 30px -22px rgba(20,12,12,.2); transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;} .card:hover{transform:translateY(-2px);border-color:var(--accent); box-shadow:0 1px 2px rgba(20,12,12,.05),0 16px 38px -24px rgba(20,12,12,.28);} .card .c-kicker{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--anchor);} .card .c-title{font-family:var(--font-serif);font-weight:600;font-size:21px;line-height:1.15;color:#000;} .card .c-sub{font-size:14px;color:var(--ink-3);font-weight:500;} .card .c-count{font-size:13px;color:var(--ink-3);font-weight:600;margin-top:2px;} /* Such-Box (Index) — Token-Variante der Header-Suche */ .searchbox{display:flex;align-items:center;gap:10px;background:#f0eee9;border:none;border-radius:999px; padding:13px 20px;margin:2px 0 26px;max-width:520px;color:var(--ink-3);} .searchbox svg{width:18px;height:18px;color:var(--ink-3);flex:none;} .searchbox input{border:none;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--ink);width:100%;} /* Redaktioneller Hinweis-Kasten ("Über dieses Verzeichnis") */ .note{background:var(--accent-soft);border-radius:16px;padding:24px 26px;margin:34px 0 0;} .note h2{font-family:var(--font-serif);font-weight:600;font-size:21px;margin:0 0 8px;} .note p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0;} .note a{color:var(--anchor);font-weight:600;text-decoration:underline;text-underline-offset:2px;} /* „Mehr"-Textlink + FAQ-Liste (Index/Domain-Seiten) */ .morelink{display:inline-block;margin-top:14px;font-size:15px;font-weight:600;color:var(--anchor);} .morelink:hover{text-decoration:underline;text-underline-offset:2px;} .faq{display:flex;flex-direction:column;gap:18px;margin:6px 0 0;} .faq dt{font-family:var(--font-serif);font-weight:600;font-size:18px;color:#000;margin:0 0 4px;} .faq dd{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0;} /* Button-Paar (Akzent-gefüllt + Ghost) — Token-basiert, Stadt-Hue folgt --h */ .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 2px;} .btn{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;border-radius:999px; padding:11px 22px;background:var(--anchor);color:#fff;border:1.5px solid var(--anchor); transition:background .14s ease,border-color .14s ease,color .14s ease;} .btn:hover{background:var(--anchor-900);border-color:var(--anchor-900);} .btn.ghost{background:transparent;color:#000;border-color:rgba(0,0,0,.85);} .btn.ghost:hover{background:#000;color:#fff;} /* ============================================================ STADT-STARTSEITE (Mini-Template) — Hero · Kategorien · Artikel. Alles unter .startseite gescoped, damit kurze Klassen (.cat/.nm/.art …) nicht mit den Listen-Klassen kollidieren. ACF füllt Hero/Promise/Foto, Listing-Daten füllen Kategorien/Artikel. ============================================================ */ .startseite .hero{padding:18px 0 6px;} .startseite .hero-panel{position:relative;overflow:hidden;background:var(--accent);border-radius:26px;padding:64px 32px 60px;text-align:center;color:#000;} /* Liquid-Band: 4 Hues pro Stadt via --lq1..4 (Astro setzt sie inline; Defaults = Münster). */ .startseite .hero-panel::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none; background: radial-gradient(36% 48% at 20% 28%, oklch(0.93 0.055 var(--lq1,350) / .95), transparent 70%), radial-gradient(42% 55% at 82% 22%, oklch(0.92 0.06 var(--lq2,40) / .9), transparent 70%), radial-gradient(48% 62% at 64% 92%, oklch(0.88 0.075 var(--lq3,12) / .85), transparent 72%), radial-gradient(34% 44% at 8% 86%, oklch(0.94 0.05 var(--lq4,65) / .8), transparent 70%); filter:blur(8px);animation:heroDrift 22s ease-in-out infinite alternate;} .startseite .hero-panel > *{position:relative;z-index:1;} @keyframes heroDrift{from{transform:translate3d(-2%,-1%,0) scale(1.03);}to{transform:translate3d(3%,2%,0) scale(1.10);}} @media (prefers-reduced-motion: reduce){.startseite .hero-panel::before{animation:none;}} .startseite .hero-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 auto 18px;background:rgba(255,255,255,.55);border-radius:999px;padding:7px 16px;} .startseite .hero-h{font-family:var(--font-serif);font-weight:600;font-size:clamp(38px,6vw,66px);line-height:1.0;letter-spacing:-.02em;margin:0 auto 18px;max-width:16ch;} .startseite .hero-sub{font-size:clamp(18px,1.9vw,22px);line-height:1.5;font-weight:500;color:var(--ink-2);max-width:46ch;margin:0 auto 32px;} .startseite .hero-pick{display:flex;gap:8px;max-width:520px;margin:0 auto;background:#fff;border-radius:999px;padding:7px 7px 7px 8px;align-items:center;box-shadow:0 10px 40px -22px rgba(60,10,20,.5);} .startseite .select-wrap{position:relative;flex:1;display:flex;align-items:center;} .startseite .select-wrap select{appearance:none;-webkit-appearance:none;border:none;outline:none;background:transparent;font:inherit;font-size:18px;font-weight:600;color:var(--ink);padding:14px 44px 14px 18px;width:100%;cursor:pointer;} .startseite .select-wrap > svg,.startseite .select-wrap > i{position:absolute;right:16px;pointer-events:none;color:var(--ink-3);width:20px;height:20px;} .startseite .hero-pick button{flex:none;background:var(--anchor);color:#fff;border:none;border-radius:999px;padding:14px 26px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap;} .startseite .hero-meta{margin-top:18px;font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;} .startseite .block{padding:74px 0;} .startseite .sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;} .startseite .sec-top h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.01em;margin:0;} .startseite .sec-top p{font-size:18px;color:var(--ink-2);margin:10px 0 0;max-width:48ch;line-height:1.5;} .startseite .sec-top .more{font-size:16.5px;font-weight:700;color:#000;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid #000;padding-bottom:2px;} .startseite .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .startseite .cat{background:#f1efea;border:none;border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;gap:18px;color:inherit;transition:transform .16s ease,background .16s ease;} .startseite .cat:hover{transform:translateY(-3px);background:var(--accent);} .startseite .cat .ic{width:54px;height:54px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;color:#000;} .startseite .cat .ic svg{width:27px;height:27px;stroke-width:1.6;} .startseite .cat .nm{font-size:22px;font-weight:700;line-height:1.1;} .startseite .cat .ct{font-size:15px;color:var(--ink-3);font-weight:500;margin-top:auto;} .startseite .arts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .startseite .art{display:flex;flex-direction:column;color:inherit;} .startseite .art .ph{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(135deg,#ecebe6 0 11px,#f4f3ef 11px 22px);display:flex;align-items:center;justify-content:center;} .startseite .art .ph img{width:100%;height:100%;object-fit:cover;} .startseite .art .ph span{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#a6a39a;letter-spacing:.04em;} .startseite .art .tag{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--anchor);margin:20px 0 10px;} .startseite .art h3{font-family:var(--font-serif);font-weight:600;font-size:27px;line-height:1.12;letter-spacing:-.01em;margin:0;} @media(max-width:860px){ .startseite .cats{grid-template-columns:repeat(2,1fr);} .startseite .arts{grid-template-columns:1fr;} .startseite .sec-top{flex-direction:column;align-items:flex-start;gap:10px;} } /* ============================================================ RESPONSIVE — Mobile (≤680px): kompaktere Maße + Bottom-Tabbar (aus den …-Mobile-Designs; Tabbar im Web = position:fixed) ============================================================ */ .tabbar{display:none;} /* Desktop: keine Tabbar */ @media (max-width: 680px){ /* Seitlichen Rand ändern, ohne das vertikale Padding von Header/Footer durch ein Padding-Shorthand zurückzusetzen. */ .wrap{padding-inline:20px;} /* Header: Desktop-Nav weicht der Bottom-Tabbar */ header.site .nav{display:none;} header.site .bar{padding-block:14px;} footer.site .ftop{padding-block:40px 28px;gap:30px 24px;} footer.site .fbot{flex-direction:column;align-items:center;text-align:center;gap:8px;padding-block:18px 22px;} /* Pagehead kompakter */ .pagehead .inner{padding:18px 20px 34px;} .pagehead .crumb{margin:0 0 18px;} .pagehead h1.title{font-size:33px;} .ph-icon{width:54px;height:54px;margin-bottom:14px;} .ph-icon svg{width:27px;height:27px;} .ph-sub{font-size:16px;} /* Liste + Karten kompakter */ .listwrap{padding:22px 16px 0;} .entry{gap:15px;padding:18px;} .rank{width:46px;height:46px;border-radius:13px;font-size:21px;} .nm{font-size:20px;} .desc{font-size:15.5px;} /* Promise kompakter */ .promise{padding:48px 18px;margin-top:34px;} .promise .ptitle{font-size:27px;} .promise .legend{flex-direction:column;gap:10px;} /* Platz, damit die fixe Tabbar nichts verdeckt */ body{padding-bottom:calc(74px + env(safe-area-inset-bottom));} /* BOTTOM-TABBAR — geteilte Mobile-Navigation */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex; background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(12px); border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; padding:7px 0;color:var(--ink-3);font-size:10.5px;font-weight:600;} .tabbar svg{width:23px;height:23px;stroke-width:1.8;} .tabbar a.active{color:var(--anchor);} /* Content-Seiten kompakter */ .pagebody{padding:18px 20px 56px;} .pagebody h1{font-size:30px;} .pagebody h2{font-size:22px;margin:30px 0 12px;} .lead{font-size:16.5px;} .cards{grid-template-columns:1fr;gap:12px;} .note{padding:20px;} .searchbox{padding:11px 16px;} /* Stadt-Startseite kompakter */ .startseite .block{padding:48px 0;} .startseite .hero-panel{padding:40px 20px 36px;border-radius:20px;} .startseite .hero-pick{flex-direction:column;border-radius:20px;padding:10px;} .startseite .hero-pick button{width:100%;} .startseite .cats{grid-template-columns:1fr;} }