/* Iteration E: D plus moWerk's review of 2026-09-02 evening. Every tab is a page. Masthead actions ride the cut,
   figures lead the teal stripe as a line, polaroids in real proportions
   that scale as one object, colour-coded tabs. Builds on ../assets/ci.css. */

/* Masthead: the actions sit on the cut with their vertical centre, small,
   uppercase, and shrink with the viewport. The subtitle hides when they
   would run into it (d.js). */
.mh-inner{position:relative}
.mh-tools{position:absolute;right:var(--pad);bottom:0;transform:translateY(50%);display:flex;gap:8px;z-index:4}
.mh-tools .btn{font-size:clamp(10px,calc(.9 * var(--vw)),12.5px);padding:.7em 1.1em;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;box-shadow:var(--sh);border-color:transparent}
.btn.white{background:var(--paper);color:var(--ink)}
.mh-title.hide{visibility:hidden}

/* Tabs: every tab is a page; the square after the label is the section's
   colour code. Active is ink with the ink rule, as on the dashboards. */
.tabs{display:flex;flex-wrap:nowrap;gap:clamp(18px,calc(2.8 * var(--vw)),34px);align-items:baseline;
  padding-top:28px;border-bottom:1px solid var(--hair)}
.tab{font-size:clamp(17px,calc(1.9 * var(--vw)),21px);font-weight:800;color:var(--grey-l);white-space:nowrap;
  text-decoration:none;padding:0 0 10px;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .12s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab[style]::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;vertical-align:middle;
  background:var(--c);border-radius:var(--pr) 0 var(--pr) 0}

/* Branch chips: pages, not anchors, except on Rechtliches. */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.subnav a{display:inline-block;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink);
  background:var(--surf-sunk);border:1px solid var(--hair);border-radius:var(--r) 0 var(--r) 0;padding:7px 14px}
.subnav a:hover{box-shadow:var(--sh)}
.subnav a.on{background:var(--ink);color:#fff;border-color:transparent}

.hero{padding-top:44px}
.hero h1{font-size:clamp(32px,calc(4.2 * var(--vw)),56px);font-weight:800;line-height:1.04;letter-spacing:-.01em;
  margin:8px 0 18px;max-width:20ch;text-wrap:balance}
.hero .lead{font-size:19px;max-width:58ch;margin-bottom:0}

/* review aid: a placeholder photo that a shoot will replace */
.ph-tag{display:block;text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-top:8px}

/* The stripe: figures lead as a horizontal line in the teal, then the
   polaroid sits with its middle on the lower cut line. --pw is the
   polaroid width; its height is 1.035 of that for a 4:3 print. */
:root{--row-w:min(calc(100 * var(--vw) - 2 * var(--pad)),calc(1160px - 2 * var(--pad)));--big:.36;--hero-hf:1.035;--ref-pw:230px;--ref-hf:1.035;
  --hero-pw:calc(var(--row-w) * var(--big))}
/* three polaroids of three sizes on one cut line: the row is vertically
   centred on the cut, so every print's middle sits on it whatever its size */
.on-cut-row{display:flex;justify-content:space-between;align-items:center;gap:clamp(18px,calc(3 * var(--vw)),44px);
  position:relative;z-index:2;margin-top:22px;margin-bottom:calc(-.5 * var(--row-w) * var(--big) * var(--hero-hf))}
.on-cut-row .pol-wrap{flex:none}
.on-cut-row .r1{--w:calc(var(--row-w) * .30)}
.on-cut-row .r2{--w:calc(var(--row-w) * var(--big))}
.on-cut-row .r3{--w:calc(var(--row-w) * .27)}
@media (max-width:1100px){
  .on-cut-row .r3{display:none}
  .on-cut-row .r1{--w:calc(var(--row-w) * .44)}
  .on-cut-row .r2{--w:calc(var(--row-w) * .48);}
  :root{--big:.48}
}
.stripe{background:var(--teal-bright);color:var(--ink);margin-top:40px;padding-top:26px;display:flow-root}
.stripe .wrap{display:flow-root}
.stripe .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px}
/* A band carries three or four facts. The column count follows the count,
   so three facts fill the band instead of leaving a fourth cell open. */
