/* FELIX Builder — front end. Colours and widths match the V5 tokens (theme.json). */
/* Base typography only for builder sections and the title band, never for the wrapper:
   FELIX-Bereiche (V5 sections) on the same page keep their own V5 styles. */
.fb-page{ background:#fff; }
.fb-section, .fb-head{ color:#4c4339; font-family:"Museo Sans", system-ui, -apple-system, sans-serif; font-size:1.0625rem; line-height:1.65; }
:is(.fb-section, .fb-head) :is(h1, h2, h3, h4){ font-family:"Museo Slab", Georgia, serif; font-weight:500; line-height:1.1; color:#211d18; letter-spacing:-.01em; margin:0 0 .6em; }
:is(.fb-section, .fb-head) h1{ font-size:clamp(2.4rem,4.4vw,3.6rem); }
.fb-section h2{ font-size:clamp(1.9rem,3vw,2.6rem); }
.fb-section h3{ font-size:clamp(1.4rem,2vw,1.75rem); }
.fb-section h4{ font-size:1.3rem; }
.fb-section .fb-size-l{ font-size:clamp(2.4rem,4.4vw,3.6rem); }
.fb-section .fb-size-m{ font-size:clamp(1.9rem,3vw,2.6rem); }
.fb-section .fb-size-s{ font-size:clamp(1.4rem,2vw,1.75rem); }

/* title band (pages without their own h1 / opening image) */
.fb-head{ max-width:var(--boxw,1700px); margin:0 auto; padding:clamp(9.5rem,16vh,12rem) var(--boxpad,clamp(1rem,3vw,2rem)) clamp(1rem,2vw,1.5rem); } /* footer width, as every page */
.fb-head h1{ margin:0; }
.fb-page--no-band:not(.fb-page--cover){ padding-top:clamp(7.5rem,12vh,9rem); }

/* sections */
.fb-section{ padding-left:var(--boxpad,clamp(1rem,3vw,2rem)); padding-right:var(--boxpad,clamp(1rem,3vw,2rem)); }
.fb-pad-none{ padding-top:0; padding-bottom:0; }
.fb-pad-s{ padding-top:clamp(.75rem,1.2vw,1rem); padding-bottom:clamp(.75rem,1.2vw,1rem); }
.fb-pad-m{ padding-top:clamp(1.25rem,2vw,1.75rem); padding-bottom:clamp(1.25rem,2vw,1.75rem); }
.fb-pad-l{ padding-top:clamp(2rem,4vw,3.25rem); padding-bottom:clamp(2rem,4vw,3.25rem); }
.fb-pad-xl{ padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:clamp(3.5rem,7vw,6rem); }
.fb-inner{ margin:0 auto; }
.fb-w-text .fb-inner{ max-width:760px; }
.fb-w-wide .fb-inner{ max-width:calc(var(--boxw,1700px) - 2 * var(--boxpad,clamp(1rem,3vw,2rem))); } /* "Breit" = footer content width (the footer counts its side padding inside --boxw, the section adds it outside) */
.fb-w-full{ padding-left:0; padding-right:0; }
.fb-w-full.fb-pad-none + .fb-section:not(.fb-pad-none){ margin-top:0; }

.fb-bg-weiss{ background:#fff; }
.fb-bg-grau{ background:#f2f3f4; }
.fb-bg-anthrazit{ background:#2e2e2e; color:#c9ccd1; }
.fb-bg-anthrazit h1, .fb-bg-anthrazit h2, .fb-bg-anthrazit h3, .fb-bg-anthrazit h4{ color:#fff; }
.fb-bg-anthrazit .fb-kicker{ color:#ff8088; }
.fb-bg-anthrazit .fb-text a{ color:#fff; }

/* columns */
.fb-cols{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); }
.fb-cols--1-1{ grid-template-columns:1fr 1fr; }
.fb-cols--1-1-1{ grid-template-columns:repeat(3,1fr); }
.fb-cols--1-1-1-1{ grid-template-columns:repeat(4,1fr); }
.fb-cols--2-1{ grid-template-columns:2fr 1fr; }
.fb-cols--1-2{ grid-template-columns:1fr 2fr; }
.fb-valign-center .fb-cols{ align-items:center; }
.fb-col{ min-width:0; }
.fb-col > * + *{ margin-top:1.1rem; }
.fb-col > .fb-kicker + *{ margin-top:0; }
.fb-col--karte{ background:#fff; border:1px solid #e7e9eb; border-radius:18px; padding:clamp(1.25rem,2vw,1.75rem); }
.fb-bg-anthrazit .fb-col--karte{ background:#3d3d3d; border-color:rgba(255,255,255,.08); }
.fb-align-center{ text-align:center; }
.fb-align-center .fb-buttons{ justify-content:center; }
@media (max-width:1024px){ .fb-cols--1-1-1-1{ grid-template-columns:1fr 1fr; } }
@media (max-width:781px){
  .fb-cols{ grid-template-columns:1fr !important; }
  .fb-hide-mobile{ display:none; }
}

/* elements */
.fb-kicker{ font:600 .72rem/1.2 "Museo Sans", system-ui, sans-serif; letter-spacing:.28em; text-transform:uppercase; color:#9e1119; margin:0 0 .7rem; }
.fb-text > :first-child{ margin-top:0; }
.fb-text > :last-child{ margin-bottom:0; }
.fb-text p{ margin:0 0 1em; }
.fb-text ul, .fb-text ol{ padding-left:1.25em; margin:0 0 1em; }
.fb-text a{ color:#9e1119; text-decoration:underline; text-underline-offset:.15em; }
.fb-text--lead{ font-size:1.3rem; line-height:1.55; }
.fb-image{ margin:0; }
.fb-image img, .fb-gallery img{ display:block; width:100%; height:auto; }
.fb-rounded{ border-radius:14px; }
.fb-image figcaption{ font-size:.875rem; color:#8a7f70; margin-top:.5rem; }
.fb-buttons{ display:flex; flex-wrap:wrap; gap:.75rem; }
.fb-btn{ display:inline-flex; align-items:center; gap:.6rem; font:600 .86rem/1 "Museo Sans", system-ui, sans-serif; letter-spacing:.01em;
  padding:.95rem 1.7rem; border-radius:999px; border:1.5px solid transparent; text-decoration:none; transition:transform .3s cubic-bezier(.22,.68,.16,1), background .3s, color .3s, border-color .3s; }
.fb-btn--primary{ background:#c31622; color:#fff; }
.fb-btn--primary:hover{ background:#9e1119; color:#fff; transform:translateY(-2px); }
.fb-btn--outline{ background:transparent; color:#211d18; border-color:#211d18; }
.fb-btn--outline:hover{ background:#211d18; color:#fff; }
.fb-bg-anthrazit .fb-btn--outline, .fb-cover .fb-btn--outline{ color:#fff; border-color:rgba(255,255,255,.42); }
.fb-bg-anthrazit .fb-btn--outline:hover{ background:#fff; color:#211d18; border-color:#fff; }
.fb-btn:focus-visible{ outline:2px solid #c31622; outline-offset:3px; }
.fb-details{ border-bottom:1px solid #e7e9eb; padding:1rem 0; }
.fb-details summary{ cursor:pointer; font-family:"Museo Slab", Georgia, serif; font-size:1.2rem; color:#211d18; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.fb-details summary::-webkit-details-marker{ display:none; }
.fb-details summary::after{ content:"+"; color:#c31622; font-size:1.4rem; line-height:1; }
.fb-details[open] summary::after{ content:"–"; }
.fb-details summary:focus-visible{ outline:2px solid #c31622; outline-offset:4px; }
.fb-details__body{ margin-top:.75rem; }
.fb-details__body p{ margin:0; }
.fb-details__body p + p{ margin-top:.9rem; } /* FAQ answers with several paragraphs (address blocks, steps) */
.fb-bg-anthrazit .fb-details{ border-color:rgba(255,255,255,.12); }
.fb-bg-anthrazit .fb-details summary{ color:#fff; }
.fb-gallery{ display:grid; gap:clamp(.75rem,1.5vw,1.25rem); }
.fb-gallery figure{ margin:0; }
.fb-gallery--2{ grid-template-columns:repeat(2,1fr); }
.fb-gallery--3{ grid-template-columns:repeat(3,1fr); }
.fb-gallery--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:781px){ .fb-gallery{ grid-template-columns:1fr 1fr; } }
.fb-video{ position:relative; aspect-ratio:16 / 9; }
.fb-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:14px; }
.fb-spacer--s{ height:1rem; } .fb-spacer--m{ height:2rem; } .fb-spacer--l{ height:3.5rem; } .fb-spacer--xl{ height:6rem; }
.fb-divider{ border:0; border-top:1px solid #e7e9eb; margin:0; }

/* cover */
.fb-cover{ position:relative; display:flex; align-items:center; overflow:hidden; background:#2e2e2e; color:#fff; }
.fb-cover--s{ min-height:45vh; } .fb-cover--m{ min-height:62vh; } .fb-cover--l{ min-height:82vh; }
.fb-cover__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fb-cover__veil{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(46,46,46,.78),rgba(46,46,46,.45) 60%,rgba(46,46,46,.3)); }
.fb-cover__inner{ position:relative; width:100%; max-width:var(--boxw,1700px); margin:0 auto; padding:clamp(7rem,12vh,9rem) var(--boxpad,clamp(1rem,3vw,2rem)) clamp(3rem,6vw,4.5rem); }
.fb-cover .fb-kicker{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.fb-cover__title{ color:#fff !important; max-width:16ch; margin:0 0 .4em !important; }
.fb-cover__text{ font-size:1.3rem; line-height:1.5; color:rgba(255,255,255,.88); max-width:36rem; margin:0 0 1.5rem; }

/* last section before the footer: no double gap */
.fb-page > .fb-section:last-child:not([class*="fb-bg-"]){ padding-bottom:clamp(3.5rem,7vw,6rem); }

/* Images in cards: same proportion, so cards line up */
.fb-col--karte .fb-image img{ aspect-ratio:4 / 3; object-fit:cover; }

/* Title band follows the first section's width */
.fb-head--text{ max-width:calc(760px + 2 * var(--boxpad,clamp(1rem,3vw,2rem))); } /* same padding as .fb-section, so the title lines up with the text */
/* 404: clear the fixed nav */
.fb-page--404{ padding-top:clamp(6rem,10vh,7.5rem); }
/* Long words, links and tables never widen the page (texts, headings, red lines, cover) */
.fb-text{ overflow-wrap:anywhere; }
.fb-kicker, .fb-cover__text, .fb-details summary{ overflow-wrap:anywhere; hyphens:auto; }
:is(.fb-section, .fb-head) :is(h1, h2, h3, h4){ overflow-wrap:break-word; hyphens:manual; text-wrap:balance; } /* headings: no automatic hyphens ("Her-kunft"), break only a word that cannot fit */
.fb-text table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.fb-text td, .fb-text th{ border:1px solid #e7e9eb; padding:.5rem .7rem; vertical-align:top; }
.fb-text img{ max-width:100%; height:auto; }

/* Old-shop grid inside imported texts (row / spanN of a 12-column grid) */
.fb-text .row{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); margin:0 0 1.5rem; align-items:start; }
.fb-text .row > [class*="span"]{ grid-column:span 12; }
.fb-text .row > .span3{ grid-column:span 3; } .fb-text .row > .span4{ grid-column:span 4; } .fb-text .row > .span6{ grid-column:span 6; }
.fb-text .row > .span8{ grid-column:span 8; } .fb-text .row > .span9{ grid-column:span 9; }
@media (max-width:781px){ .fb-text .row > [class*="span"]{ grid-column:span 12; } }

/* wide sections run at footer width; running text keeps a readable line length (the column stays wide) */
.fb-text > :is(p, ul, ol, blockquote){ max-width:72ch; }
.fb-align-center .fb-text > :is(p, ul, ol, blockquote){ margin-left:auto; margin-right:auto; }

/* last builder section before the footer: proper breathing room (the normal padding sits too tight on the dark footer) */
.fb-page > .fb-section:last-child:not(.fb-pad-none){ padding-bottom:clamp(4.5rem, 8vw, 7rem); }

/* Image element "Logo": partner/brand logos at one height, never cropped (also inside cards). */
.fb-image--logo{ display:flex; align-items:center; height:88px; margin-bottom:1.25rem; }
.fb-image--logo img, .fb-col--karte .fb-image--logo img{ width:auto; max-width:100%; height:auto; max-height:88px; aspect-ratio:auto; object-fit:contain; object-position:left center; }
.fb-image--logo a{ display:block; height:100%; }
