/* The warm design stays; chapters and the screenshot collage form the new layer. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.story-site .brand{font-size:clamp(22px,2.1vw,30px)}
.story-site .hero-copy h1{font-size:clamp(40px,4.2vw,66px);line-height:1.07}
.story-site .hero-copy{width:46%;padding-bottom:0}
.story-site .hero-copy .lead{font-size:clamp(16px,1.25vw,19px);max-width:440px}
.story-site .hero{min-height:650px;padding-top:24px}
.story-site .hero-note{bottom:24px;left:0;font-size:18px}
.story-site .hero-seal{display:none}
.story-site .collage{inset:0 -3.5% 14px 35%;isolation:isolate}
.story-site .project{border:6px solid var(--paper);padding:0;box-shadow:0 16px 28px -20px #34150e50;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-radius .45s;transform-origin:center;z-index:1}
.story-site .project-main{right:0;top:0;width:78%;height:65%;border-radius:42% 3% 12% 3% / 19% 4% 17% 5%;transform:rotate(2deg)}
.story-site .project-robin{left:0;bottom:0;width:50%;height:43%;border-radius:24% 5% 5% 5% / 16% 8% 6% 6%;transform:rotate(-5deg);z-index:2}
.story-site .project-song{left:49%;bottom:-2px;width:49%;height:42%;border-radius:5% 17% 24% 5% / 5% 13% 17% 6%;transform:rotate(4deg);z-index:3}
.story-site .project img{object-fit:cover;object-position:center;width:100%;height:100%;transform:none;transition:filter .4s}
.story-site .project .project-caption{padding:38px 20px 17px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;color:white;background:linear-gradient(transparent,#170e09e8);opacity:0;transform:translateY(15px);transition:opacity .3s,transform .3s}
.project-caption strong{font-size:19px;font-weight:400}.project-caption small{font-size:13px}
.story-site .project:hover,.story-site .project:focus-visible{transform:rotate(0) scale(1.075);z-index:8;box-shadow:0 26px 55px -18px #34150e65;border-radius:12px}
.story-site .project:hover .project-caption,.story-site .project:focus-visible .project-caption{opacity:1;transform:none}

/* Continuous page: normal document scrolling, with persistent anchor navigation. */
.story-site{padding-bottom:100px}
.story-site .site-header{width:92%;gap:24px;flex-wrap:wrap}
.story-site .site-header nav{margin-left:auto;gap:22px;flex-wrap:wrap}
.story-site .hero{min-height:700px;padding-top:35px;padding-bottom:45px}
.story-site .hero-copy{width:46%}
.story-site .hero-copy h1{font-size:clamp(38px,3.7vw,60px)}
.story-site h1 em,.story-site h2 em{color:var(--clay)}
.story-site .collage{inset:calc(var(--story-header-height) + 6px) -3.5% 25px 35%}


.story-site .project-robin img{object-position:left center}