.stripe .figs-3{grid-template-columns:repeat(3,1fr)}
.stripe .figs-2{grid-template-columns:repeat(2,1fr)}
.fig b{display:block;font-size:clamp(22px,calc(2.4 * var(--vw)),32px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fig .u{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0c5d5d;margin-top:6px}
.stripe .on-cut{position:relative;z-index:2;margin-top:24px;margin-bottom:calc(-.5 * var(--hero-pw) * var(--hero-hf))}
.stripe .on-cut.pol-wrap{--w:var(--hero-pw)}
.after-stripe{padding-top:calc(.5 * var(--hero-pw) * var(--hero-hf) + 56px)}

/* Reference rail on a stripe: half the polaroids below the cut. */
.stripe.rail-stripe{margin-top:22px;padding-top:0}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:22px 4px 30px;margin:0 0 calc(-.5 * var(--ref-pw) * var(--ref-hf) - 30px);list-style:none;
  scrollbar-width:thin;scrollbar-color:rgba(35,31,32,.3) transparent}
.rail li{flex:none;width:var(--ref-pw);scroll-snap-align:start}
.after-rail{padding-top:calc(.5 * var(--ref-pw) * var(--ref-hf) + 40px)}
.sec-row{display:flex;align-items:center;gap:14px}
.sec-row .sec{flex:1}
.arrow{width:34px;height:34px;border-radius:50%;border:1px solid rgba(35,31,32,.25);background:var(--paper);
  color:var(--ink);font:inherit;font-size:16px;cursor:pointer;box-shadow:var(--sh);flex:none}
.arrow:hover{box-shadow:var(--sh-lift)}

/* Text patterns */
.block{margin-top:64px}
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:18px}
/* The teal rule belongs to the headline, not above the picture: over the
   polaroid it read as a second separator under the section heading and
   cut into the shadow the frame casts. */
.formats article{padding-top:0}
.formats h3{font-size:23px;font-weight:800;margin:0 0 12px;
            border-bottom:3px solid var(--teal);padding-bottom:10px}
.formats p{font-size:16.5px}
.formats a.more,.more{font-weight:700;text-decoration:none}
.formats .pol-wrap{margin-bottom:14px}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative;counter-reset:s}
/* The rule behind the numbers runs across one row, so the row has to hold
   every step. The count comes from the markup. */
