/* Both typefaces come from this server: the page opens no connection to anyone else. */
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/bricolage-grotesque.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(fonts/figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
:root { interpolate-size: allow-keywords; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #1b1f3b; }
a { color: #2236a8; } a:hover { color: #1b1f3b; }
* { box-sizing: border-box; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid #2236a8; outline-offset: 3px; }
.dp { font-family: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif; }
.inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* Register cards: every section is a full-width card that overlaps the one before, with its index tab sticking out */
.sheet { position: relative; margin-top: -56px; border-radius: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 56px) 0 0; padding: clamp(64px, 7vw, 104px) 0 clamp(150px, 13vw, 200px); scroll-margin-top: 56px; }
.reg { position: absolute; top: -45px; left: min(var(--tx), calc(100% - 230px)); height: 47px; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-radius: 18px 18px 0 0; background: inherit; color: inherit; font: 700 16px/1 'Figtree', sans-serif; white-space: nowrap; }
.reg span { font: 800 14px/1 'Bricolage Grotesque', sans-serif; opacity: .7; }

.btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 28px; border-radius: 999px; font: 700 17px/1 'Figtree', system-ui, sans-serif; text-decoration: none; background: #1b1f3b; color: #fff; border: 2px solid #1b1f3b; cursor: pointer; transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .25s, color .25s; }
@media (hover: hover) { .btn:hover { transform: scale(1.05) rotate(-1.5deg); background: #2236a8; border-color: #2236a8; color: #fff; } }
.btn.sun { background: #ffd24a; border-color: #ffd24a; color: #1b1f3b; }
@media (hover: hover) { .btn.sun:hover { background: #fff; border-color: #fff; color: #1b1f3b; } }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
@media (hover: hover) { .btn.ghost:hover { background: #fff; color: #1b1f3b; border-color: #fff; } }

/* Quick links: small index cards in the colour of the section they jump to */
.q { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px 12px 18px; border-radius: 18px; color: #1b1f3b; text-decoration: none; font-weight: 700; font-size: 17px; line-height: 1.15; transition: rotate .4s cubic-bezier(.3,1.6,.5,1), translate .4s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
.q b { font: 800 14px/1 'Bricolage Grotesque', sans-serif; opacity: .75; }
.q svg { margin-left: auto; flex: none; transition: translate .35s cubic-bezier(.3,1.6,.5,1); }
@media (hover: hover) { .q:hover { color: #1b1f3b; rotate: 0deg !important; translate: 0 -6px; box-shadow: 0 18px 30px -16px rgba(0,0,0,.55); } }
@media (hover: hover) { .q:hover svg { translate: 0 4px; } }

/* The dock follows the reader: always one tap to any section, the current one lit */
.dock { position: sticky; bottom: 14px; z-index: 30; width: max-content; max-width: calc(100% - 20px); margin: -72px auto 0; display: flex; gap: 2px; padding: 6px; background: #1b1f3b; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; overflow-x: auto; scrollbar-width: none; box-shadow: 0 16px 40px -12px rgba(10,12,30,.7); }
.dock::-webkit-scrollbar { display: none; }
.dock a { flex: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 999px; color: #d5d9f0; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .4s cubic-bezier(.2,.7,.2,1), color .4s, padding .4s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .dock a:hover { color: #fff; background: rgba(255,255,255,.12); } }
.dock a.on { background: #ffd24a; color: #1b1f3b; padding: 0 20px; }
.dock a.cta { color: #ffd24a; }
.dock a.cta.on { color: #1b1f3b; }
.prog { position: sticky; top: 0; z-index: 30; height: 4px; margin-bottom: -4px; background: #ffd24a; transform: scaleX(0); transform-origin: 0 50%; }

.h2 { font: 700 clamp(34px, 4.8vw, 68px)/1.02 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -.03em; text-wrap: balance; max-width: 16em; }
.hl { background: linear-gradient(#ffd24a, #ffd24a) 0 86% / 100% 30% no-repeat; }
/* The contact form: one white card on the blue sheet; the server (POST /kontakt) answers with /danke.html */
.kform { width: min(100%, 640px); margin-top: 40px; padding: clamp(20px, 4vw, 36px); border-radius: 28px; background: #fff; color: #1b1f3b; text-align: left; display: grid; gap: 18px; }
.kform label { display: grid; gap: 6px; font-weight: 700; font-size: 16px; }
.kform label small { font-weight: 400; font-size: 14px; color: #4a5070; }
.kform input, .kform textarea { font: 400 17px/1.4 'Figtree', system-ui, sans-serif; color: inherit; background: #f2f4fb; border: 2px solid #c9cfe8; border-radius: 14px; padding: 12px 14px; width: 100%; min-height: 50px; }
.kform textarea { min-height: 150px; resize: vertical; }
.kform input:focus-visible, .kform textarea:focus-visible { outline: 3px solid #2236a8; outline-offset: 2px; border-color: #2236a8; background: #fff; }
.kform .btn { justify-self: start; }
.kform .klein { font-size: 14px; line-height: 1.5; color: #4a5070; }
.kform .falle { display: none; }
.lead { font-size: 20px; line-height: 1.55; max-width: 58ch; margin-top: 22px; text-wrap: pretty; }
.h3 { font: 700 23px/1.15 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -.015em; }
.ph { border: 6px solid #1b1f3b; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -24px rgba(27,31,59,.55); transition: rotate .5s cubic-bezier(.3,1.5,.5,1), translate .5s cubic-bezier(.3,1.5,.5,1), scale .5s cubic-bezier(.3,1.5,.5,1); }
.ph img { width: 100%; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; }
.scr { border: 3px solid #1b1f3b; border-radius: 18px; overflow: hidden; background: #fff; }
.scr img { width: 100%; height: auto; }
.blob { position: absolute; border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; pointer-events: none; }
.tile { border-radius: 32px; transition: rotate .45s cubic-bezier(.3,1.5,.5,1), translate .45s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
@media (hover: hover) { .tile:hover { rotate: 0deg !important; translate: 0 -8px; box-shadow: 0 26px 44px -28px rgba(27,31,59,.5); } }
@media (hover: hover) { .tile:hover .ph { rotate: 0deg !important; translate: 0 -12px; } }
@media (hover: hover) { .pop:hover .ph { rotate: 0deg !important; scale: 1.04; } }
.wh { background: #fff; border-radius: 28px; padding: 26px 28px; }
.dot li { display: flex; gap: 14px; padding: 12px 0; line-height: 1.5; }
.dot li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #ffd24a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.5' fill='none' stroke='%231b1f3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; }
.num { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #2236a8; color: #fff; font: 800 30px/1 'Bricolage Grotesque', sans-serif; transition: scale .4s cubic-bezier(.3,1.6,.5,1), rotate .4s cubic-bezier(.3,1.6,.5,1); }
li:hover > .num { scale: 1.12; rotate: -8deg; }
.faq details { background: #f2f4fb; border-radius: 26px; margin-top: 10px; transition: background .25s; }
.faq details:hover, .faq details[open] { background: #dbe8ff; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 20px 28px; font: 700 21px/1.25 'Bricolage Grotesque', sans-serif; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #1b1f3b; color: #fff; display: flex; align-items: center; justify-content: center; font: 500 22px/1 'Figtree', sans-serif; transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .25s; }
.faq details[open] summary::after { transform: rotate(135deg); background: #2236a8; }
.faq details p { padding: 0 72px 24px 28px; max-width: 66ch; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.2,.7,.2,1), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

@keyframes up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(90px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sticker { from { opacity: 0; transform: translateY(40px) rotate(-10deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes regup { from { transform: translateY(47px); } to { transform: none; } }
@keyframes ink { from { background-size: 0% 30%; } to { background-size: 100% 30%; } }
@keyframes morph { 0% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; } 50% { border-radius: 44% 56% 42% 58% / 57% 43% 57% 43%; } 100% { border-radius: 52% 48% 60% 40% / 42% 52% 48% 58%; } }
@keyframes bob { from { translate: 0 -7px; } to { translate: 0 9px; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dockin { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
@keyframes slide { from { translate: 0 60px; } to { translate: 0 -60px; } }
@media (prefers-reduced-motion: no-preference) {
  .in { animation: up .8s cubic-bezier(.2,.8,.2,1) both; }
  .drop { animation: drop 1s cubic-bezier(.3,1.3,.5,1) both; }
  .bob { animation: bob 4s ease-in-out infinite alternate; }
  .blob { animation: morph 9s ease-in-out infinite alternate; }
  .dock { animation: dockin .9s cubic-bezier(.3,1.3,.5,1) 1s both; }
  .t1 { animation-delay: .1s; } .t2 { animation-delay: .2s; } .t3 { animation-delay: .32s; } .t4 { animation-delay: .45s; } .t5 { animation-delay: .58s; } .t6 { animation-delay: .7s; } .t7 { animation-delay: .82s; }
  @supports (animation-timeline: view()) {
    .rv { animation: up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .rv.s2 { animation-range: entry 12% entry 78%; } .rv.s3 { animation-range: entry 24% entry 95%; } .rv.s4 { animation-range: entry 36% cover 28%; }
    .rs { animation: sticker linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .rs.s2 { animation-range: entry 15% entry 100%; }
    .reg { animation: regup linear both; animation-timeline: view(); animation-range: entry 0% entry 260%; }
    .hl { animation: ink linear both; animation-timeline: view(); animation-range: entry 90% cover 40%; }
    .par { animation: slide linear both; animation-timeline: view(); animation-range: cover; }
    .prog { animation: grow linear both; animation-timeline: scroll(root); }
  }
}
@media (min-width: 900px) {
  .stag > :nth-child(even) { margin-top: 72px; }
  .stair > :nth-child(2) { margin-top: 36px; } .stair > :nth-child(3) { margin-top: 72px; } .stair > :nth-child(4) { margin-top: 108px; }
  .zig > :nth-child(even) { margin-left: 56px; } .zig > :nth-child(odd) { margin-right: 56px; }
}
@media (max-width: 899px) { .reg { height: 42px; top: -40px; padding: 0 16px; font-size: 15px; } }
@media (max-width: 480px) { header .btn { font-size: 14px !important; padding: 0 12px !important; } }

/* The arms: no ground of their own, taller than the head they hang from */
.marke { display: flex; align-items: center; gap: 16px; text-decoration: none; color: #fff; font-weight: 800; font-size: 26px; }
@media (hover: hover) { .marke:hover { color: #fff; } }
.wappen { flex: none; align-self: flex-start; margin: -6px 0 -83px; filter: drop-shadow(0 16px 18px rgba(10,12,30,.45)); transition: translate .45s cubic-bezier(.3,1.5,.5,1); }
.wappen img { width: 124px; max-width: none; height: auto; }
@media (hover: hover) { .marke:hover .wappen { translate: 0 6px; } }
/* ... and at the foot, large, standing half above the edge */
.fuss { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 16px; }
.fuss-wappen { width: clamp(120px, 14vw, 172px); height: auto; margin-top: calc(-44px - clamp(64px, 7.5vw, 96px)); filter: drop-shadow(0 18px 20px rgba(10,12,30,.5)); }
.fuss-name { font-weight: 800; font-size: clamp(32px, 4.2vw, 52px); line-height: 1; letter-spacing: -.035em; color: #fff; margin-top: 12px; }
.fuss-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; margin-top: 6px; }
.fuss-links a { min-height: 44px; display: inline-flex; align-items: center; color: #ffd24a; }

/* ---------- The phone: its own layout, not the desktop stacked ---------- */
@media (max-width: 700px) {
  .marke { font-size: 19px; gap: 10px; }
  .wappen { margin: -8px 0 -31px; }
  .wappen img { width: 72px; }
  #top { padding-bottom: 112px !important; }
  #top > div.inner { padding-top: 60px !important; gap: 28px !important; }
  #top h1 { font-size: clamp(44px, 13.5vw, 60px) !important; margin-top: 20px !important; }
  #top .btn { flex: 1 1 auto; justify-content: center; padding: 0 18px; }


  /* the sheets: less air, the tab still clear of the sheet before */
  .sheet { padding: 56px 0 116px; border-radius: 30px 30px 0 0; }
  .h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .lead { font-size: 18px; margin-top: 16px; }

  /* Designs and Für Besucher: one row to swipe, the next card looking in */
  .wisch { display: flex !important; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 28px calc(-1 * clamp(20px, 5vw, 56px)) 0 !important; padding: 14px clamp(20px, 5vw, 56px) 26px; }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > * { flex: none; width: 68%; scroll-snap-align: center; animation: none !important; }
  .wisch-breit > * { width: 86%; }
  .wisch .tile { padding: 16px 16px 20px !important; border-radius: 24px; height: 100%; }
  .wisch figcaption { margin-top: 20px !important; }
  .wisch .wh { padding: 18px 18px 20px; border-radius: 20px; }

  /* cards and chips a size smaller */
  .wh { padding: 20px 20px 22px; border-radius: 22px; }
  .h3 { font-size: 20px; }
  #pflege .inner > div { margin-top: 36px !important; gap: 28px !important; }
  #von-selbst ul { margin-top: 32px !important; gap: 10px !important; font-size: 16px !important; }
  #von-selbst .tile { padding: 16px 20px !important; border-radius: 24px !important; }
  #datenschutz .stag { margin-top: 36px !important; gap: 12px !important; }
  #datenschutz .stag > div { padding: 22px 20px !important; border-radius: 26px !important; }
  .dot li { gap: 12px; padding: 9px 0; font-size: 16px; }
  #verein .inner > div { margin-top: 36px !important; gap: 28px !important; }
  #verein .pop { flex-basis: 190px !important; max-width: 190px; padding: 12px 14px !important; }

  /* Ablauf: number left, text right */
  ol.stair { margin-top: 36px !important; gap: 10px !important; }
  ol.stair > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 18px !important; }
  ol.stair .num { width: 46px; height: 46px; font-size: 22px; grid-row: 1 / span 2; }
  ol.stair .h3 { margin-top: 2px !important; }
  ol.stair p { grid-column: 2; }

  /* Preis */
  #preis p.tile { padding: 26px 26px 28px !important; font-size: 17px !important; }
  #preis p.tile b { font-size: clamp(54px, 17vw, 72px) !important; }
  #preis .inner > div { margin-top: 36px !important; }
  #preis .wh { padding: 22px !important; border-radius: 24px !important; }

  .faq summary { font-size: 18px; padding: 16px 16px 16px 20px; }
  .faq details p { padding: 0 20px 20px; }
  .faq details { border-radius: 22px; }
  #kontakt .btn { flex: 1 1 100%; justify-content: center; }


  #kontakt { padding-bottom: 184px; }
  .fuss-wappen { margin-top: -112px; }
}
/* On a phone the head is the arms and the name; the offer button stands right below in the opening and in the dock. */
@media (max-width: 480px) { header .btn { display: none; } .wappen { margin: -8px 0 -46px; } .wappen img { width: 84px; } .marke { font-size: 23px; gap: 12px; } #top > div.inner { padding-top: 68px !important; } }

/* ---------- The dock, every width: it comes up once the reader has left the top; one marker slides between the entries ---------- */
a, button, summary { -webkit-tap-highlight-color: transparent; }
.dock { animation: none !important; align-items: center; transition: translate .55s cubic-bezier(.2,.9,.3,1), opacity .3s; }
.dock:not(.show) { translate: 0 160%; opacity: 0; pointer-events: none; }
.dock-label { flex: none; padding: 0 8px 0 16px; color: #aeb5dd; font-weight: 600; font-size: 14px; white-space: nowrap; }
.dock a { position: relative; z-index: 1; transition: color .35s, background .25s; }
.dock a.on { background: transparent; padding: 0 15px; }
.dock-hi { position: absolute; z-index: 0; left: 0; top: 6px; height: 44px; width: 0; border-radius: 999px; background: #ffd24a; opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.2,.8,.2,1), width .55s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.dock-menu, .inhalt { display: none; }
@keyframes wo { from { opacity: 0; translate: 0 7px; } }
@media (prefers-reduced-motion: reduce) { .dock, .dock-hi, .inhalt { transition: none !important; } }

/* ---------- The phone, worked through ---------- */
@media (max-width: 700px) {
  /* one way to get around: the bar at the bottom. It says where you are and opens the contents. */
  nav[aria-label="Schnell zu"] { display: none; }
  .dock { width: calc(100% - 16px); max-width: 460px; bottom: 10px; gap: 6px; overflow: visible; }
  .dock:not(.show) { translate: none; opacity: 1; pointer-events: auto; }
  .dock > a:not(.cta), .dock-label, .dock-hi { display: none; }
  .dock-menu { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: scale .2s, background .2s; }
  .dock-menu > svg { flex: none; }
  .dock-wo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .dock-wo small { font-size: 11.5px; font-weight: 600; color: #aeb5dd; }
  .dock-wo b { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-wo b.neu { animation: wo .3s cubic-bezier(.2,.8,.2,1); }
  .dock-menu .chev { transition: rotate .35s cubic-bezier(.2,.8,.2,1); }
  body:has(.inhalt:popover-open) .dock-menu { background: rgba(255,255,255,.2); }
  body:has(.inhalt:popover-open) .dock-menu .chev { rotate: 180deg; }
  .dock a.cta, .dock a.cta.on { flex: none; min-height: 48px; padding: 0 20px; background: #ffd24a; color: #1b1f3b; font-weight: 700; font-size: 15px; transition: scale .2s; }
  .dock-menu:active, .dock a.cta:active { scale: .96; }

  /* the contents: a sheet that rises from the bar, the ten index cards in the colours of their sections */
  .inhalt { display: block; position: fixed; inset: auto 8px 76px 8px; width: auto; max-width: 460px; height: auto; max-height: min(74vh, 580px); margin: 0 auto; padding: 20px 14px 10px; border: 0; border-radius: 28px; overflow: auto; background: #2a3058; color: #fff; box-shadow: 0 24px 60px -10px rgba(10,12,30,.85); opacity: 0; translate: 0 32px; transition: opacity .25s, translate .45s cubic-bezier(.2,.9,.3,1), overlay .45s allow-discrete, display .45s allow-discrete; }
  .inhalt:not(:popover-open) { display: none; }
  .inhalt:popover-open { opacity: 1; translate: 0 0; }
  @starting-style { .inhalt:popover-open { opacity: 0; translate: 0 32px; } }
  .inhalt::backdrop { background: rgba(10,12,30,.55); }
  .inhalt > p { font-weight: 800; font-size: 21px; padding: 0 6px 14px; }
  .inhalt-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .inhalt .q { min-height: 54px; padding: 8px 10px 8px 14px; gap: 9px; font-size: 15.5px; border-radius: 16px; transition: scale .2s; }
  .inhalt .q:active { scale: .96; }
  .inhalt .q svg { display: none; }
  .inhalt .q[aria-current] { outline: 3px solid #ffd24a; outline-offset: 2px; }
  .inhalt-top { display: flex; justify-content: center; align-items: center; min-height: 48px; margin-top: 6px; color: #d5d9f0; font-weight: 600; font-size: 15px; }

  /* the register stays stepped on a narrow sheet */
  .reg { left: min(calc(var(--tx) * 0.72), calc(100% - 176px)); }

  /* the showcases: two columns, picture and name; the describing text is left to the wide screen */
  .wisch { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; overflow: visible; scroll-snap-type: none; margin: 28px 0 0 !important; padding: 0; }
  .wisch > *, .wisch-breit > * { width: auto; }
  .wisch figcaption p, .wisch figcaption a, .wisch figcaption .h3 ~ span { display: none !important; }
  .wisch .h3 { font-size: 16px; line-height: 1.2; }
  .wisch .tile { padding: 9px 9px 14px !important; border-radius: 20px; }
  .wisch .tile figcaption { margin-top: 14px !important; gap: 6px !important; padding: 0 3px; }
  .wisch .tile figcaption > span { font-size: 12px !important; padding: 4px 10px !important; }
  .wisch .scr { border-width: 2px; border-radius: 10px; }
  .wisch .tile .ph { border-width: 3px; border-radius: 11px; margin-bottom: -8px !important; }
  .wisch .pop > div { padding: 10px 12px 0 !important; }
  .wisch .pop .ph { border-width: 4px; border-radius: 20px; }
  .wisch .pop .wh { margin-top: -22px !important; padding: 12px 12px 13px; border-radius: 16px; }

  /* a phone has less to spare: nothing moves unless the reader moves it */
  .blob, .bob { animation: none !important; }
  .btn:active { scale: .97; }
}

/* ---------- The pages below the start page: the same sheets, a smaller opening, no dock ---------- */
@media (max-width: 700px) { #top.unter h1 { font-size: clamp(34px, 10.4vw, 46px) !important; } }

/* Startseite für Schulträger: the price line in the hero, Das Angebot as a straight grid, the domain box. */
.preis-chip { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 22px; padding: 10px 18px; border-radius: 16px; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; }
.preis-chip b { color: #ffd24a; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 20px; }
/* Das Angebot: a calm, straight grid, read at a glance; titles carry the message. */
.angebot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin-top: 52px; }
.angebot li { background: #fff; border-radius: 24px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.angebot h3 { display: flex; align-items: center; gap: 12px; font: 800 21px/1.2 'Bricolage Grotesque', 'Figtree', sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.angebot h3::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ffd24a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.5' fill='none' stroke='%231b1f3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.angebot p { font-size: 16px; color: #3a3f63; }
.rabatt { display: inline-block; margin-top: 32px; background: #ffd24a; color: #1b1f3b; font-weight: 800; font-size: 18px; padding: 10px 20px; border-radius: 999px; }
.domain { margin-top: 28px; background: #fff; border-radius: 32px; padding: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px 40px; align-items: start; }
.domain .bsp { display: inline-block; margin-top: 12px; font-weight: 700; background: #dbe8ff; padding: 6px 14px; border-radius: 12px; }

/* Designs: the closing card for a design of the school's own -- wider, straight and centred, set apart from the tilted design tiles above. */
.eigen { max-width: 880px; margin: 96px auto 0; background: #1b1f3b; color: #fff; border-radius: 36px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.eigen h3 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; max-width: 18em; text-wrap: balance; }
.eigen p { color: #d5d9f0; max-width: 40em; text-wrap: pretty; }
.eigen .btn { margin-top: 10px; }