/* Impressum und Datenschutz: dieselben Farben und Schriften wie die Startseite */
:root{
  --bg:#EEF5FC; --bg-deep:#DDEAF8; --line:#D3E0EF;
  --blue:#2496ED; --blue-h:#1268BC; --blue-deep:#156FC6;
  --ink:#0E2742; --ink-2:#3D5876; --muted:#566D88; --butter:#F6BE45;
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.8); --glass-border:rgba(255,255,255,.9);
  --glass-shadow:0 30px 70px -36px rgba(14,39,66,.42), inset 0 1px 0 rgba(255,255,255,.75);
  --blur:blur(20px) saturate(1.6);
  --display:'Bricolage Grotesque', 'Arial Rounded MT Bold', ui-sans-serif, system-ui, sans-serif;
  --sans:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
body{margin:0; min-height:100vh; color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; background:
  radial-gradient(680px 680px at 92% 180px, rgba(36,150,237,.16), transparent 70%),
  radial-gradient(760px 760px at 0% 900px, rgba(125,189,240,.32), transparent 70%),
  linear-gradient(var(--bg) 0, var(--bg-deep) 100%) fixed}
a{color:var(--blue-deep)}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.topbar{position:sticky; top:0; z-index:5; display:flex; justify-content:flex-start; align-items:center; gap:14px; padding:calc(16px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) 12px calc(20px + env(safe-area-inset-left,0px))}
.brand, .pill-ghost{background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow)}
.brand{display:inline-flex; align-items:center; height:60px; padding:0 24px; border-radius:999px; text-decoration:none; background:rgba(255,255,255,.94); box-shadow:0 22px 50px -26px rgba(14,39,66,.55), inset 0 1px 0 #fff}
.brand img{height:29px; width:auto; display:block}
.top-actions{display:flex; gap:12px}
.pill{display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border-radius:999px; font:600 15px/1 var(--sans); text-decoration:none; transition:background .15s}
.pill-ghost{color:var(--ink)}
.pill-ghost:hover{background:rgba(255,255,255,.92)}
.pill-blue{background:var(--blue-deep); color:#fff}
.pill-blue:hover{background:var(--blue-h)}

/* Pulsieren: ein Ring läuft von der Schaltfläche nach außen, damit „Termin ändern" und „Projekt anfragen" auffallen */
.pulse{position:relative}
.pulse::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; animation:pulse 2.6s ease-out infinite}
.pulse-b::after{animation-delay:1.3s}   /* die beiden Schaltflächen pulsieren abwechselnd */
.pulse:hover::after, .pulse:focus-visible::after{animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,150,237,.6)} 70%,100%{box-shadow:0 0 0 16px rgba(36,150,237,0)}}
@media (prefers-reduced-motion:reduce){ .pulse::after{animation:none} }

.wrap{max-width:860px; margin-inline:auto; padding-inline:24px}
main{padding-block:clamp(24px,5vw,56px) clamp(56px,8vw,96px)}
.legal{background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); border-radius:32px; padding:clamp(24px,5vw,56px)}
.eyebrow{font:600 11px/1 var(--mono); letter-spacing:.08em; color:var(--blue-deep); margin:0 0 16px}
h1{font:800 clamp(32px,5vw,52px)/1 var(--display); letter-spacing:-.035em; margin:0 0 8px; hyphens:auto; overflow-wrap:break-word}
h2{font:800 22px/1.2 var(--display); letter-spacing:-.02em; margin:40px 0 10px; hyphens:auto}
h3{font:600 17px/1.3 var(--sans); margin:24px 0 6px}
p, li{color:var(--ink-2)}
p{margin:0 0 14px; max-width:70ch}
ul{margin:0 0 14px; padding-left:22px; max-width:70ch}
li{margin-bottom:4px}
strong{color:var(--ink); font-weight:600}
.stand{font:500 13px/1.4 var(--mono); color:var(--muted); margin-bottom:0}
.placeholder{background:var(--butter); color:var(--ink); border-radius:6px; padding:1px 6px; font-weight:600}
table{border-collapse:collapse; width:100%; margin:6px 0 18px; font-size:15px}
th, td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-top:1px solid var(--line); color:var(--ink-2)}
th{font:600 12px/1.3 var(--mono); letter-spacing:.04em; color:var(--muted); border-top:0}
td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}

footer{padding-block:0 40px; font-size:13px; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px}
footer nav{display:flex; gap:16px}
footer a{color:inherit}
footer img{height:18px; width:auto; display:block}

@media (max-width:760px){
  .pill{height:38px; font-size:14px}
  .brand{height:48px; padding:0 15px}
  .brand img{height:21px}
  .pill{padding:0 15px}
  .top-actions .pill-ghost{display:none}
  .legal{border-radius:24px}
  table, tbody, tr, td{display:block; width:100%}
  thead{display:none}
  tr{border-top:1px solid var(--line); padding:10px 0}
  td{border:0; padding:2px 0}
  td:first-child{white-space:normal}
}