.steps-6{grid-template-columns:repeat(6,1fr)}
.steps-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps,.steps-6,.steps-4{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}}
.steps::before{content:"";position:absolute;left:0;right:0;top:15px;height:3px;background:var(--hair)}
.steps li{counter-increment:s;position:relative;padding-top:46px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;background:var(--paper);padding-right:12px;
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:30px;font-weight:800;color:var(--teal);line-height:1}
.steps b{display:block;font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:19px;font-weight:800;margin-bottom:6px}
.steps span{font-size:14.5px;color:var(--grey);display:block}
.prose{max-width:66ch;font-size:17px}
.prose h3{font-size:22px;font-weight:800;margin:1.6em 0 .4em}
.prose .green{border-left:4px solid var(--green);padding-left:14px}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;margin-top:16px}
.two.rev{grid-template-columns:1fr 1.2fr}
.two .prose{font-size:17px}
.spec{display:grid;grid-template-columns:150px 1fr;gap:12px 26px;margin-top:22px;max-width:86ch}
.spec dt{font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:18px;font-weight:800;padding-top:2px}
.spec dd{margin:0;font-size:16.5px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair);padding:12px 0}
.faq summary{cursor:pointer;font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:19px;font-weight:700}
.faq p{margin:8px 0 0;max-width:64ch}
.refs{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 28px;
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:21px;font-weight:700;color:var(--grey)}
.refs li{border-bottom:1px solid var(--hair);padding:8px 0}
.refs li small{display:block;font-family:"Source Sans","Helvetica Neue",Arial,sans-serif;font-size:13.5px;font-weight:400;color:var(--grey);letter-spacing:0}
.quote{padding:18px 24px;margin:0;max-width:64ch}
.quote.feat{grid-column:1/-1;max-width:none}
.quote.feat p{font-size:20px}
.quote.feat p+p{margin-top:10px}
.quote p{font-size:19px;margin:0 0 8px;font-style:italic}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.enquiry{padding:26px 28px;display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.kurse{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;padding:28px 32px 28px 28px}
.kurse .dates{white-space:nowrap;width:auto}
.kurse h2{font-size:clamp(24px,calc(2.6 * var(--vw)),32px);font-weight:800;margin:4px 0 14px;line-height:1.1}
.dates{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums;margin-top:8px}
.dates td{padding:8px 10px 8px 0;border-bottom:1px solid var(--hair)}
.dates .st{text-align:right;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.st.free{color:var(--teal-deep)}.st.few{color:#b07a00}.st.full{color:var(--grey)}
.months{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 34px;margin-top:10px}
.months h4{font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:800;margin:14px 0 4px}
.months ul{list-style:none;margin:0;padding:0;font-size:15px;font-variant-numeric:tabular-nums}
.months li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--hair)}
.months li .v{color:var(--grey)}
.months li.full{color:var(--grey-l);text-decoration:line-through}

/* Referenzen page: a collection of moments, each a polaroid of its own
   size beside its story, sides alternating. */
.story{display:grid;grid-template-columns:var(--w) 1fr;gap:40px;align-items:start;margin-top:54px}
.story.rev{grid-template-columns:1fr var(--w)}
.story.rev .pol-wrap{order:2}
.story h3{font-size:24px;font-weight:800;margin:0 0 6px}
.story .tag{display:block;margin-bottom:10px}
.story p{max-width:56ch}
.press{display:flex;gap:26px;flex-wrap:nowrap;overflow-x:auto;padding:10px 4px 22px;margin-top:8px;scrollbar-width:thin;scrollbar-color:rgba(35,31,32,.3) transparent}
.press .pol-wrap{flex:none}

/* Rechtliches: the one page with anchors. */
.legal h2{margin-top:56px}
.legal .prose{max-width:76ch;font-size:16px}
.legal .prose p{margin-bottom:.8em}

.foot-main{border-top:0;padding-top:20px}
main{padding-bottom:70px}
.block.after-stripe{margin-top:0}

.tm{font-size:.7em;vertical-align:super}
.figs .fig b.inf{font-size:clamp(30px,calc(3.2 * var(--vw)),42px);line-height:.8}

/* review aid: the slot id under every polaroid, matches bildplan.html */
.slot{display:block;text-align:center;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#a7a7a7;margin-top:6px;font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-weight:700}
.ph-tag + .slot{margin-top:2px}

/* The platters live inside the delivery answer, stacked, found only by
   whoever opens that fold. */
.faq-platten{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin:16px 0 6px}

/* Forms run the full page width, never inside a column. The live Forminator
   forms are built for full width and collapse badly in a narrow track, so the
   explanatory text sits above them and the form gets the whole measure. */
.form-card,form.mo-form{max-width:none;width:100%;margin-top:28px}
.form-card .fields,form.mo-form .fields{grid-template-columns:1fr 1fr}
@media (max-width:760px){.form-card .fields,form.mo-form .fields{grid-template-columns:1fr}}

/* The map is a picture, not an embed: a slice of OpenStreetMap rendered once
   and served from our own server, so the contact page still loads nothing
   from anywhere else. The licence asks for the credit, so it is in the
   caption, as a link that only fires if somebody clicks it. */
figure.map{margin:22px 0 0}
figure.map img{width:100%;height:auto;display:block;border:1px solid var(--hair);
  border-radius:var(--r) 0 var(--r) 0}
figure.map figcaption{font-size:13px;color:var(--grey);margin-top:8px}

/* The honeypot: present for anything that fills every field it finds, gone
   for anyone using the page. Kept off screen rather than display:none, which
   is the variant a crawler is least likely to notice. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* What the law wants directly above a paid order button. */
.order-summary{border:1px solid var(--hair);border-left:3px solid var(--teal);
  border-radius:var(--r) 0 var(--r) 0;padding:18px 20px;margin:22px 0 6px;background:var(--surf-sunk)}
.order-summary h3{font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:18px;font-weight:800;margin:0 0 10px}
.order-summary dl{display:grid;grid-template-columns:130px 1fr;gap:6px 18px;margin:0 0 12px;font-size:15.5px}
.order-summary dt{font-weight:700}
.order-summary dd{margin:0}
.order-summary .cap{margin:0}
@media (max-width:600px){.order-summary dl{grid-template-columns:1fr;gap:2px 0}
  .order-summary dt{margin-top:8px}}

/* Google-Bewertungen: Textkarten im Rail, keine Bilder, keine fremden Requests */
/* Rails of cards carry portrait video or text, whose height the overhang
   calculation cannot know: it pulls up by half a 4:3 polaroid and the rest
   spilled into the next section. These rails simply do not overhang. */
.rail-stripe.flat .rail{margin-bottom:0;padding-bottom:26px}
.card-stripe .rail{align-items:flex-start}
.rail li.card-li{flex:0 0 clamp(240px,28vw,320px);display:flex;
  /* Deliberate CI exception, ruled by moWerk: these cards stay inside the
     teal band rather than sitting on the cutline. They are text, not photos,
     so nothing is gained by letting them cross it, and an overhang put the
     rail's own scrollbar below the band. */
  margin-bottom:0}
.review{margin:0;background:#fff;border-radius:2px;padding:20px 20px 16px;width:100%;
        box-shadow:0 2px 4px rgba(35,31,32,.07),0 10px 22px rgba(35,31,32,.15)}
.review p{font-size:15px;line-height:1.5;margin:0 0 14px;font-style:italic;
  /* The band is as tall as its tallest card, and one review runs to 535
     characters. Long quotes are cut off visually here rather than shortened
     in reviews.py, where the text has to stay exactly as the guest wrote it. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
/* deliberately the body face, not the handwriting one: a guest did not
   write this caption by hand and the type should not pretend otherwise */
.review footer{margin-top:0}
.brag{margin:14px 0 0}
.brag b{font-family:Jost,system-ui,sans-serif;font-size:52px;line-height:1}
.brag .stars{margin-left:10px;letter-spacing:2px;font-size:22px;vertical-align:8px}
.brag .u{display:block;font-size:15px;letter-spacing:.02em;margin-top:4px}
.brag .cap{margin-top:6px}


/* Thin rule between the blocks of a section, so each picture stays
   beside the paragraph it belongs to instead of sliding to the next. */
.hair{border:0;border-top:1px solid rgba(0,0,0,.12);margin:38px 0}

/* Checkbox groups in the enquiry form: full width, two or three columns
   depending on room, so a long list stays scannable. */
.field.checks{border:0;margin:0 0 14px;padding:0}
.field.checks legend{padding:0 0 8px;font-size:14px;letter-spacing:.02em}
.field.checks{display:block}
.field.checks .check{display:flex;gap:8px;align-items:flex-start;font-size:14px;
                     margin:0 0 6px;font-weight:400}
.field.checks .check input{margin-top:3px;flex:0 0 auto}
@media (min-width:620px){.field.checks .check{width:calc(50% - 10px)}
  .field.checks{display:flex;flex-wrap:wrap;gap:0 20px}
  .field.checks legend{width:100%}}

/* Polaroids that move. The video sits exactly where the img sits, so the
   frame, the caption and the tilt are the ones every other picture uses. */
.pol video{display:block;width:100%;height:auto;border-radius:.4cqw;background:#111}
/* In a rail the frame takes the rail's own column width; without this the
   video falls back to its intrinsic pixel width and bursts the polaroid. */
.rail li .pol-wrap.live{width:100%}
.pol-wrap.fit .pol video{width:auto;height:var(--ih,220px);border-radius:calc(var(--wref) * .004)}

/* A grid of polaroids, for a set of pictures that belong together. Beats a
   single tall column, which is what the shop pictures were. */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;margin-top:6px}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}

/* Phone portrait. freeze.js renders these against a 540 px floor instead of
   760, so everything is already about 40 % larger; what follows is only the
   layout that cannot survive being 540 px wide. */
html.tight .formats{grid-template-columns:1fr;gap:26px}
html.tight .two{grid-template-columns:1fr;gap:22px}
html.tight .grid3{grid-template-columns:1fr;gap:24px}
html.tight .figs{gap:16px}
/* two polaroids at a time on the rails, half again as large as before */
html.tight .rail{--ref-pw:242px}
html.tight .rail li.card-li{flex:0 0 242px}
/* the masthead is the one composition that cannot simply scale: at 540 px the
   logo and three buttons no longer share a line, so they take two. */
/* The masthead keeps one line: wrapping put the buttons across the logo. The
   quote button is the one that goes, because the tab row leads there anyway. */
html.tight .mh-tools .btn:nth-child(n+2){display:none}
/* The tab row must wrap, marker and all, or it makes the whole page scroll
   sideways. Each tab keeps its own marker on its own line. */
html.tight .tabs{flex-wrap:wrap;row-gap:6px;column-gap:18px}
html.tight .tab{white-space:normal}
/* Pictures beside text run the full width once the column is gone. */
html.tight .two .pol-wrap{width:100%!important}
/* The course tile: picture first, then the text across the whole tile. */
html.tight .kurse{grid-template-columns:1fr;gap:20px;padding:22px}
html.tight .kurse > div:first-child{order:2}
html.tight .kurse .dates{white-space:normal;width:auto}
html.tight .kurse .pol-wrap{width:100%!important}
/* The form grid and the customer list were still two and three columns wide,
   which is what pushed the page past the screen on every page carrying them. */
html.tight .grid2{grid-template-columns:1fr}
html.tight .refs{grid-template-columns:1fr;gap:0 22px}
/* Belt and braces for the rest: a polaroid is rotated, so its painted box is
   wider than its layout box and bleeds a few pixels past the edge. Nothing
   should be reachable out there, so the page simply does not scroll sideways. */
/* zoom makes the root element the scrolling box, so this belongs on html and
   not on body, which is why the first attempt clipped nothing. */
html.tight, html.tight body{overflow-x:hidden}
html.tight .rail{max-width:100%}
/* A fit polaroid is sized by a fixed pixel height and therefore never scaled
   with the rest: Michas Hangiri picture was simply wider than the phone. */
html.tight .pol-wrap{max-width:100%}
html.tight .pol-wrap.fit{width:100%;display:block}
html.tight .pol-wrap.fit .pol img,
html.tight .pol-wrap.fit .pol video{width:100%;height:auto}