@charset "utf-8"; /* ========================================================================== Dr. Bohlmann Beauty & Gesundheit GmbH Gemeinsames Stylesheet für beide Bereiche (Beauty und Coaching). Der Bereich wird über eine Klasse am gesetzt: Ästhetische Medizin (Akzent: Rosé) Coaching & Stressmedizin (Akzent: Salbei) Aufbau: mobil zuerst, Umbruchpunkte am Ende der Datei. ========================================================================== */ /* ---------- Schriften: lokal, latin + latin-ext ---------- */ @font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap; src:url('../fonts/eb-garamond-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap; src:url('../fonts/eb-garamond-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 500;font-display:swap; src:url('../fonts/eb-garamond-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 500;font-display:swap; src:url('../fonts/eb-garamond-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap; src:url('../fonts/jost-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap; src:url('../fonts/jost-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---------- Farben und Maße ---------- */ :root{ --bg:#14100E; --bg-2:#1B1613; --surface:#221C17; --deep:#100C0A; --text:#EFE7DA; --muted:#AFA493; --soft:#8E8676; --gold:#C8A86B; --gold-2:#E6D2A6; --gold-deep:#9A7E45; --line:#3A3026; --line-2:rgba(255,255,255,.07); --accent:#C98F98; /* Ästhetische Medizin */ --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --maxw:1180px; --pad:20px; --headh:68px; } body.t-coaching{ --accent:#8FA891; } /* Coaching & Stressmedizin */ /* ---------- Grundlagen ---------- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--text);background:var(--bg); -webkit-font-smoothing:antialiased;} a{color:inherit;text-decoration:none;transition:color .2s;} a:hover{color:var(--gold);} img{max-width:100%;height:auto;display:block;} h1,h2,h3,h4{font-weight:400;line-height:1.15;overflow-wrap:break-word;text-wrap:balance;} em{font-style:italic;color:var(--gold-2);} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);} /* Schmale Lesespalte, aber linksbündig zur selben Kante wie die übrigen Abschnitte. Eine zentrierte Spalte würde gegenüber der Bühne einspringen. */ .wrap.narrow > *{max-width:820px;} .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;font-size:11px; font-weight:500;color:var(--gold);display:block;} .lead{color:var(--muted);font-size:17px;line-height:1.8;margin-top:16px;max-width:62ch;text-wrap:pretty;} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#14100E; padding:12px 20px;font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;} .skip:focus{left:0;} /* ---------- Hinweisleiste ---------- */ .announce{background:var(--deep);border-bottom:1px solid var(--line);font-family:var(--sans); font-size:11.5px;letter-spacing:.08em;color:var(--muted);} .announce .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 20px; flex-wrap:wrap;padding-top:8px;padding-bottom:8px;} .announce .claim{display:none;} .announce .r{display:flex;gap:4px 16px;align-items:center;flex-wrap:wrap;} /* Bequeme Tippfläche: die Leiste bleibt optisch schmal, die Verweise sind trotzdem mindestens 32 px hoch. */ .announce a{color:var(--gold);display:inline-flex;align-items:center;min-height:32px;} .announce a:hover{color:var(--gold-2);} .announce .a-sec{display:none;} .announce .switch{background:var(--gold);color:#14100E;padding:6px 12px;white-space:nowrap;} .announce .switch:hover{background:var(--gold-2);color:#14100E;} /* ---------- Kopfzeile ---------- */ header.site{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line); background:rgba(20,16,14,.95);} @supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){ header.site{background:rgba(20,16,14,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);} } .nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:var(--headh);} .brand{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 0;} .brand svg{flex:none;} .brand .bt{display:block;font-family:var(--serif);font-size:15px;line-height:1.15;color:var(--text);} .brand .bs{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em; font-size:8px;color:var(--gold);margin-top:4px;} .navlinks{display:none;} .navlinks a{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase; font-weight:300;color:var(--text);white-space:nowrap;} .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--gold);} .navcta{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--gold);color:var(--gold);padding:11px 20px;white-space:nowrap; display:inline-flex;align-items:center;justify-content:center;min-height:44px; transition:background .2s,color .2s;} .navcta:hover{background:var(--gold);color:#14100E;} .burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px; background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;flex:none;margin-right:-10px;} .burger span{width:22px;height:1.5px;background:var(--gold);transition:transform .25s,opacity .2s;} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* Ohne JavaScript bleibt das Menü ausgeklappt statt unerreichbar. */ .no-js .burger{display:none;} .no-js .navlinks{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-bottom:14px;} .no-js .nav{flex-wrap:wrap;} /* ---------- Schaltflächen ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans); font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;padding:16px 28px;min-height:48px; text-align:center;transition:background .2s,color .2s,border-color .2s,transform .15s;} .btn-gold{background:var(--gold);color:#14100E;border:1px solid var(--gold);} .btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:#14100E;transform:translateY(-2px);} .btn-outline{border:1px solid rgba(239,231,218,.35);color:var(--text);} .btn-outline:hover{border-color:var(--gold);color:var(--gold);} .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;} .btnrow .btn{flex:1 1 auto;} /* ---------- Bühne der Startseite ---------- */ .hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(480px,76vh,760px); overflow:hidden;background:var(--bg-2);} .hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:64% 24%;z-index:0;} .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(18,13,11,.55) 0%,rgba(18,13,11,.22) 26%,rgba(18,13,11,.72) 66%,rgba(20,16,14,.98) 100%), linear-gradient(90deg,rgba(18,13,11,.80) 0%,rgba(18,13,11,.30) 55%,rgba(18,13,11,0) 88%);} .hero .wrap{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:56px;} .hero .inner{max-width:760px;} .hero h1{font-size:clamp(33px,8vw,74px);line-height:1.04;margin-top:18px;letter-spacing:.4px;} .hero .sub{font-size:clamp(16px,4vw,20px);color:var(--text);opacity:.9;margin-top:20px; max-width:50ch;line-height:1.65;text-wrap:pretty;} /* Kleinzeile unter den Schaltflächen. Kommt sowohl in der Bühne der Startseite als auch im Kopfbereich der Unterseiten vor. */ .meta{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-top:28px;line-height:1.9;} /* ---------- Kopfbereich der Unterseiten ---------- */ .pagehero{background:var(--bg-2);border-bottom:1px solid var(--line);} .pagehero .wrap{padding-top:34px;padding-bottom:40px;} .pagehero h1{font-size:clamp(31px,7.5vw,58px);line-height:1.05;margin-top:14px;} .pagehero .lead{font-size:17.5px;color:var(--muted);max-width:64ch;} .crumb{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:18px;} .crumb a{color:var(--gold);} .crumb .sep{margin:0 8px;color:var(--gold-deep);} /* ---------- Bänder ---------- */ section.band{padding:56px 0;} section.band.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} section.band.deep{background:var(--deep);} [id]{scroll-margin-top:calc(var(--headh) + 14px);} .sec-head{max-width:62ch;margin-bottom:32px;} .sec-head h2{font-size:clamp(26px,6vw,42px);margin-top:14px;} .sec-head .lead{margin-top:16px;} .quote{font-style:italic;color:var(--gold);font-size:clamp(19px,4.6vw,28px);line-height:1.4;} /* ---------- Leistungskarten ---------- */ .cards{display:grid;grid-template-columns:1fr;gap:18px;} .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); padding:22px;transition:border-color .25s,transform .25s;} .card:hover{border-color:var(--gold);transform:translateY(-3px);} .card .shot{margin:-22px -22px 18px;} .card .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--line);} .card .no{font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;color:var(--gold);} .card h3{font-size:23px;margin-top:12px;} .card p{color:var(--muted);font-size:15.5px;margin-top:12px;line-height:1.65;flex:1;text-wrap:pretty;} .card .price{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.08em; color:var(--gold-2);margin-top:20px;padding-top:16px;border-top:1px solid var(--line);} .card .price small{color:var(--muted);font-size:12.5px;letter-spacing:.02em;} .card .go{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);margin-top:14px;} .card:hover .go{color:var(--gold-2);} figcaption,.credit{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.05em; color:var(--soft);margin-top:6px;} /* Schlichte Kästen ohne Bild */ .boxes{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px;} .box{border:1px solid var(--line);padding:24px 22px;} .box h3{font-size:19px;} .box p{color:var(--muted);font-size:14.5px;margin-top:10px;line-height:1.6;} .box .go{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--gold);margin-top:14px;} /* ---------- Zweispaltiges Layout der Detailseiten ---------- */ .split{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;} .prose{min-width:0;} .prose h2{font-size:clamp(22px,5.4vw,31px);margin-top:38px;} .prose h2:first-child{margin-top:0;} .prose h3{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.03em; color:var(--gold-2);margin-top:28px;} .prose p{color:var(--muted);font-size:16.5px;line-height:1.8;margin-top:12px;text-wrap:pretty;} .prose p b,.prose li b{color:var(--text);font-weight:600;} .prose a{color:var(--gold);border-bottom:1px solid var(--line);} .prose a:hover{color:var(--gold-2);} .prose ul{list-style:none;margin-top:16px;display:grid;gap:11px;} .prose ul li{position:relative;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.65;} .prose ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px; border:1px solid var(--gold);transform:rotate(45deg);} .prose ol{list-style:none;margin-top:18px;display:grid;gap:14px;counter-reset:s;} .prose ol li{position:relative;padding-left:44px;color:var(--muted);font-size:16px;line-height:1.65;} .prose ol li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute; left:0;top:0;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--gold);} /* Schaltflächen behalten ihre Gestaltung auch im Fließtext. Ohne diese Regeln gewinnt `.prose a` (0,1,1) gegen `.btn-gold` (0,1,0) und färbt die Beschriftung gold ein — auf goldenem Grund also unsichtbar. */ .prose a.btn{border-bottom:0;} .prose a.btn-gold,.prose a.btn-gold:hover{color:#14100E;} .prose a.btn-outline{color:var(--text);} .prose a.btn-outline:hover{color:var(--gold);} aside.side{display:grid;gap:20px;align-content:start;min-width:0;} aside.side figure img{width:100%;border:1px solid var(--line);} .panel{border:1px solid var(--line);background:var(--surface);padding:24px 22px;} .panel.mark{border-top:2px solid var(--gold);} .panel h2{font-size:20px;} .panel h3{font-size:18px;} /* ---------- Preiszeilen ---------- */ .prices{margin-top:16px;} .prow{display:grid;grid-template-columns:1fr;gap:3px;padding:13px 0;border-bottom:1px solid var(--line-2);} .prow:last-child{border-bottom:0;} .prow .nm{color:var(--text);font-size:16px;} .prow .nm small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px;} .prow .pr{font-family:var(--sans);font-size:15px;color:var(--gold-2);letter-spacing:.02em;} .notice{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--gold); padding:20px;font-family:var(--sans);font-size:12.5px;line-height:1.85;color:var(--muted); margin-top:26px;} .notice a{color:var(--gold);} .panel .notice{margin-top:18px;background:none;border:0;border-top:1px solid var(--line); padding:16px 0 0;font-size:12px;} /* ---------- Ablaufliste ---------- */ .steps{list-style:none;display:grid;gap:14px;margin-top:16px;} .steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;color:var(--muted);font-size:15px; line-height:1.6;} .steps li .n{font-family:var(--sans);font-size:13px;color:var(--gold);letter-spacing:.06em;} .steps li b{color:var(--text);font-weight:600;} /* ---------- Häufige Fragen ---------- */ .faq{border-top:1px solid var(--line);margin-top:26px;} details.q{border-bottom:1px solid var(--line);} details.q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start; justify-content:space-between;gap:18px;padding:19px 2px;font-size:18px;color:var(--text); transition:color .2s;} details.q summary::-webkit-details-marker{display:none;} details.q summary:hover{color:var(--gold);} details.q .sign{flex:none;width:22px;height:22px;position:relative;margin-top:5px;} details.q .sign::before,details.q .sign::after{content:"";position:absolute;background:var(--gold); transition:transform .25s;} details.q .sign::before{top:10px;left:2px;right:2px;height:1.5px;} details.q .sign::after{left:10px;top:2px;bottom:2px;width:1.5px;} details.q[open] .sign::after{transform:scaleY(0);} details.q .a{padding:0 2px 22px;color:var(--muted);font-size:16px;line-height:1.8;max-width:68ch;} details.q .a p+p{margin-top:12px;} details.q .a a{color:var(--gold);} /* ---------- Termine ---------- */ .dates{display:grid;gap:1px;margin-top:18px;} .dates .d{display:flex;justify-content:space-between;align-items:center;gap:12px 18px;flex-wrap:wrap; padding:15px 0;border-bottom:1px solid var(--line-2);} .dates .d .when{font-size:16.5px;color:var(--text);} .dates .d .when small{color:var(--muted);font-size:14px;} .dates .d .book{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);border:1px solid var(--line);padding:10px 16px;min-height:40px; display:inline-flex;align-items:center;transition:border-color .2s,color .2s;} .dates .d .book:hover{border-color:var(--gold);color:var(--gold-2);} .dates .d.pause{color:var(--soft);font-style:italic;justify-content:flex-start;} /* ---------- Formular ---------- */ .form{display:grid;gap:17px;margin-top:22px;} .form .f2{display:grid;grid-template-columns:1fr;gap:17px;} .form label{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--gold);margin-bottom:7px;} .form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{ width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--text); font-family:var(--serif);font-size:16.5px;padding:13px 14px;min-height:48px;border-radius:0; transition:border-color .2s;-webkit-appearance:none;appearance:none;} .form select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%), linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px); background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;} .form textarea{min-height:132px;resize:vertical;line-height:1.6;} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);outline:none;} .form input::placeholder,.form textarea::placeholder{color:var(--soft);opacity:1;} .form fieldset{border:1px solid var(--line);padding:16px 16px 18px;} .form legend{font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--gold);padding:0 8px;} .form .radios{display:grid;gap:10px;} .form .radios label{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:16px; letter-spacing:0;text-transform:none;color:var(--text);margin:0;min-height:44px;cursor:pointer;} .form input[type=radio],.form input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--gold);} .form .check{display:flex;gap:12px;align-items:flex-start;} .form .check input{margin-top:3px;} .form .check span{color:var(--muted);font-size:14.5px;line-height:1.6;} .form .check a{color:var(--gold);} .form button{justify-self:start;width:100%;} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .formnote{color:var(--soft);font-size:13.5px;line-height:1.6;} /* ---------- Kontaktangaben ---------- */ /* Verweis auf den Kartendienst. Bewusst als Verweis gestaltet, nicht als Schaltfläche: Es passiert nichts, solange niemand klickt. */ .maplink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans); font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);} .maplink:hover{color:var(--gold-2);} .kv{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:10px; color:var(--gold);margin-top:18px;} .kv+p{font-size:17px;margin-top:4px;} address{font-style:normal;color:var(--muted);line-height:1.85;margin-top:10px;} table.hours{width:100%;border-collapse:collapse;margin-top:10px;} table.hours td{padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15.5px;} table.hours tr:last-child td{border-bottom:0;} table.hours td:last-child{text-align:right;color:var(--muted);} .tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} /* ---------- Handlungsaufruf ---------- */ .cta{border-top:1px solid var(--line);background:var(--bg-2);} .cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap; padding-top:44px;padding-bottom:44px;} .cta h2{font-size:clamp(22px,5vw,32px);} .cta p{color:var(--muted);margin-top:8px;} /* ---------- Rechtstexte ---------- */ .legal h2{font-size:clamp(20px,4.6vw,26px);margin:36px 0 4px;} .legal h2:first-of-type{margin-top:0;} .legal p{color:var(--muted);font-size:16.5px;line-height:1.8;margin-top:12px;} .legal ul{list-style:none;margin-top:12px;display:grid;gap:9px;} .legal li{position:relative;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.65;} .legal li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px; border:1px solid var(--gold);transform:rotate(45deg);} .legal b{color:var(--text);font-weight:600;} .legal a{color:var(--gold);} .legal address{color:var(--muted);} /* ---------- Melde- und Fehlerseiten ---------- */ .msgpage{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:70px 0;} .msgpage .code{font-family:var(--sans);font-weight:300;font-size:clamp(58px,16vw,110px); color:var(--gold);line-height:1;} .msgpage h1{font-size:clamp(25px,6.5vw,38px);margin-top:16px;} .msgpage p{color:var(--muted);margin-top:14px;max-width:52ch;} .msgpage .btnrow{justify-content:center;} /* ---------- Fußzeile ---------- */ footer.site{background:var(--deep);border-top:1px solid var(--line);padding:48px 0 24px; color:var(--muted);} .fgrid{display:grid;grid-template-columns:1fr;gap:30px;} footer h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:11px; color:var(--gold);font-weight:500;margin-bottom:13px;} footer address{color:var(--text);font-size:15px;margin-top:0;} footer .flinks{display:grid;gap:9px;font-size:15px;} footer a:hover{color:var(--gold);} .fnote{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-family:var(--sans); font-size:11.5px;line-height:1.9;letter-spacing:.02em;color:var(--soft);} /* ========================================================================== Hilfsklassen Bewusst wenige, benannt nach ihrer Aufgabe. Sie ersetzen style-Attribute, damit die Content-Security-Policy ohne 'unsafe-inline' auskommt. ========================================================================== */ .mt0{margin-top:0;} .mt14{margin-top:14px;} .mt20{margin-top:20px;} .mt48{margin-top:clamp(34px,5vw,48px);} .nb{border-bottom:0;} .gold{color:var(--gold);} .muted{color:var(--muted);} .muted-lt{color:var(--muted);font-weight:300;} .r45{aspect-ratio:4/5;object-fit:cover;} .h2-lg{font-size:clamp(26px,6vw,42px);margin-top:14px;} .quote-sm{font-size:20px;margin-top:10px;} .p-sm{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:12px;} .p-note{color:var(--muted);font-size:15px;line-height:1.7;margin-top:12px;} .p-tiny{color:var(--soft);font-size:14px;line-height:1.6;margin-top:18px;} .p-price{color:var(--gold-2);font-family:var(--sans);font-size:13px;margin-top:10px;} .stand{color:var(--soft);font-size:14.5px;margin-top:34px;} .h3-date{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--gold-2); margin-top:36px;letter-spacing:.02em;} .dates-top{margin-top:22px;max-width:520px;} /* Beschriftung der Einwilligung: erbt die Fließtextgestaltung statt der Formularbeschriftung. Der Selektor braucht `.form label.lbl-plain`, weil `.form label` (Versalien, Sperrung, Gold) sonst die höhere Spezifität hat und den Einwilligungstext in Großbuchstaben setzen würde. */ .form label.lbl-plain,.lbl-plain{display:inline;font-family:inherit;font-size:inherit; font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0;} /* ========================================================================== Umbruchpunkte ========================================================================== */ @media(min-width:600px){ :root{--pad:26px;} .cards{grid-template-columns:repeat(2,1fr);} .boxes{grid-template-columns:repeat(2,1fr);} .form .f2{grid-template-columns:1fr 1fr;} .form .radios{grid-template-columns:1fr 1fr;display:grid;} .form button{width:auto;padding-left:36px;padding-right:36px;} .btnrow .btn{flex:0 0 auto;} .announce .a-sec{display:inline;} .prow{grid-template-columns:1fr auto;gap:18px;align-items:baseline;} .prow .pr{text-align:right;white-space:nowrap;} } @media(min-width:820px){ :root{--pad:30px;--headh:76px;} section.band{padding:78px 0;} .pagehero .wrap{padding-top:44px;padding-bottom:54px;} .hero .wrap{padding-top:96px;padding-bottom:80px;} .hero .inner{max-width:860px;} .split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;} .boxes{grid-template-columns:repeat(3,1fr);} .fgrid{grid-template-columns:repeat(2,1fr);gap:34px;} .card{padding:28px;} .card .shot{margin:-28px -28px 20px;} .announce .claim{display:block;} } @media(min-width:1000px){ section.band{padding:92px 0;} .cards{grid-template-columns:repeat(3,1fr);gap:22px;} .fgrid{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:38px;} .burger{display:none;} .navlinks{display:flex;align-items:center;gap:clamp(13px,1.9vw,25px);flex-wrap:wrap; justify-content:flex-end;} .no-js .navlinks{flex-direction:row;width:auto;padding-bottom:0;} .navcta{min-height:0;padding:12px 22px;} } /* Klappmenü — greift nur unterhalb 1000 px, weil .navlinks dort display:none ist */ @media(max-width:999.98px){ .navlinks.open{display:flex;flex-direction:column;align-items:stretch; position:absolute;top:100%;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1); background:#191410;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:4px var(--pad) 22px;box-shadow:0 22px 40px -24px rgba(0,0,0,.9); max-height:calc(100vh - var(--headh));overflow-y:auto;} .navlinks.open a{padding:15px 0;border-bottom:1px solid var(--line);min-height:44px; display:flex;align-items:center;} .navlinks.open .navcta{margin-top:18px;border-bottom:1px solid var(--gold);justify-content:center;} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;} } @media print{ .announce,header.site,.cta,.burger,.hero::after{display:none!important;} body{background:#fff;color:#000;font-size:11pt;} a{color:#000;} .card,.panel,.box,.notice{border-color:#ccc;background:none;} }