.story-site .section{padding-block:80px;scroll-margin-top:24px}
.story-nav{position:fixed;inset:auto 0 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--story-nav-height);box-sizing:border-box;padding:12px 4%;background:#f8f2e9f5;border-top:1px solid var(--line);backdrop-filter:blur(12px)}
.story-nav a{text-decoration:none}.story-chapters{display:flex;gap:22px}.story-chapters a{display:flex;gap:6px;align-items:center;font-size:12px;padding:8px 0;border-bottom:2px solid transparent}.chapter-number{font-size:10px}.story-chapters a[aria-current]{color:var(--clay);border-color:var(--clay)}
.story-back,.story-next{font-size:13px;min-width:120px}.story-next{text-align:right;color:var(--clay)}.story-back[aria-disabled=true]{opacity:.3;pointer-events:none}
.project-showcase{display:grid;grid-template-columns:1fr 1.8fr;gap:50px;align-items:center}.project-choices{display:grid;height:min(330px,44vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bfa48a transparent}.project-choice{display:flex;align-items:center;gap:16px;min-height:104px;padding:25px 12px;text-decoration:none;border-bottom:1px solid var(--line)}.project-choice>span:first-child{color:var(--clay)}.project-choice strong,.project-choice small{display:block}.project-choice strong{font:24px var(--serif)}.project-choice small{margin-top:8px}.project-choice b{margin-left:auto}.project-choice.is-active{background:#eee1d2;border-radius:12px}.project-stage-browser{display:block;border:6px solid #fff8ee;border-radius:18px;overflow:hidden;box-shadow:0 15px 35px #34150e15}.project-stage-browser img{width:100%;height:auto;aspect-ratio:1169/803;object-fit:contain;background:#fff}.project-stage-note{padding:18px 6px}.project-stage-note>span{font-size:12px;display:block}.project-stage-note strong{font:25px var(--serif)}.project-stage-note p{margin-top:7px}.chapter-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:35px}
.project-stage-browser img.is-wide-preview{aspect-ratio:1600/852}
@media(max-width:1100px){.story-chapters{gap:12px}.story-back,.story-next{min-width:90px}.story-site .site-header nav{gap:15px}.story-site .collage{left:39%;right:-2%}.story-site .hero-copy{width:48%}.story-site .project-main{width:84%}.project-showcase{gap:25px}}
@media(max-width:760px){
.story-site .site-header{gap:12px}.story-site .site-header nav{margin:0;justify-content:center;gap:10px 18px}.story-site .site-header nav a{font-size:13px}
.story-site .hero{min-height:0;padding-top:20px;padding-bottom:30px}.story-site .hero-copy{width:100%;padding-bottom:0}.story-site .hero-copy h1{font-size:clamp(36px,8vw,48px)}
.story-site .collage{position:relative;inset:auto;height:365px;margin:22px 6px 18px}.story-site .project-main{width:80%;height:64%}.story-site .project-robin{left:0;bottom:0;width:52%;height:43%}.story-site .project-song{left:50%;bottom:-2px;width:50%;height:42%}.story-site .project{border-width:4px}.story-site .project .project-caption{opacity:1;transform:none;padding:23px 8px 7px}.project-caption strong{font-size:13px}.project-caption small{font-size:10px}
.story-site .section{padding-block:48px}.project-showcase{grid-template-columns:1fr;gap:25px}.project-choice{padding:16px 10px}.project-choice strong{font-size:22px}
.story-nav{gap:6px;flex-wrap:wrap;padding:8px 5%}.story-chapters{order:-1;flex:0 0 100%;justify-content:space-between;gap:6px}.story-chapters a{font-size:10px;gap:0}.chapter-number{display:none}.story-back,.story-next{font-size:12px}.story-site{padding-bottom:100px}.chapter-actions .button{font-size:14px;padding:12px 18px}
}
@media(hover:none){.story-site .project .project-caption{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-site .project,.story-site .project .project-caption{transition:none}}

.hero-meta{font-size:14px;margin-top:14px}.story-site #start{scroll-margin-top:100px}

/* Jeder Abschnitt belegt genau eine sichtbare Browserseite. */
:root{--story-nav-height:78px;--story-header-height:88px}
html{scroll-snap-type:y mandatory;scroll-padding:0;overscroll-behavior-y:none}
body.story-site{padding-bottom:var(--story-nav-height)}
.story-site .site-header{position:absolute;inset:0 0 auto;min-height:0;height:var(--story-header-height);z-index:20}
.story-site #story-main>section{
  box-sizing:border-box;
  height:calc(100svh - var(--story-nav-height));
  min-height:calc(100svh - var(--story-nav-height));
  max-height:calc(100svh - var(--story-nav-height));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  scroll-margin:0;
}
.story-site #start{padding-top:calc(var(--story-header-height) + 22px);scroll-margin:0}
.story-site #story-main>.section{padding-block:clamp(24px,4.2vh,48px)}
.story-site #ablauf,.story-site #arbeiten,.story-site #preise,.story-site #kontakt{align-content:center}
.story-site .chapter-actions{display:none}

/* Die großen Desktop-Ansichten bleiben vollständig innerhalb ihrer Seite. */
.story-site #ablauf .section-heading{margin-bottom:28px}
.story-site #arbeiten .section-heading{margin-bottom:18px}
.story-site #story-main>#arbeiten{align-content:start;padding-block:12px}
.story-site #arbeiten .project-showcase{max-height:calc(100svh - var(--story-nav-height) - 205px)}
.story-site #arbeiten .project-stage-browser img{max-height:49vh}
.story-site #preise .section-heading{margin-bottom:22px}
.story-site #story-main>#preise{padding-block:10px}
.story-site #preise h2{font-size:clamp(30px,2.8vw,38px)}
.story-site #preise .section-heading>p:last-child{margin-top:10px;font-size:14px}
.story-site #preise .price-card{padding:clamp(20px,2.2vh,28px);gap:18px}
.story-site #preise .price-card p{font-size:14px;line-height:1.4}
.story-site #preise .price-card h3{margin-bottom:10px}
.story-site #preise .price-card .price span{font-size:clamp(42px,5vh,55px)}
.story-site #preise .care-strip{margin-top:12px;padding:12px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.story-site #kontakt .section-heading{margin-bottom:24px}
.story-site #kontakt .contact-form{gap:10px;padding:22px}
.story-site #kontakt textarea{min-height:70px;height:9vh}
.story-site #story-main>#fragen{align-content:start;padding-top:clamp(18px,3vh,34px);padding-bottom:18px}
.story-site #fragen .section-heading{margin-bottom:10px}
.story-site #fragen .section-heading>p:last-of-type{margin-top:8px}
.story-site #fragen summary{padding:6px 0}
.story-site #fragen .faq-answer{padding-bottom:14px}
.story-site #fragen .site-footer{padding:14px 0 0;margin-top:12px;gap:12px}
.story-site #fragen .site-footer .brand{font-size:20px}
.story-site #fragen .footer-note{display:none}

@media(min-width:761px){
  .story-site #ablauf .section-heading{max-width:880px}
  .story-site #ablauf h2{font-size:clamp(42px,3.4vw,58px)}
  .story-site #ablauf .section-heading>p:last-child{max-width:760px;font-size:17px;line-height:1.55}
  .story-site #ablauf .steps{gap:clamp(16px,2vw,26px);margin-top:clamp(28px,4vh,42px)}
  .story-site #ablauf .steps li{min-height:clamp(165px,22vh,210px);padding:clamp(22px,3vh,32px);flex-direction:column;align-items:flex-start;gap:14px;background:linear-gradient(145deg,#fffaf5d9,#efe2d3b8);border:1px solid var(--line);border-top:3px solid #b4533475;border-radius:18px;box-shadow:0 18px 35px -30px #34150e70}
  .story-site #ablauf .step-number{font-size:clamp(50px,4vw,66px)}
  .story-site #ablauf .steps h3{font-size:clamp(20px,1.45vw,24px);margin-bottom:8px}
  .story-site #ablauf .steps p{font-size:clamp(15px,1.05vw,17px);line-height:1.5}

  .story-site #story-main>#fragen{display:grid;grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto;align-content:stretch;padding-top:18px;padding-bottom:8px}
  .story-site #fragen .section-heading{grid-row:2;width:100%}
  .story-site #fragen .faq-list{grid-row:3;width:100%;max-width:1050px}
  .story-site #fragen .site-footer{grid-row:5;width:100%;align-self:end;margin-top:0;padding:14px 0 4px}
}

@media(min-width:1200px) and (min-height:850px){
  .story-site #ablauf .eyebrow,.story-site #fragen .eyebrow{font-size:17px}
  .story-site #ablauf .section-heading>p:last-child,.story-site #fragen .section-heading>p:last-of-type{font-size:18px}
  .story-site #ablauf .steps{margin-top:42px}
  .story-site #ablauf .steps li{min-height:220px;padding:34px}
  .story-site #ablauf .steps h3{font-size:24px}
  .story-site #ablauf .steps p{font-size:17px}
  .story-site #fragen h2{font-size:clamp(46px,3vw,56px)}
  .story-site #fragen .section-heading{max-width:900px;margin-bottom:16px}
  .story-site #fragen .section-heading>p:last-of-type{max-width:820px;margin-top:12px}
  .story-site #fragen .text-link{font-size:17px;margin-top:16px}
  .story-site #fragen .faq-list{max-width:1100px}
  .story-site #fragen summary{padding:8px 0}
  .story-site #fragen summary>span{font-size:24px}
  .story-site #fragen summary strong{font-size:20px}
  .story-site #fragen .site-footer{padding-top:16px;font-size:15px}
  .story-site #fragen .site-footer .brand{font-size:24px}
}

@media(min-width:761px) and (max-height:800px){
  :root{--story-nav-height:64px;--story-header-height:68px}
  .story-site #start{padding-top:calc(var(--story-header-height) + 12px)}
  .story-site #story-main>.section{padding-block:18px}
  .story-site #arbeiten .section-heading{margin-bottom:10px}
  .story-site #arbeiten .project-choice{padding:15px 10px}
  .story-site #arbeiten .project-stage-browser img{max-height:45vh}
  .story-site #preise .section-heading{margin-bottom:10px}
  .story-site #preise .section-heading>p:last-child{margin-top:8px;font-size:13px}
  .story-site #preise .price-card{padding:16px;gap:8px}
  .story-site #preise .price-card p{font-size:13px;line-height:1.35}
  .story-site #preise .price-card .price span{font-size:36px}
  .story-site #preise .text-link{margin-top:8px}
  .story-site #preise .care-strip{margin-top:12px;padding:8px 16px;font-size:13px}
  .story-site #kontakt .section-heading{margin-bottom:12px}
  .story-site #kontakt .contact-grid{gap:35px}
  .story-site #kontakt .contact-form{padding:16px;gap:6px}
  .story-site #kontakt textarea{height:58px;min-height:58px}
  .story-site #story-main>#fragen{padding-top:12px;padding-bottom:10px}
  .story-site #fragen h2{font-size:30px}
  .story-site #fragen .section-heading{margin-bottom:4px}
  .story-site #fragen .section-heading>p:last-of-type,.story-site #fragen .text-link{font-size:13px}
  .story-site #fragen summary{padding:4px 0}
  .story-site #fragen summary strong{font-size:15px}
  .story-site #fragen .site-footer{padding-top:8px;margin-top:5px}
}

@media(max-width:760px){
  :root{--story-nav-height:82px;--story-header-height:105px}
  html{scroll-snap-type:y proximity;overscroll-behavior-y:auto}
  .story-site #story-main>section{
    height:auto;
    min-height:calc(100svh - var(--story-nav-height));
    max-height:none;
    overflow-y:visible;
    overscroll-behavior-y:auto;
    padding-block:24px;
  }
  .story-site #story-main>#start{padding-top:calc(var(--story-header-height) + 4px)}
  .story-site #start .hero-copy .lead{margin:14px 0 18px}
  .story-site #start .hero-meta{margin-top:10px}
  .story-site #start .collage{height:330px;margin:10px 6px 18px}
  .story-site #arbeiten .project-showcase{max-height:none}
  .story-site #arbeiten .project-choices{height:220px}
  .story-site #arbeiten .project-stage-browser img{max-height:none}
  .story-site #fragen summary{padding:10px 0}
  .story-site #fragen .site-footer{font-size:12px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Lebendigere Farbwelt: warm, handgemacht und mit klaren Kapitelwechseln. */
.story-site{
  --paper:#fff6e9;
  --ink:#32140f;
  --text:#3b302b;
  --clay:#b84a2f;
  --line:#d8bea8;
  --petrol:#184b4b;
  --petrol-deep:#10393b;
  --ochre:#d99a2b;
  --apricot:#f3bea0;
  background:#fff6e9;
}

.story-site .button{
  background:linear-gradient(135deg,#aa3f29 0%,#c95b38 100%);
  box-shadow:0 13px 28px -16px #6d2418c7,0 0 0 1px #8c321f18;
}
.story-site .button:hover{background:linear-gradient(135deg,#91321f 0%,#b8492d 100%)}
.story-site .text-link{color:#8f351f;font-weight:700}

/* Start: eine farbige, organische Basis schliesst den freien Raum links unten. */
.story-site #start{isolation:isolate;background:linear-gradient(118deg,#fff8ed 0 46%,#fff3e3 100%)}
.story-site #start::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:6%;
  bottom:0;
  width:37%;
  height:31%;
  border-radius:71% 29% 62% 38% / 41% 65% 35% 59%;
  transform-origin:left bottom;
  transform:rotate(-5deg) skewX(-6deg);
  background:
    radial-gradient(ellipse at 72% 32%,#ffdbbd90 0%,transparent 48%),
    linear-gradient(145deg,#f2b58f 0%,#e77e5d 100%);
  box-shadow:inset 0 0 0 1px #fff2e554;
  opacity:.78;
}
.story-site #start::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:36%;
  bottom:9%;
  width:90px;
  height:90px;
  border:18px solid #dda13b;
  border-radius:50%;
  opacity:.42;
}
.story-site #start::before,.story-site #start::after{display:none}
.story-site #start .hero-meta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border:1px solid #c99570;
  border-radius:999px;
  background:#fffaf2c9;
  box-shadow:0 10px 24px -20px #34150e;
}
.story-site #start .hero-meta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 4px #f6d99b80}
.story-site #start .project{border-color:#fff6e9;box-shadow:0 20px 34px -22px #30100bd1}

/* Die drei Kapitel mit .wrap erhalten ihre Farbe ueber die gesamte Breite. */
.story-site #ablauf,.story-site #arbeiten,.story-site #fragen{
  width:100%;
  max-width:none;
  padding-inline:max(5.5%,calc((100vw - 1240px)/2));
}

/* Ablauf: freundliches Apricot und drei deutlich unterscheidbare Schritte. */
.story-site #ablauf{
  background:
    radial-gradient(circle at 8% 18%,#ffdca8 0 5%,transparent 5.2%),
    radial-gradient(circle at 92% 86%,#ed9b7980 0 13%,transparent 13.2%),
    linear-gradient(135deg,#fae6d8 0%,#f1c8b3 100%);
}
.story-site #ablauf .steps li{background:#fff8efdc;border-color:#d8b095;box-shadow:0 22px 44px -32px #732c1f8f}
.story-site #ablauf .steps li:nth-child(1){border-top-color:var(--clay)}
.story-site #ablauf .steps li:nth-child(2){border-top-color:var(--ochre)}
.story-site #ablauf .steps li:nth-child(3){border-top-color:var(--petrol)}
.story-site #ablauf .steps li:nth-child(2) .step-number{color:#a66905}
.story-site #ablauf .steps li:nth-child(3) .step-number{color:var(--petrol)}

/* Arbeiten: die Projektbilder leuchten auf einer dunklen Galerie-Flaeche. */
.story-site #arbeiten{
  color:#f9eddf;
  background:
    radial-gradient(ellipse at 78% 25%,#2b72704d 0%,transparent 46%),
    radial-gradient(circle at 9% 90%,#bd6d3540 0 16%,transparent 16.2%),
    linear-gradient(145deg,var(--petrol) 0%,var(--petrol-deep) 100%);
}
.story-site #arbeiten h2,.story-site #arbeiten h3{color:#fff7ea}
.story-site #arbeiten h2 em{color:#f4b34a}
.story-site #arbeiten .eyebrow{color:#f4c987}
.story-site #arbeiten .section-heading>p:last-child{color:#e7d9c9}
.story-site #arbeiten .project-choices{scrollbar-color:#e4a448 #ffffff18}
.story-site #arbeiten .project-choice{color:#fff5e7;border-color:#ffffff24;border-radius:12px}
.story-site #arbeiten .project-choice>span:first-child{color:#f4b34a}
.story-site #arbeiten .project-choice small{color:#d4e4df}
.story-site #arbeiten .project-choice.is-active{background:linear-gradient(110deg,#f4b34a30,#ffffff0d);box-shadow:inset 4px 0 #f4b34a}
.story-site #arbeiten .project-stage-browser{border-color:#fff0dc;box-shadow:0 24px 55px #071c1d8f}
.story-site #arbeiten .project-stage-note>span{color:#f4c987}
.story-site #arbeiten .project-stage-note strong{color:#fff7ea}

/* Preise: sonniger Grund, klare Karten und eine starke Betreuungskarte. */
.story-site #preise{
  background:
    radial-gradient(circle at 94% 10%,#ef9a6c78 0 14%,transparent 14.2%),
    linear-gradient(135deg,#f8e5bb 0%,#efc882 100%);
}
.story-site #preise .price-card{background:#fff9ef;border-color:#d6a978;box-shadow:0 18px 38px -30px #58251491}
.story-site #preise .price-card:first-child{border-top:5px solid var(--ochre)}
.story-site #preise .price-card-featured{border:2px solid var(--clay);border-top-width:5px;background:linear-gradient(145deg,#fff7eb,#f9ddca)}
.story-site #preise .care-strip{
  color:#f9f0e4;
  background:linear-gradient(110deg,var(--petrol-deep),var(--petrol));
  border-color:#0d3434;
  box-shadow:0 18px 36px -27px #092526;
}
.story-site #preise .care-strip strong{color:#fff7e9}
.story-site #preise .care-strip b{color:#ffc760}

/* Kontakt: sattere Farbe mit Tiefe, das helle Formular bleibt gut lesbar. */
.story-site #kontakt{
  background:
    radial-gradient(ellipse at 5% 92%,#e08a4f9c 0%,transparent 44%),
    radial-gradient(circle at 92% 8%,#f0a24f73 0%,transparent 30%),
    linear-gradient(145deg,#bd4d31 0%,#943126 100%);
}
.story-site #kontakt .contact-form{background:#fff7e9;box-shadow:0 28px 60px -38px #3d100bd1;border:1px solid #fff2dc}
.story-site #kontakt .button-light{background:#fff7e9;color:#32140f;box-shadow:0 14px 28px -18px #44130f}

/* Fragen: eine helle Petrol-Nuance beendet die Geschichte ruhig, aber farbig. */
.story-site #fragen{
  background:
    radial-gradient(circle at 88% 14%,#efb5578c 0 6%,transparent 6.2%),
    linear-gradient(145deg,#e8f0e9 0%,#cfe0d8 100%);
}
.story-site #fragen details{margin-bottom:5px;padding-inline:18px;border:1px solid #6e9a8b55;border-radius:12px;background:#fff9efad}
.story-site #fragen summary>span,.story-site #fragen summary::after{color:#9c3b26}
.story-site #fragen .site-footer{border-top:1px solid #6e9a8b73}

/* Die feste Navigation verbindet alle Kapitel und zeigt den aktiven Schritt klar. */
.story-nav{background:#fff5e9f2;border-color:#d3ad8f;box-shadow:0 -10px 35px -30px #34150e;backdrop-filter:blur(14px)}
.story-chapters a{position:relative}
.story-chapters a[aria-current]::before{content:"";position:absolute;left:50%;top:1px;width:6px;height:6px;border-radius:50%;background:var(--ochre);transform:translateX(-50%)}

@media(min-width:761px){
  .story-site #start .hero-copy .button{margin-top:clamp(24px,4vh,38px)}
  .story-site #start .hero-meta{display:flex;width:max-content;margin-top:14px}
  .story-site #ablauf .steps li{transition:transform .25s ease,box-shadow .25s ease}
  .story-site #ablauf .steps li:hover{transform:translateY(-5px);box-shadow:0 27px 50px -32px #732c1fb3}
}

@media(max-width:760px){
  .story-site #ablauf,.story-site #arbeiten,.story-site #fragen{padding-inline:5%}
  .story-site #start::before{left:-18%;bottom:0;width:78%;height:28%;opacity:.58}
  .story-site #start::after{display:none}
  .story-site #start .hero-meta{padding:6px 11px}
  .story-site #arbeiten .project-choice{border-radius:9px}
  .story-site #fragen details{padding-inline:12px}
  .story-chapters a[aria-current]::before{top:-1px;width:5px;height:5px}
}

@media(min-width:761px) and (max-height:900px){
  .story-site #preise .section-heading{margin-bottom:10px}
  .story-site #preise .section-heading>p:last-child{margin-top:8px;font-size:13px}
  .story-site #preise .price-card{padding:15px;gap:7px}
  .story-site #preise .price-card p{font-size:13px;line-height:1.34}
  .story-site #preise .price-card h3{font-size:27px;margin-bottom:7px}
  .story-site #preise .price-card .price span{font-size:38px}
  .story-site #preise .text-link{margin-top:7px}
  .story-site #preise .care-strip{margin-top:10px;padding:9px 16px;font-size:13px}
  .story-site #fragen .section-heading{margin-bottom:5px}
  .story-site #fragen .section-heading>p:last-of-type{margin-top:5px}
  .story-site #fragen .text-link{margin-top:8px}
  .story-site #fragen details{margin-bottom:2px}
  .story-site #fragen summary{padding:2px 0}
  .story-site #fragen .site-footer{padding-top:6px;margin-top:4px;gap:8px}
}