body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

/* Ubuntu lokal eingebettet (self-hosted), damit die Seite auf jedem Geraet
   sauber rendert, auch ohne installierte Systemschrift. woff2 aus den CI-TTFs. */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url('../../files/themes/profimedien/fonts/ubuntu-400.woff2') format('woff2');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url('../../files/themes/profimedien/fonts/ubuntu-500.woff2') format('woff2');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url('../../files/themes/profimedien/fonts/ubuntu-700.woff2') format('woff2');}
:root{
    --bordeaux:#A6324D; --coral:#F45E48; --aubergine:#702154; --gold:#F9B233;
    --ink:#241017; --grey:#6B6B6B; --line:#ecdfe4; --bg:#F7F4F2; --white:#fff;
    --dgrey:#9a8f94; --dline:rgba(255,255,255,.11); --dark:#0c0509; --panel:#150a11;
    --grad:linear-gradient(90deg,#F9B233,#F45E48,#A6324D,#702154);
    --grad2:linear-gradient(120deg,#F9B233 0%,#F45E48 38%,#A6324D 70%,#702154 100%);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:90px}
  body{font-family:'Ubuntu','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  html{overflow-x:hidden}
  .wrap{max-width:1220px;margin:0 auto;padding:0 32px}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{line-height:1.05;letter-spacing:-.02em}
  .mono{font-family:'Ubuntu',sans-serif}
  .eyebrow{font-family:'Ubuntu',sans-serif;font-size:.82rem;letter-spacing:.14em}
  .btn{display:inline-block;padding:16px 32px;border-radius:4px;font-weight:700;font-size:1rem;transition:.25s;cursor:pointer}
  .btn-c{background:var(--coral);color:#fff}.btn-c:hover{background:var(--bordeaux)}
  .btn-d{background:var(--ink);color:#fff}.btn-d:hover{transform:translateY(-2px)}
  .btn-o{border:1.5px solid rgba(255,255,255,.4);color:#fff}.btn-o:hover{border-color:var(--coral)}
  .btn-og{border:1.5px solid var(--ink);color:var(--ink)}.btn-og:hover{background:var(--ink);color:#fff}

  /* ===== HEADER with scroll transform ===== */
  header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s,box-shadow .35s,border-color .35s;border-bottom:1px solid transparent}
  .nav{display:flex;align-items:center;justify-content:space-between;transition:height .35s}
  .logo-box{position:relative;transition:height .35s;height:96px;width:300px}
  .logo-box img{position:absolute;left:0;top:50%;transform:translateY(-50%);height:100%;transition:opacity .35s}
  .logo-neg{opacity:1}.logo-col{opacity:0}
  header nav ul{display:flex;gap:32px;list-style:none;font-weight:500}
  header nav a{color:#fff;transition:color .35s}
  header nav a:hover{color:var(--coral)}
  .pill{background:var(--coral);color:#fff!important;padding:12px 26px;border-radius:4px;font-weight:700}
  .pill:hover{background:var(--bordeaux)}
  /* scrolled state */
  body.scrolled header{background:rgba(247,244,242,.92);backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 8px 30px -20px rgba(0,0,0,.3)}
  body.scrolled .nav{height:74px}
  body.scrolled .logo-box{height:48px;width:150px}
  body.scrolled .logo-neg{opacity:0}body.scrolled .logo-col{opacity:1}
  body.scrolled header nav a{color:var(--ink)}
  body.scrolled header nav a:hover{color:var(--coral)}
  @media(max-width:900px){.nav{height:76px!important}.logo-box{height:44px!important;width:140px!important}.logo-neg{opacity:0}.logo-col{opacity:1}header{background:rgba(247,244,242,.92);backdrop-filter:blur(12px);border-color:var(--line)}header nav a{color:var(--ink)}}

  /* ===== HERO ===== */
  .hero{background:var(--dark);color:#efe7ea;position:relative;overflow:hidden;padding:170px 0 70px}
  .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0;animation:float 18s ease-in-out infinite}
  .b1{width:620px;height:620px;background:radial-gradient(circle,#7a1e46,transparent 68%);top:-120px;left:-100px}
  .b2{width:540px;height:540px;background:radial-gradient(circle,#3d1330,transparent 66%);top:40px;right:-80px;animation-delay:-6s}
  .b3{width:460px;height:460px;background:radial-gradient(circle,#8a2b2f,transparent 68%);bottom:-160px;left:38%;animation-delay:-11s}
  @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.96)}}
  .hero>.wrap{position:relative;z-index:2}
  .hero-grid{gap:50px;align-items:center}
  .hero .slogan{display:block;color:var(--coral);font-weight:700;font-size:1.2rem;letter-spacing:.01em;margin-bottom:16px}
  .hero h1{font-size:clamp(2.3rem,4.2vw,3.6rem);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
  .hero h1 .amp{color:var(--coral)}
  .hero .sub{font-size:1.5rem;font-weight:500;margin:22px 0 14px;max-width:26ch;color:#fff}
  .hero .claim{font-size:1.1rem;color:#cdbfc6;max-width:42ch;font-weight:400}
  .hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
  /* video */
  .video{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--dline);box-shadow:0 50px 100px -50px rgba(0,0,0,.8)}
  .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
  .video .fallback{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#3a1128,#702154);display:flex;align-items:center;justify-content:center}
  .video .play{width:78px;height:78px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(244,94,72,.5)}
  .video .play::after{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}

  /* ===== ADVANTAGES ===== */
  .adv{background:var(--dark);color:#efe7ea;padding:20px 0 76px;position:relative;z-index:2}
  .adv-grid{gap:22px 46px}
  .adv-item{display:flex;gap:14px;align-items:flex-start}
  .adv-item .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;margin-top:2px}
  .adv-item .ic::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
  .adv-item h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:3px}
  .adv-item p{font-size:.92rem;color:var(--dgrey)}

  /* ===== LOGO TICKER ===== */
  .ticker{background:var(--dark);border-top:1px solid var(--dline);padding:30px 0;overflow:hidden;position:relative;z-index:2}
  .ticker .lab{text-align:center;font-family:'Ubuntu',sans-serif;font-size:.74rem;letter-spacing:.16em;color:#6f636a;margin-bottom:20px}
  .track{display:flex;align-items:center;gap:64px;width:max-content;animation:scroll 32s linear infinite}
  /* Kundenlogos einheitlich weiss ziehen, damit sie auf Dunkel als eine Reihe wirken */
  .track img{height:34px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.62;transition:opacity .2s}
  .track img:hover{opacity:1}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* section-Abstand entfernt: Sektionen sind .mod_article */
  .sec-head{margin-bottom:50px}
  .sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
  .sec-head .eyebrow{color:var(--coral);display:block;margin-bottom:12px}
  .sec-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700}
  .sec-head p{color:var(--grey);font-size:1.1rem;margin-top:14px;max-width:60ch}

  /* ===== SEO CONTENT ===== */
  .seo{background:var(--white);border-bottom:1px solid var(--line)}
  .seo-in{gap:56px;align-items:center}
  .seo h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700}
  .seo h2 b{color:var(--bordeaux)}
  .seo p{color:var(--grey);font-size:1.05rem;margin-top:18px}
  .seo .stat{display:flex;gap:40px;margin-top:28px;flex-wrap:wrap}
  .seo .stat .n{font-size:2.2rem;font-weight:700;color:var(--bordeaux)}
  .seo .stat .t{font-size:.9rem;color:var(--grey)}

  /* ===== SERVICES ===== */
  .grid-s{gap:20px}
  .card-s{background:#fff;border:1px solid var(--line);border-radius:4px;padding:40px;transition:.3s}
  .card-s:hover{transform:translateY(-6px);box-shadow:0 40px 80px -50px rgba(112,33,84,.55)}
  .card-s .dot{width:50px;height:50px;border-radius:4px;background:var(--coral);margin-bottom:20px}
  .card-s h3{font-size:1.8rem;font-weight:700;margin-bottom:10px}
  .card-s p{color:var(--grey);font-size:1.02rem;max-width:44ch}
  .card-s.big{grid-column:span 2;background:var(--ink);color:#fff}
  .card-s.big p{color:#d9c7cf;max-width:56ch}

  /* Anschauung in den Leistungskarten: das Motiv liegt als Stimmung im
   Hintergrund und faded zur Textseite hin aus. */
.card-s { display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--bg); border-radius: 4px; padding: 32px; transition: transform .25s, box-shadow .25s; }
.card-s > * { position: relative; z-index: 1; }
.card-s:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px rgba(0,0,0,.35); }
/* Hintergrund-Motive der Karten entfernt: die Boxen sind jetzt flaechig beige gefuellt. */
.card-s .karten-bild { display: none; }
/* Kanaele als Zeichen, ebenfalls dezent im Hintergrund */
/* Abschlusskarte im Raster: gleiche Optik, nur ohne Motiv */
.card-frage .content-hyperlink { margin-top: auto; padding-top: 22px; }
.card-s .karten-kanaele { margin-top: auto; padding-top: 26px; }
.card-s .karten-kanaele .rte p { display: flex; gap: 18px; margin: 0; color: var(--bordeaux);
  font-size: 1.9rem; line-height: 1; opacity: .85; }

/* ===== ABOUT / PARTNER ===== */
  .about{background:var(--bg)}
  .about-in{gap:56px;align-items:center}
  .portrait{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:linear-gradient(135deg,#702154,#A6324D);box-shadow:0 40px 90px -50px rgba(112,33,84,.6)}
  .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .portrait .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-family:'Ubuntu',sans-serif;font-size:.85rem;gap:6px}
  .portrait .badge{position:absolute;left:22px;bottom:22px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);color:#fff;padding:10px 18px;border-radius:4px;font-size:.9rem;font-weight:500}
  .about-in h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:700}
  .about-in .lead{font-size:1.25rem;color:var(--ink);margin:20px 0;max-width:46ch}
  .about-in p{color:var(--grey);font-size:1.05rem;max-width:48ch}
  .values{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 30px}
  .val{background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px 22px;flex:1;min-width:150px}
  .val .vn{font-weight:700;color:var(--bordeaux)}
  .val .vt{color:var(--grey);font-size:.9rem;margin-top:4px}

  /* ===== REFERENCES dynamic grid ===== */
  .refs{background:var(--dark);color:#efe7ea;position:relative;overflow:hidden}
  .refs::before{content:"";position:absolute;left:78%;top:-5%;width:900px;height:900px;background:radial-gradient(circle,#2A0B20,transparent 66%);z-index:0}
  .refs>.wrap{position:relative;z-index:2}
  .refs .sec-head h2{color:#fff}
  .refs .sec-head p{color:var(--dgrey)}
  .filters{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:30px}
  .chip{font-family:'Ubuntu',sans-serif;padding:10px 20px;border:1px solid var(--dline);border-radius:4px;font-size:.86rem;color:var(--dgrey);cursor:pointer;transition:.2s}
  .chip.on,.chip:hover{background:var(--coral);border-color:var(--coral);color:#fff}
  .pgrid{gap:16px;}
  .case{position:relative;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--dline);transition:.3s;grid-column:span 1;grid-row:span 1;text-decoration:none;color:#fff}
  .case:hover{transform:scale(1.015)}
  .case .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:0}
  /* zwei Verläufe: oben dunkel für das Logo, unten dunkel für den Titel */
  .case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,3,7,.72) 0%,rgba(6,3,7,0) 30%,rgba(6,3,7,.10) 42%,rgba(6,3,7,.97) 100%);z-index:1}
  /* Logo-Slot oben links: weiße Wortmarken per screen-blend, farbige auf weißem Chip */
  .case .logo-w{position:absolute;top:22px;left:24px;z-index:3;height:34px;max-width:62%;object-fit:contain;object-position:left}
  .case .logo-w.screen{mix-blend-mode:screen}
  .case .logo-chip{position:absolute;top:20px;left:20px;z-index:3;background:#fff;border-radius:4px;padding:9px 14px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
  .case .logo-chip img{height:28px;display:block;mix-blend-mode:multiply}
  .case .meta{position:relative;z-index:2;padding:26px}
  .case .tag{font-family:'Ubuntu',sans-serif;font-size:.78rem;color:var(--gold);font-weight:500;letter-spacing:.04em}
  .case h3{font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;margin-top:6px}
  .case.feature{grid-column:span 2;grid-row:span 2}
  .case.feature h3{font-size:2.1rem}
  .case.feature .logo-w{height:46px;top:24px;left:26px}
  .case.feature .logo-chip img{height:40px}
  .case.wide{grid-column:span 2}
  .case.wide h3{font-size:1.6rem}
  .case.wide .logo-w{height:38px}
  .case.wide .logo-chip img{height:34px}
  .case.tall{grid-row:span 2}
  .hl{position:absolute;top:18px;right:18px;z-index:4;background:var(--coral);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:4px}
  .allref{margin-top:32px;text-align:center}
  .sh1{background:linear-gradient(135deg,#702154,#A6324D)}.sh2{background:linear-gradient(135deg,#A6324D,#F45E48)}
  .sh3{background:linear-gradient(135deg,#1a0d15,#702154)}.sh4{background:linear-gradient(135deg,#F45E48,#F9B233)}
  .sh5{background:linear-gradient(135deg,#3A3A3A,#A6324D)}.sh6{background:linear-gradient(135deg,#702154,#F45E48)}

  /* ===== REVIEWS ===== */
  .reviews{background:var(--dark);color:#efe7ea;position:relative;overflow:hidden;border-top:1px solid var(--dline)}
  .reviews::before{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:1100px;height:800px;background:radial-gradient(ellipse,#2A0B20,transparent 66%);z-index:0}
  .reviews>.wrap{position:relative;z-index:2}
  .panelrow{gap:44px;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--dline);border-radius:4px;padding:44px;backdrop-filter:blur(6px)}
  .rev-score{font-size:5rem;font-weight:700;color:var(--gold);line-height:1}
  .stars{color:var(--gold);font-size:1.4rem;letter-spacing:2px}
  .rev-sub{font-family:'Ubuntu',sans-serif;color:var(--dgrey);font-size:.82rem;margin-top:8px}
  .gwid{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:'Ubuntu',sans-serif;font-size:.78rem;color:var(--dgrey)}
  .gwid b{color:#4285F4;font-family:'Ubuntu'}
  .grid-rev{gap:16px}
  .rev{border:1px solid var(--dline);border-radius:4px;padding:24px;background:rgba(255,255,255,.02)}
  .rev .stars{font-size:.95rem;margin-bottom:12px}
  .rev p{font-size:.96rem;color:#e2d7dc}.rev .who{margin-top:14px;font-size:.84rem;color:var(--dgrey)}
  /* Platzhalter bis die echten Bewertungen live aus dem Google-Profil kommen */
  .rev.wait{display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:150px}
  .rev.wait i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.07)}
  .rev.wait i:nth-child(2){width:88%}.rev.wait i:nth-child(3){width:72%}
  .rev.wait span{margin-top:8px;font-size:.78rem;color:#6f636a;font-style:normal}
  .rev-score.wait{font-size:2.4rem;color:#6f636a;background:none;-webkit-text-fill-color:#6f636a}

  /* ===== INSTAGRAM ===== */
  .insta{background:var(--white);border-top:1px solid var(--line)}
  .insta-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:34px}
  .insta-handle{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--bordeaux);font-size:1.1rem}
  .ig-grid{gap:12px}
  .ig{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;cursor:pointer}
  .ig::after{content:"";position:absolute;inset:0;background:rgba(112,33,84,.0);transition:.25s}
  .ig:hover::after{background:rgba(112,33,84,.35)}
  .ig .icn{position:absolute;right:10px;top:10px;color:#fff;opacity:.85;z-index:2}
  /* Platzhalter, bis der Feed die echten Beiträge liefert */
  .ig.wait{background:var(--bg);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center}
  .ig.wait .icn{position:static;color:var(--line);font-size:1.6rem;opacity:1}
  .ig.wait .lbl{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:.72rem;color:#b9adb2}
  .ig-note{margin-top:18px;font-size:.86rem;color:var(--grey)}

  /* ===== PARTNERS ===== */
  .partners{background:var(--bg)}
  .pt-grid{gap:16px;margin-top:10px}
  .pt{background:#fff;border:1px solid var(--line);border-radius:4px;height:130px;display:flex;align-items:center;justify-content:center;padding:24px;transition:.2s}
  .pt img{max-width:100%;max-height:74px;object-fit:contain}
  .pt:hover{border-color:var(--coral)}

  /* ===== CUSTOMER LOGO WALL ===== */
  /* dunkel, damit die Logos per Filter einheitlich weiss laufen (wie im Ticker) */
  .wall{background:var(--bg)}
  .wall .sec-head h2{color:#fff}
  .wall-grid{gap:1px;background:var(--dline);border:1px solid var(--dline);border-radius:4px;overflow:hidden}
  .wl{background:#120810;height:120px;display:flex;align-items:center;justify-content:center;padding:22px;transition:.2s}
  .wl img{max-width:100%;max-height:44px;object-fit:contain;filter:brightness(0) invert(1);opacity:.6;transition:.2s}
  .wl.more{color:#7d6f76;font-size:.9rem;text-align:center;font-weight:500}
  .wl:hover{background:#1c0d18}
  .wl:hover img{opacity:1}

  /* ===== BLOG ===== */
  .blog{background:var(--bg);border-top:1px solid var(--line)}
  .grid-b{gap:24px}
  .post{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.3s;cursor:pointer}
  .post:hover{transform:translateY(-6px);box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
  .post{display:block}
  .post .thumb{height:200px;overflow:hidden;background:var(--grad2)}
  .post .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
  .post:hover .thumb img{transform:scale(1.05)}
  .post .in{padding:26px}
  .post .date{font-family:'Ubuntu',sans-serif;color:var(--coral);font-size:.82rem}
  .post h3{font-size:1.35rem;font-weight:500;margin:10px 0 8px}
  .post p{color:var(--grey)}

  /* ===== CTA ===== */
  .cta{background:var(--dark);color:#efe7ea;position:relative;overflow:hidden;text-align:center}
  .cta::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1000px;height:700px;background:radial-gradient(ellipse,#2A0B20,transparent 68%);z-index:0}
  .cta>.wrap{position:relative;z-index:2}
  .cta h2{font-size:clamp(2.4rem,5vw,4rem);font-weight:700}
  .cta p{color:#cdbfc6;font-size:1.25rem;margin:20px auto 22px;max-width:46ch}
  .person{display:inline-flex;gap:16px;align-items:center;margin:14px 0 30px}
  .avatar{width:60px;height:60px;border-radius:50%;background:var(--grad2);flex:none;overflow:hidden}
  .avatar img{width:100%;height:100%;object-fit:cover}
  .person .n{font-weight:700;text-align:left}.person .r{color:var(--dgrey);font-size:.9rem;text-align:left}

  /* ===== FOOTER ===== */
  footer{background:#050205;color:#c9b8c0;padding:70px 0 0}
  .foot{gap:40px;padding-bottom:40px}
  footer h4{color:#fff;margin-bottom:16px;font-weight:500}
  footer ul{list-style:none;line-height:2.1;color:#8f7a84;font-weight:400}
  .foot-logo{height:46px;margin-bottom:18px}
  .socials{display:flex;gap:12px;margin-top:20px}
  .socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--dline);display:flex;align-items:center;justify-content:center;color:#c9b8c0;transition:.2s}
  .socials a:hover{background:var(--coral);border-color:var(--coral);color:#fff}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:22px 0}
  .copy{font-family:'Ubuntu',sans-serif;font-size:.8rem;color:#6f5c65}
  .grad-bar{height:10px;background:var(--grad)}

  /* Grid-Items duerfen schrumpfen (verhindert max-content-Overflow auf Mobile) */
  .hero-grid>*,.adv-grid>*,.seo-in>*,.about-in>*,.grid-s>*,.grid-b>*,.grid-rev>*,.panelrow>*,.pgrid>*,.foot>*{min-width:0}
  .adv-item{min-width:0}.adv-item>div{min-width:0}

  @media(max-width:980px){
    header nav ul{display:none}
    .hero-grid,.seo-in,.about-in,.panelrow,.grid-s,.grid-rev,.grid-b,.foot{}
    .adv-grid{}
    .card-s.big{grid-column:auto}
    .pgrid{}
    .case.feature{grid-column:span 2;grid-row:span 2}
    .ig-grid{}
    .pt-grid{}
    .wall-grid{}
    .hero{padding:120px 0 50px}
  }
  @media(max-width:620px){
    .wrap{padding:0 18px}
    .hero h1{font-size:1.7rem;letter-spacing:0}
    .hero .sub{font-size:1.25rem}
    .adv-grid{gap:16px}
    .pill{padding:10px 18px;font-size:.9rem}
    .logo-box{width:158px!important}
    .ig-grid{}
    .wall-grid{}
    .pt-grid{}
    .seo .stat{gap:24px}
    /* eine Spalte: zwei Kacheln nebeneinander sind zu schmal für die Titel */
    .pgrid{}
    .case,.case.wide,.case.tall{grid-column:auto;grid-row:auto}
    .case.feature{grid-column:auto;grid-row:span 2}
    .case h3,.case.wide h3{font-size:1.45rem}
  }

/* ============================================================
   Contao-Anpassungen
   Die Regeln oben stammen aus dem Mockup. Contao rendert eine
   eigene Huelle: main > .inside > Artikel, Inhaltselemente als
   .content-*, Spalten als .grid_start mit den Spalten darin.
   Die Klassen an Artikeln und Elementen kommen aus dem
   CSS-ID-Feld im Backend, damit bleibt alles dort steuerbar.
   ============================================================ */

figure { margin: 0; }
img { max-width: 100%; height: auto; }

/* Sektionen sollen randlos faerben, die Breite begrenzt der Artikel */
main#main > .inside { max-width: none; padding: 0; }
.mod_article { padding: 96px 0; }
.mod_article > * { max-width: 1220px; margin-left: auto; margin-right: auto;
  padding-left: 32px; padding-right: 32px; }

/* Kopfbereich */
#header { position: relative; z-index: 50; background: var(--dark); }
#header .inside { max-width: 1220px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#header .content-image { flex: none; }
#header .content-image img { height: 62px; width: auto; }
#header .logo-farbig { display: none; }
#header .mod_navigation ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap; justify-content: flex-end; align-items: center; }
#header .mod_navigation a, #header .mod_navigation strong { color: #fff; font-weight: 500; }
#header .mod_navigation a:hover { color: var(--coral); }

/* Sektions-Farben */
.section--hero { background: var(--dark); color: #efe7ea; padding: 120px 0 90px; }
.section--dark { background: var(--dark); color: #efe7ea; }
.section--white { background: var(--white); }
.section--about { background: var(--bg); }
.section--dark .content-headline, .section--hero .content-headline { color: #fff; }
.section--dark h4, .section--dark h3 { color: #fff; }
.section--dark .content-text, .section--dark .rte { color: var(--dgrey); }

/* Ueberschriften und Text */
.content-headline { font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
h2.content-headline { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3.content-headline { font-size: 1.4rem; }
.content-text .rte p + p { margin-top: 14px; }
.content-text a { color: var(--bordeaux); }
.eyebrow-line { display: block; font-size: .82rem; letter-spacing: .14em; color: var(--coral); }

/* Hero */
.hero-titel { font-size: clamp(2.3rem, 4.6vw, 3.6rem); text-transform: uppercase; margin: 14px 0 20px;
  font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.hero-slogan .rte p { color: var(--coral); font-weight: 700; font-size: 1.2rem; margin: 0; }
.hero-text .rte { max-width: 46ch; }
.hero-text .rte p:first-child { font-size: 1.45rem; font-weight: 500; color: #fff; margin-bottom: 12px; }
.hero-text .rte p { color: #cdbfc6; }

/* Buttons: Klasse liegt am Hyperlink-Element */
.content-hyperlink a { display: inline-block; padding: 15px 30px; border-radius: 4px;
  font-weight: 700; transition: .25s; }
.btn-coral a { background: var(--coral); color: #fff; }
.btn-coral a:hover { background: var(--bordeaux); }
.btn-outline a { border: 1.5px solid rgba(255,255,255,.45); color: #fff; }
.btn-outline a:hover { border-color: var(--coral); }
.section--hero .content-hyperlink, .section--about .content-hyperlink { display: inline-block; margin-top: 24px; padding-right: 12px; }
.section--about .btn-coral a { background: var(--ink); }

/* Spalten kommen vom Clickpress-Gridset. Hier nur Abstaende und Ausrichtung,
   die Aufteilung steht am Element im Backend. */
.ce_cp_grid_start .grid_start { gap: 30px; }
.adv-grid .grid_start { gap: 26px 46px; }
.foot .grid_start { gap: 34px; }
/* Bild-Text-Kompositionen brauchen deutlich mehr Abstand zwischen den Spalten */
.seo-in .grid_start, .about-in .grid_start, .hero-grid .grid_start,
.cta-person .grid_start { gap: 72px; align-items: center; }

/* Vorteile */
.adv-item h4 { font-size: 1.05rem; margin-bottom: 4px; }
.adv-item h4 .bi { color: var(--coral); margin-right: 8px; }
/* Der Slogan steht als erster Vorteil und wird hervorgehoben */
.adv-erst h4 { color: #fff; font-size: 1.15rem; }
.adv-item .rte p { font-size: .93rem; margin: 0; }

/* Leistungskarten */
/* Farbige, komplett eckige Leistungs-Kacheln (Vierer-Raster-Farblogik) */
.card-s { background: var(--bg); border: 0; border-radius: 0; padding: 38px;
  min-height: 260px; transition: .3s; }
.card-s:hover { transform: translateY(-5px); box-shadow: 0 40px 80px -50px rgba(0,0,0,.45); }
.card-s h3 { font-size: 1.45rem; margin-bottom: 10px; }
.card-s h3 .bi { display: block; width: auto; height: auto; background: none;
  font-size: 1.9rem; margin-bottom: 18px; line-height: 1; }
.card-s.kachel-aubergine { background: var(--aubergine); }
.card-s.kachel-bordeaux { background: var(--bordeaux); }
.card-s.kachel-coral { background: var(--coral); }
.card-s.kachel-dunkel { background: var(--ink); }
.card-s.kachel-aubergine, .card-s.kachel-bordeaux, .card-s.kachel-coral, .card-s.kachel-dunkel { color: #fff; }
.card-s.kachel-aubergine h3, .card-s.kachel-bordeaux h3, .card-s.kachel-coral h3, .card-s.kachel-dunkel h3 { color: #fff; }
.card-s.kachel-aubergine .rte p, .card-s.kachel-bordeaux .rte p,
.card-s.kachel-coral .rte p, .card-s.kachel-dunkel .rte p { color: rgba(255,255,255,.88); }
.card-s.kachel-gold { background: var(--gold); color: var(--ink); }
.card-s.kachel-gold h3 { color: var(--ink); }
.card-s.kachel-gold .rte p { color: rgba(36,16,23,.8); }
/* Frage-Karte dunkel abgesetzt, gleiche eckige Anmutung */
.card-s.card-frage { background: var(--bg); border: 1px solid var(--line); }
.card-s .rte p { color: var(--grey); margin: 0; }

/* Portraet */
.portrait .content-image { border-radius: 4px; overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(36,16,23,.35); }
.portrait img { display: block; width: 100%; }

/* Fusszeile */
#footer { background: var(--dark); color: var(--dgrey); padding: 70px 0 0; }
#footer .inside { max-width: 1220px; margin: 0 auto; padding: 0 32px 40px; }
#footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
#footer ul { list-style: none; padding: 0; margin: 0; }
#footer li { margin-bottom: 8px; }
#footer a { color: var(--dgrey); }
#footer a:hover { color: var(--coral); }
#footer .foot-logo img {height: 46px; width: auto; margin-bottom: 16px;}

@media (max-width: 980px) {
  #header .inside { flex-wrap: wrap; }
  .seo-in, .about-in, .foot {gap: 30px;}
}
@media (max-width: 620px) {
  .mod_article { padding: 64px 0; }
  .mod_article > * { padding-left: 18px; padding-right: 18px; }

}

/* ---------- Kundenlogo-Ticker ----------
   Eine ruhige Logoreihe statt Laufband: die Logos sind einzelne
   Bildelemente, eine Animation braeuchte einen Wrapper, den es im
   Backend nicht gibt. */
/* Dunkler Streifen mit einheitlich weissen Logos. Moeglich, weil die Dateien
   in img/logos-frei freigestellt sind: sonst wuerden Marken mit weisser Flaeche
   unter dem Weiss-Filter zu Bloecken. */
/* Dunkler Streifen, die Logos werden per Filter weiss gezogen, genau wie es
   die bestehende Seite mit .svgweiss loest. Die SVGs sind freigestellt. */
.section--ticker { background: var(--dark); padding: 30px 0 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px;
  overflow: hidden;
  /* ueber dem Hero-Grund (z0), aber unter der Coral-Kante (z2): die Logos
     laufen hinter der Coral-Flaeche hervor */
  position: relative; z-index: 1; }
/* Laufband: die Spur setzt ticker.js, hier laeuft sie */
.section--ticker .ticker-spur { flex: 0 0 100%; display: flex; align-items: center; gap: 56px;
  width: max-content; }
.section--ticker .ticker-spur.laeuft { animation: ticker-lauf var(--lauf-dauer, 40s) linear infinite; }
.section--ticker .ticker-spur:hover { animation-play-state: paused; }
@keyframes ticker-lauf { from { transform: translateX(0); } to { transform: translateX(var(--lauf-weg, -50%)); } }
@media (prefers-reduced-motion: reduce) { .section--ticker .ticker-spur.laeuft { animation: none; } }
.section--ticker > * { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
.ticker-kopf { flex: 0 0 100%; text-align: center; }
.ticker-label { font-size: .74rem; letter-spacing: .16em; color: #6f636a; margin-bottom: 18px; }
.section--ticker .ticker-logo { flex: 0 0 auto; }
/* Hoehe nach Seitenverhaeltnis mal Zuschlag fuer feinlinige Marken,
   damit alle Logos optisch gleich schwer wirken. */
/* Die Dateien sind bereits weisse Silhouetten, kein Filter noetig */
.section--ticker .ticker-logo img { height: 42px; width: auto; max-width: 210px;
  object-fit: contain; filter: brightness(0) invert(1); opacity: .8; transition: opacity .2s; }
.ticker-logo.logo-lang { --logo-h: 24px; }
.ticker-logo.logo-breit { --logo-h: 28px; }
.ticker-logo.logo-mittel { --logo-h: 36px; }
.ticker-logo.logo-kompakt { --logo-h: 44px; }
.ticker-logo.logo-zart { --logo-f: 1.3; }
.section--ticker .content-image { text-align: center; }

/* ---------- Referenzraster ----------
   Die Kacheln kommen aus dem Archiv "Referenzen". Größe und Hervorhebung
   stehen am Datensatz, das Template setzt die Klassen ref-hoch, ref-breit
   und ist-highlight. */
.referenzen .sec-intro .rte p { color: var(--dgrey); max-width: 62ch; }
.ref-grid-modul { display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 210px; grid-auto-flow: dense; gap: 26px; margin-top: 34px; }
.ref-kachel { position: relative; display: flex; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--dline); text-decoration: none; transition: transform .3s;
  /* Fallback fuer Kacheln ohne Motiv: Markenverlauf statt hartem Schwarz */
  background: linear-gradient(135deg, #3a1528, var(--panel)); }
.ref-kachel:hover { transform: scale(1.012); }
.ref-kachel.ref-hoch { grid-row: span 2; }
.ref-kachel.ref-breit { grid-column: span 2; }
.ref-kachel::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,3,7,.72) 0%, rgba(6,3,7,0) 30%,
    rgba(6,3,7,.10) 42%, rgba(6,3,7,.97) 100%); }
.ref-motiv { position: absolute; inset: 0; z-index: 0; }
.ref-motiv figure { margin: 0; height: 100%; }
.ref-motiv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-logo { position: absolute; top: 20px; left: 22px; z-index: 3; max-width: 58%; }
.ref-logo img { max-height: var(--logo-h, 30px); width: auto; }
/* Hoehe nach Form: Embleme groesser, breite Wortmarken flacher */
.ref-logo.logo-lang { --logo-h: 26px; }
.ref-logo.logo-breit { --logo-h: 30px; }
.ref-logo.logo-mittel { --logo-h: 38px; }
.ref-logo.logo-kompakt { --logo-h: 52px; }
/* freigestellte Logos: kein Blend, dafuer ein Schatten fuer den Kontrast */
.ref-logo.logo-alpha:not(.ref-logo-chip) img { mix-blend-mode: normal;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.9)); }
.ref-logo-chip img { filter: none; }
.ref-logo:not(.ref-logo-chip) img { mix-blend-mode: screen; }
.ref-logo-chip { background: #fff; border-radius: 4px; padding: 8px 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ref-logo-chip img { max-height: 24px; mix-blend-mode: multiply; }
/* Helle/weisse Logos: dunkler Chip-Grund statt Weiss (refLogoHell) */
.ref-logo-chip.chip-dunkel { background: #241017; }
.ref-logo-chip.chip-dunkel img { mix-blend-mode: normal; }
.ref-text { position: relative; z-index: 2; align-self: flex-end; padding: 24px; width: 100%; }
.ref-kategorie { display: block; font-size: .8rem; color: var(--gold); font-weight: 500;
  letter-spacing: .04em; margin-bottom: 6px; }
.ref-titel { display: block; color: #fff; font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; line-height: 1.08; letter-spacing: -.01em; }
.ref-hoch .ref-titel, .ref-gross .ref-titel { font-size: 1.9rem; }
.referenzen .content-hyperlink { display: inline-block; margin-top: 30px; }

/* Seiten ohne Hero: die feste Kopfleiste braucht oben Platz, sonst liegt sie
   ueber der Ueberschrift. Auf schmalen Geraeten bricht die Navigation um und
   die Leiste wird hoeher. */
#referenzuebersicht { padding-top: 130px; }
@media (max-width: 620px) { #referenzuebersicht { padding-top: 200px; } }

/* Übersichtsseite: gleiches Raster, mehr Zeilen */
#referenzuebersicht .ref-grid-modul { grid-auto-rows: 230px; }

/* Detailseite einer Referenz */
#referenz-detail .layout_full h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  line-height: 1.06; margin-bottom: 10px; }
#referenz-detail .subheadline { color: var(--coral); font-weight: 700; }
#referenz-detail figure { margin: 26px 0; border-radius: 4px; overflow: hidden; }
#referenz-detail .ref-detail-text { margin-top: 26px; }
#referenz-detail .ref-detail-leistungen ul { margin: 10px 0 0 18px; }
#referenz-detail .ref-detail-leistungen li { margin-bottom: 6px; }
#referenz-detail .content-hyperlink { display: inline-block; margin-top: 26px; }

/* ---------- Partner ---------- */
.partner-grid { margin-top: 30px; }
.partner-karte { background: #fff; border: 1px solid var(--line); border-radius: 4px;
  min-height: 130px; display: flex; align-items: center; justify-content: center; padding: 22px; }
.partner-karte img { max-height: calc(var(--logo-h, 74px) * var(--logo-f, 1)); max-width: 100%;
  width: auto; }
.partner-karte .logo-lang { --logo-h: 48px; }
.partner-karte .logo-breit { --logo-h: 60px; }
.partner-karte .logo-mittel { --logo-h: 72px; }
.partner-karte .logo-kompakt { --logo-h: 94px; }
.partner-karte .logo-zart { --logo-f: 1.15; }

/* ---------- Kundenlogo-Wand ---------- */
/* Kacheln stehen frei nebeneinander, ohne umlaufenden Rahmen. Die Logos laufen
   einheitlich weiss, beim Ueberfahren wechselt die Kachel auf Weiss und das Logo
   zeigt seine eigene Farbe. */
.wand-grid { margin-top: 30px; }
.wand-grid .grid_start { gap: 14px; }
.wand-feld { background: #150c14; border: 1px solid var(--dline); border-radius: 4px;
  min-height: 118px; display: flex; align-items: center; justify-content: center;
  padding: 22px; transition: background .25s, border-color .25s, transform .25s; }
/* zwei Fassungen uebereinander: weiss im Ruhezustand, farbig beim Ueberfahren */
.wand-feld { position: relative; }
.wand-feld img { max-height: 60px; max-width: 100%; width: auto;
  filter: brightness(0) invert(1); opacity: .88; transition: filter .25s, opacity .25s; }
/* gleiche Staffelung wie im Ticker */
/* rein weisse Marken brauchen einen dunklen Grund, damit sie sichtbar sind */
/* Marken, die selbst schon weiss sind, brauchen keinen Filter */
.wand-feld.feld-dunkel img { filter: none; }
/* Illustrationen, Signets und duenne Strichlogos: hell in Graustufen statt Silhouette */
.section--ticker .ticker-logo.logo-voll img { filter: grayscale(1) brightness(1.8) contrast(.95); opacity: .95; }
/* Einzelfaelle, die nur in Originalfarbe lesbar sind (z. B. gelber Kulturmacher-Kreis) */
.section--ticker .ticker-logo.logo-original img { filter: none; opacity: .95; }
/* Helle Ticker-Variante als optischer Trenner (z. B. Über uns): Logos dunkel */
.section--ticker-hell { background: var(--bg); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.section--ticker-hell .ticker-logo img { filter: brightness(0); opacity: .72; }
.section--ticker-hell .ticker-logo.logo-voll img { filter: grayscale(1) brightness(.45); opacity: .8; }
.section--ticker-hell .ticker-logo.logo-original img { filter: none; opacity: .95; }
.section--ticker-hell .ticker-label { color: var(--grey); }
.wand-feld:hover { background: #fff; border-color: #fff; transform: translateY(-2px); }
.wand-feld:hover img { filter: none; opacity: 1; }
/* Akquise-Zelle: dezenter Hinweis statt Logo */
.wand-feld.feld-hinweis .rte p { margin: 0; color: #6f636a; font-size: .82rem;
  text-align: center; line-height: 1.5; }
.wand-feld.feld-hinweis .rte a { color: var(--coral); font-weight: 700; text-decoration: none; }
.wand-feld.feld-hinweis:hover { background: #150c14; border-color: var(--coral); }
/* Rein weisse Marken wuerden auf weissem Hover-Grund verschwinden: hier statt
   Weiss ein Grau als Hover-Grund, damit das weisse Logo sichtbar bleibt. */
.wand-feld.feld-dunkel:hover { background: var(--grey); border-color: var(--grey); }
.wand-feld.feld-dunkel:hover img { filter: brightness(0) invert(1); opacity: 1; }
/* Helle Farbmarken: in Ruhe weiss wie alle, beim Hover Originalfarben auf Grau */
.wand-feld.feld-zart img { filter: brightness(0) invert(1); }
.wand-feld.feld-zart:hover { background: var(--grey); border-color: var(--grey); }
.wand-feld.feld-zart:hover img { filter: none; opacity: 1; }
/* Illustrationen/Signets: in Ruhe helle Graustufen, beim Hover Original auf Weiss */
.wand-feld.feld-voll img { filter: grayscale(1) brightness(1.8) contrast(.95); opacity: .95; }
.wand-feld.feld-voll:hover img { filter: none; opacity: 1; }
/* Einzelfaelle immer in Originalfarbe (lesbar auf Dunkel wie auf Weiss) */
.wand-feld.feld-original img { filter: none; opacity: .95; }
.wand-feld.feld-original:hover img { filter: none; opacity: 1; }
/* sehr helle Marken wuerden auf Weiss untergehen */
.wand-mehr .rte p { color: #7d6f76; font-size: .9rem; margin: 0; text-align: center; }

/* Logowand auf schmalen Geraeten kompakter: 41 Marken in zwei Spalten
   ergeben sonst eine Sektion von mehreren tausend Pixeln Hoehe. */
@media (max-width: 620px) {
  .wand-grid .grid_start { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wand-feld { min-height: 78px; padding: 10px; }
    .wand-feld img { max-height: 38px; }
}

/* ---------- Blog ----------
   Die Liste kommt aus dem Nachrichtenmodul. Container ist .mod_newslist,
   jeder Beitrag ein .layout_latest. */
.section--bg { background: var(--bg); }
.blog-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.blog-liste .layout_latest { background: #fff; border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; padding: 0 0 24px; transition: .3s;
  display: flex; flex-direction: column; }
.blog-liste .layout_latest:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -50px rgba(0,0,0,.35); }
.blog-liste figure { overflow: hidden; }
/* oberer Bildanker: bei Personenfotos bleiben die Koepfe im Ausschnitt */
.blog-liste figure img { width: 100%; height: 200px; object-fit: cover; display: block;
  object-position: center top; }
/* Datum gehoert unter das Bild, sonst steht es ueber der Kachel und stoert den Aufbau */
.blog-liste .layout_latest { display: flex; flex-direction: column; }
.blog-liste figure { order: 1; }
.blog-liste .info { order: 2; padding: 20px 24px 0; color: var(--coral); font-size: .82rem; margin: 0; }
.blog-liste h2 { order: 3; }
.blog-liste .ce_text, .blog-liste .content-text { order: 4; }
.blog-liste .more { order: 5; }
.blog-liste .info time { font-weight: 500; }
.blog-liste h2 { font-size: 1.15rem; line-height: 1.25; padding: 10px 24px 0; margin: 0; }
.blog-liste h2 a { color: var(--ink); }
.blog-liste h2 a:hover { color: var(--bordeaux); }
.blog-liste .ce_text { padding: 10px 24px 0; color: var(--grey); font-size: .95rem; flex: 1; }
.blog-liste .ce_text p { margin: 0; }
.blog-liste .more { padding: 16px 24px 0; }
.blog-liste .more a { color: var(--bordeaux); font-weight: 500; }
.btn-dunkel a { background: var(--ink); color: #fff; }
/* inline-block ignoriert die zentrierende Breitenbegrenzung des Artikels und
   klebt an der Aussenkante, deshalb als Block mit linksbuendigem Inhalt */
#aktuelles .content-hyperlink { display: block; text-align: left; margin-top: 40px; }
#aktuelles .content-hyperlink a { display: inline-block; }

/* ---------- Kontaktabschluss ---------- */
.section--cta { color: #efe7ea; text-align: center;
  position: relative; overflow: hidden;
  background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
/* kleine scharfe Coral-Ecke rechts, Hero-Sprache (Variante A, Marcos Wunsch: rechts) */
.section--cta::before { content: ""; position: absolute; right: -8%; bottom: -40%;
  width: 30%; height: 120%; background: var(--coral); transform: rotate(-14deg);
  opacity: .92; z-index: 1; pointer-events: none; }
.section--cta > * { position: relative; z-index: 2; }
/* dezente Linie zur Fusszeile, damit sich der Abschluss abhebt */
.section--cta::after { content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); width: min(1156px, calc(100% - 64px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); z-index: 3; }
.section--cta .content-headline { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); }
.section--cta .cta-text .rte p { font-size: 1.2rem; color: #cdbfc6; max-width: 48ch;
  margin: 18px auto 0; }
.cta-person { max-width: 780px; margin: 40px auto 0; align-items: center; text-align: left; }
.section--cta .content-hyperlink { display: inline-block; margin-top: 22px; }
.cta-ansprache .rte p { margin: 0 0 6px; }
.cta-ansprache .rte p:last-child { color: var(--dgrey); }
.cta-ansprache .rte a { color: var(--coral); }
.cta-bild .content-image { border-radius: 4px; overflow: hidden; }
.cta-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section--cta .btn-coral a { background: var(--coral); color: #fff; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 9px; }
.section--cta .btn-coral a:hover { background: var(--bordeaux); }
/* Send-Zeichen vor dem Kontakt-Button (Bootstrap-Icon als Data-URI, weiss) */
.section--cta .btn-coral a::before { content: ""; width: 15px; height: 15px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z'/%3E%3C/svg%3E") center/contain no-repeat; }

.section--cta .cta-person .rte p { color: #efe7ea; }
.section--cta .content-hyperlink { display: inline-block; }

@media (max-width: 980px) {
  .blog-liste { grid-template-columns: 1fr; }
  .ref-kachel, .ref-kachel.ref-gross { min-height: 260px; }
}

/* ============================================================
   Feinschliff auf die abgestimmte Vorlage
   ============================================================ */

/* Kopfbereich liegt ueber dem Hero und wird beim Scrollen zur hellen Leiste */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent;
  border-bottom: 1px solid transparent; transition: background .35s, box-shadow .35s, border-color .35s; }
#header .inside { padding: 22px 32px; transition: padding .35s; }
/* Grosszustand bewusst dezenter (ca. 25 % kleiner), Sticky-Groesse bleibt */
#header .content-image { position: relative; width: 297px; height: 72px; transition: width .35s, height .35s; }
/* max-width der allgemeinen Bildregel wuerde das Logo stauchen */
#header .content-image img { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 100%; width: auto; max-width: none; transition: opacity .35s; }
#header .logo-negativ { opacity: 1; }
/* Das farbige Logo liegt exakt auf dem negativen, deshalb absolut an der
   Inhaltskante statt ueber einen negativen Rand. */
#header .inside { position: relative; }
#header .logo-farbig { display: block; opacity: 0; position: absolute; left: 32px;
  top: 50%; transform: translateY(-50%); margin-left: 0; }
/* Sticky-Zustand bleibt dunkel: schwarzer Grund, Negativ-Logo, weisse Links */
body.scrolled #header { background: rgba(12,5,9,.94); backdrop-filter: blur(14px);
  border-color: var(--dline); box-shadow: 0 8px 30px -20px rgba(0,0,0,.55); }
body.scrolled #header .inside { padding: 12px 32px; }
body.scrolled #header .content-image { width: 198px; height: 48px; }

body.scrolled #header .logo-negativ { opacity: 1; }
body.scrolled #header .logo-farbig { opacity: 0; }
body.scrolled #header .mod_navigation a { color: #fff; }
body.scrolled #header .mod_navigation strong { color: var(--coral); }

/* Hero: Text links, Video rechts, dazu die Farbschlieren im Hintergrund */
/* Der Splash liegt auf einem Element, das Hero und Vorteile ueberspannt.
   Fruehere Versuche mit je eigenem Verlauf ergaben an der Sektionsgrenze einen
   sichtbaren Helligkeitssprung; jetzt laeuft eine einzige Flaeche durch. */
.section--hero { position: relative; overflow: visible; background: none;
  padding: 170px 0 90px; }
.section--hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  bottom: -900px; z-index: -1; pointer-events: none;
  background-color: var(--dark);
  background-image:
    radial-gradient(760px 700px at -6% -12%, rgba(150,35,79,.85), transparent 62%),
    radial-gradient(640px 620px at 104% 6%, rgba(90,26,68,.85), transparent 60%),
    radial-gradient(700px 620px at 40% 86%, rgba(138,43,47,.5), transparent 66%);
  background-repeat: no-repeat; }
#vorteile { position: relative; background: none; }

/* Zweifarbige Ueberschrift wie in der Vorlage */
.hero-titel .akzent { color: var(--coral); }
.section--hero > * { position: relative; z-index: 2; }
.hero-grid { align-items: center; }
.hero-video .video-rahmen { position: relative; padding-top: 56.25%; border-radius: 4px;
  overflow: hidden; border: 1px solid var(--dline); box-shadow: 0 50px 100px -50px rgba(0,0,0,.8); }
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Kennzahlen unter dem Fliesstext: Zahlen auf einer Linie, Bordeaux wie in der Vorlage */
.kennzahlen .rte { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 26px; align-items: flex-start; }
.kennzahlen .rte p { margin: 0; font-size: .9rem; color: var(--grey); max-width: 14ch;
  line-height: 1.3; flex: 0 0 auto; }
/* der allgemeine Abstand zwischen Absaetzen wuerde die Zahlen versetzt stellen */
.kennzahlen .rte p + p { margin-top: 0; }
.kennzahlen .rte b { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.1;
  color: var(--bordeaux); margin-bottom: 6px; }
/* Nebensatz unter den Kennzahlen: bewusst zurueckhaltend */
.kennzahlen .rte p.kennzahl-neben { flex-basis: 100%; max-width: none; color: var(--dgrey);
  font-size: .88rem; margin-top: 10px; }
/* Kennzahlen als eckiges Farbraster (Kachel-Sprache), drei Kacheln mit Abstand */
.zahlen-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 54px; }
.zahlen-kachel { padding: 36px 30px; color: #fff; }
.zahlen-kachel b { display: block; font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 700;
  line-height: 1; margin-bottom: 12px; white-space: nowrap; }
.zahlen-kachel span { font-size: .95rem; line-height: 1.4; display: block; opacity: .92; }
.zk-aubergine { background: var(--aubergine); }
.zk-bordeaux { background: var(--bordeaux); }
.zk-coral { background: var(--coral); }
.zk-gold { background: var(--gold); color: var(--ink); }
.zk-gold span { opacity: .8; }
@media (max-width: 900px) { .zahlen-kacheln { grid-template-columns: 1fr 1fr; } }


/* Markenverlauf als Abschluss der Seite */
#footer { position: relative; padding-bottom: 26px; }
#footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--grad); }

@media (max-width: 980px) {
  #header .content-image { width: 198px; height: 48px; }
  #header { background: rgba(12,5,9,.94); border-color: var(--dline); }
  #header .logo-negativ { opacity: 1; }
  #header .logo-farbig { opacity: 0; }
  #header .mod_navigation a { color: #fff; }
  .section--hero { padding: 130px 0 60px; }
  }

/* Abstände wie in der Vorlage: Hero und Vorteile bilden einen dunklen Block */
.section--hero { padding-bottom: 30px; }
#vorteile { padding-top: 34px; padding-bottom: 76px; }
#kundenlogos { padding-top: 26px; }
.hero-text-spalte .content-hyperlink:first-of-type { margin-right: 6px; }
.hero-grid { gap: 50px; }

/* ---------- Filterleiste über dem Referenzraster ----------
   Die Schaltflächen erzeugt ref-filter.js aus den Kategorien der Kacheln. */
/* margin links/rechts auf auto, sonst haengt die Leiste an der Aussenkante
   statt an der Inhaltskante des Artikels */
.ref-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px auto 4px; }
.ref-chip { font: inherit; font-size: .86rem; padding: 9px 19px; border-radius: 4px;
  border: 1px solid var(--dline); background: none; color: var(--dgrey);
  cursor: pointer; transition: .2s; }
.ref-chip:hover, .ref-chip.ist-aktiv { background: var(--coral); border-color: var(--coral); color: #fff; }
.section--white .ref-chip, .section--bg .ref-chip { border-color: var(--line); color: var(--grey); }
/* Im gefilterten Zustand laufen alle Kacheln gleich groß, sonst reißt das Raster auf */
.ref-grid-modul.ist-gefiltert .ref-kachel { grid-column: auto; grid-row: auto; }
.ref-kachel[hidden] { display: none; }

/* ---------- Referenzraster: variable Kachelgrößen wie in der Vorlage ---------- */
.ref-grid .grid_start { grid-auto-rows: 210px; grid-auto-flow: dense; }
.ref-kachel { min-height: 0; }
.ref-kachel.ref-hoch { grid-row: span 2; }
.ref-kachel.ref-breit { grid-column: span 2; }
.ref-kachel.ref-gross { grid-column: span 2; grid-row: span 2; }
.ref-kachel.ref-hoch .ref-text a { font-size: 1.7rem; }
.ref-highlight { position: absolute; top: 18px; right: 18px; z-index: 4; }
.ref-highlight .rte p { margin: 0; background: var(--coral); color: #fff; font-size: .72rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px;
  border-radius: 4px; }
.ref-highlight .rte p::before { content: "★ "; }

/* ---------- Bewertungen als Panel ---------- */
.bewertungs-panel { background: rgba(255,255,255,.03); border: 1px solid var(--dline);
  border-radius: 4px; padding: 40px; margin-top: 30px; align-items: center; }
.bewertung-zahl .platzhalter-zahl { font-size: 2.2rem; font-weight: 700; line-height: 1;
  color: var(--gold); margin-bottom: 10px; }
.bewertung-zahl .rte p { color: var(--dgrey); font-size: .9rem; margin: 0; }
.bewertung-zahl .quelle { margin-top: 14px; font-size: .78rem; color: #6f636a; }
.stimme { border: 1px solid var(--dline); border-radius: 4px; padding: 24px;
  background: rgba(255,255,255,.02); min-height: 140px; }
.stimme .rte p:first-child { color: #e2d7dc; font-size: .96rem; margin: 0; }
.stimme .quelle { margin-top: 12px; font-size: .8rem; color: #6f636a; }

/* ---------- Instagram ---------- */
.insta-handle { display: block; margin-top: -46px; text-align: right; }
.insta-handle a { color: var(--bordeaux); font-weight: 700; font-size: 1.1rem; }
.insta-handle a::before { content: "◎ "; }
.insta-grid { margin-top: 30px; }
.insta-feld { aspect-ratio: 1; border-radius: 4px; background: var(--bg);
  border: 1px dashed var(--line); display: flex; align-items: flex-end; justify-content: center;
  padding: 12px; }
.insta-feld .rte p { margin: 0; font-size: .74rem; color: #b9adb2; }
.insta-hinweis .rte p { margin-top: 18px; font-size: .86rem; color: var(--grey); }

/* ---------- Abstände der hellen Sektionen wie in der Vorlage ---------- */
.section--white, .section--bg, .section--about { padding: 90px 0; }
.section--white .content-headline, .section--bg .content-headline,
.section--dark .content-headline { margin-bottom: 18px; }
.eyebrow-block .rte p { margin-bottom: 0; }
.sec-intro .rte p { margin-top: 12px; }
#leistungen .ce_cp_grid_start, #netzwerk .ce_cp_grid_start { margin-top: 34px; }

@media (max-width: 980px) {
  .ref-kachel.ref-hoch, .ref-kachel.ref-breit { grid-row: auto; grid-column: auto; }
  .ref-kachel.ref-gross { grid-column: span 2; grid-row: span 2; }
  .ref-grid .grid_start { grid-auto-rows: 240px; }
  .insta-handle { margin-top: 0; text-align: left; }
}

/* Bestandskacheln zeigen helle Bildschirmfotos: kraeftigerer Verlauf, damit
   Kategorie und Titel darauf sicher lesbar bleiben. */
.ref-kachel.ref-bestand::after { background: linear-gradient(180deg, rgba(6,3,7,.45) 0%,
  rgba(6,3,7,.12) 30%, rgba(6,3,7,.55) 58%, rgba(6,3,7,.97) 100%); }
/* Bestandskacheln: naeher ans Seitenmotiv heran statt ganzer Seitenkoepfe,
   einzelne Ausreisser werden unten per Alias nachjustiert */
.ref-kachel.ref-bestand .ref-motiv img { object-position: center 12%;
  transform: scale(1.35); transform-origin: center 12%; }
/* Einzeljustagen: Ausschnitt auf den spannenden Teil des jeweiligen Motivs */
.ref-kachel[href*="rehatechnik"] .ref-motiv img { transform-origin: center 30%; object-position: center 30%; }
.ref-kachel[href*="itsonlymejulia-shop"] .ref-motiv img { transform-origin: 34% 15%; object-position: 34% 15%; }
.ref-kachel[href*="droneit"] .ref-motiv img { transform-origin: center 50%; object-position: center 50%; }
.ref-kachel[href*="breitenfeld-de"] .ref-motiv img { transform-origin: 62% 35%; object-position: 62% 35%; }
.ref-kachel[href*="medi-gesundheitsgruppe"] .ref-motiv img { transform-origin: center 42%; object-position: center 42%; }
.ref-kachel[href*="k-tech-gmbh"] .ref-motiv img { transform-origin: center 38%; object-position: center 38%; }
.ref-kachel[href*="itsonlymejulia"]:not([href*="-shop"]) .ref-motiv img { transform-origin: center 35%; object-position: center 35%; }
.ref-kachel[href*="wirsindkulturmacher"] .ref-motiv img { transform-origin: 68% 25%; object-position: 68% 25%; transform: scale(1.4); }
.ref-kachel[href*="reischmann"] .ref-motiv img { transform-origin: center 22%; object-position: center 22%; }
.ref-kachel[href*="m-stief"] .ref-motiv img { transform-origin: 90% 85%; object-position: 90% 85%; transform: scale(1.6); }
.ref-kachel[href*="treeazy"] .ref-motiv img { transform-origin: 97% 40%; object-position: 97% 40%; transform: scale(1.45); }
.ref-kachel[href*="thannhauser-ulbricht"] .ref-motiv img { transform-origin: 90% 45%; object-position: 90% 45%; transform: scale(1.6); }
.ref-kachel[href*="kuchen-eberhardt"] .ref-motiv img { transform-origin: 82% 60%; object-position: 82% 60%; transform: scale(1.55); }
.ref-kachel[href*="wallfahrtswirt"] .ref-motiv img { transform-origin: center 55%; object-position: center 55%; transform: scale(1.15); }
.ref-kachel[href*="up2e"] .ref-motiv img { transform-origin: 88% 58%; object-position: 88% 58%; transform: scale(1.7); }
.ref-kachel.ref-bestand .ref-kategorie, .ref-kachel.ref-bestand .ref-titel {
  text-shadow: 0 1px 6px rgba(0,0,0,.75); }

/* Motiv füllt die Kachel unabhängig von ihrer Höhe */
.ref-kachel .ref-motiv, .ref-kachel .ref-motiv figure { position: absolute; inset: 0; height: 100%; }
.ref-kachel .ref-motiv img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Instagram: sechs Kacheln in einer Reihe wie in der Vorlage.
   Das Gridset kennt keine Sechserteilung, daher hier gesetzt. */
.insta-grid .grid_start { grid-template-columns: repeat(6, 1fr); }

/* Dunkle Sektionen dichter setzen */
#referenzen { padding-bottom: 70px; }
#bewertungen { padding-top: 40px; padding-bottom: 90px; }

@media (max-width: 980px) {
  .insta-grid .grid_start { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .insta-grid .grid_start { grid-template-columns: repeat(2, 1fr); }
}

/* Farbige Logos auf hellem Chip, damit sie auf jedem Motiv lesbar bleiben */
.ref-logo-chip { background: #fff; border-radius: 4px; padding: 9px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ref-logo-chip img { max-height: calc(var(--logo-h, 26px) * .8); mix-blend-mode: multiply; }

/* Weiße Logos ohne Chip: dunkler Bilduntergrund fällt per Blend-Modus weg */
.ref-logo:not(.ref-logo-chip) img { mix-blend-mode: screen; }

/* Aufnahme mit eigenem Hintergrund fuellt den Rahmen */
.portrait { position: relative; }
.portrait .content-image { aspect-ratio: 4/5; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* Arbeitsweise: Team-Gruppenfoto (Querformat) braucht breiteren Rahmen, sonst
   werden beide Personen seitlich angeschnitten */
#ueber-arbeitsweise .portrait .content-image { aspect-ratio: 5/4; }
#ueber-arbeitsweise .portrait img { object-position: center center; }
.portrait-chip { position: absolute; left: 22px; bottom: 22px; z-index: 2; }
.portrait-chip .rte p { margin: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 10px 18px; border-radius: 4px;
  font-size: .9rem; font-weight: 500; }


/* Grosses Bild im Abschluss: Contao legt eine figure um das Bild */
.cta-bild figure { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
.cta-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  display: block; }

@media (max-width: 980px) {
  .ref-grid-modul { grid-template-columns: repeat(2, 1fr); }
  .ref-kachel.ref-hoch, .ref-kachel.ref-breit { grid-row: auto; grid-column: auto; }
}
@media (max-width: 620px) {
  .ref-grid-modul { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .ref-kachel.ref-gross { grid-column: auto; grid-row: span 2; }
}

/* Hervorgehobenes Wort in Ueberschriften (Vorlage: Bordeaux) */
h2.content-headline b { color: var(--bordeaux); font-weight: 700; }
.section--dark h2.content-headline b, .section--hero h2.content-headline b { color: var(--coral); }

/* ---------- Werte-Zeilen in der Ueber-uns-Sektion: Icon links, Text rechts ---------- */
.wert-zeile { margin-top: 24px; }
.wert-zeile .rte { display: flex; gap: 16px; align-items: flex-start; }
.wert-zeile .rte p.wert-icon { width: 28px; flex: none; text-align: center;
  /* horizontale Flucht: Icon-Oberkante auf die Titelzeile ausrichten */
  margin-top: 13px; }
.wert-zeile .rte p { margin: 0; color: var(--grey); font-size: .95rem; }
.wert-zeile .rte p.wert-icon { color: var(--coral); font-size: 1.5rem; line-height: 1.15; }
.wert-zeile .rte p b { display: block; color: var(--bordeaux); font-size: 1.05rem;
  margin-bottom: 2px; }

/* Gridset clippt Spalten per overflow:hidden; dadurch reissen Schatten an der
   Unterkante ab (z. B. Team-Foto im Ueber-uns-Teaser). Sektionen, die wirklich
   clippen muessen (CTA, Seitenkopf), setzen ihr overflow selbst. */
.ce_cp_grid_start, .ce_cp_column_start { overflow: visible; }

/* ============================================================
   Unterseiten: Seitenkopf, Leistungsbloecke, Kontakt
   ============================================================ */

/* Kopf einer Unterseite: dunkel wie der Hero, aber kompakt */
/* gleiche Sprache wie der Startseiten-Hero: Schwarz mit Grain, Coral-Kante rechts */
.section--seitenkopf { color: #efe7ea; position: relative;
  overflow: hidden; padding: 170px 0 70px;
  background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
.section--seitenkopf::before { content: ""; position: absolute; top: -40%; right: -18%;
  width: 34%; height: 190%; background: var(--coral); transform: rotate(14deg); z-index: 1; }
.section--seitenkopf > * { position: relative; z-index: 2; }
.seitenkopf-titel { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; color: #fff;
  line-height: 1.05; letter-spacing: -.02em; margin: 12px 0 16px; }
.seitenkopf-text .rte p { color: #cdbfc6; font-size: 1.15rem; max-width: 56ch; }

/* Leistungsbloecke: Bild und Text im Wechsel */
.leistung-block .leistung-bild img { width: 100%; height: 340px; object-fit: cover;
  border-radius: 4px; display: block; box-shadow: 0 30px 70px -50px rgba(36,16,23,.6); }
/* Transparente Collagen (motive/*.png): kein Zuschnitt, kein Kastenschatten */
.leistung-bild img[src*="/motive/"] { height: auto; object-fit: contain;
  box-shadow: none; border-radius: 0; }
/* Portraits im 340px-Zuschnitt: Kopf bleibt im Bild */
.leistung-bild img[src*="marco-schreibtisch"] { object-position: center 22%; }
.leistung-inhalt .rte h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700;
  margin-bottom: 14px; }
.leistung-inhalt .rte p { color: var(--grey); margin-bottom: 12px; }
.leistung-inhalt .rte ul { margin: 14px 0 0 20px; color: var(--grey); }
.leistung-inhalt .rte li { margin-bottom: 8px; }
.leistung-block .content-hyperlink { display: inline-block; margin-top: 24px; }
.section--dark .leistung-inhalt .rte p, .section--dark .leistung-inhalt .rte li { color: var(--dgrey); }

/* Ueber uns: Textbloecke und Fertigkeiten */
.lead-text .rte p { font-size: 1.1rem; color: var(--ink); margin-bottom: 12px; }
.section--dark .lead-text .rte p { color: #e2d7dc; }
.skills-block .rte p { color: var(--grey); font-size: .95rem; margin-bottom: 6px; }
.skills-block .rte p strong, .skills-block .rte b { color: var(--ink); }
/* Arbeitsweise ist eine ID, nicht Klasse: heller Fliesstext + klar gesetzte Betonung */
#ueber-arbeitsweise .sec-intro .rte p { color: #d9ccd2; max-width: 70ch; }
#ueber-arbeitsweise .sec-intro .rte p strong { color: #fff; font-weight: 700; }

/* Faehigkeiten als animierte Icon-Chips */
.skills-titel { font-weight: 700; color: var(--ink); margin: 26px 0 14px; }
.section--dark .skills-titel { color: #fff; }
.skills-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 4px;
  border: 1px solid var(--line); background: #fff; font-size: .92rem; font-weight: 500; color: var(--ink);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.skill-chip i, .skill-chip svg { color: var(--coral); font-size: 1.05em; }
.skill-chip:hover { border-color: var(--coral); transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px rgba(244,94,72,.85); }
@media (prefers-reduced-motion: no-preference) {
  .skills-chips .skill-chip { opacity: 0; transform: translateY(12px);
    animation: chipIn .5s cubic-bezier(.2,.7,.3,1) forwards; }
  .skill-chip:nth-child(1){animation-delay:.04s} .skill-chip:nth-child(2){animation-delay:.09s}
  .skill-chip:nth-child(3){animation-delay:.14s} .skill-chip:nth-child(4){animation-delay:.19s}
  .skill-chip:nth-child(5){animation-delay:.24s} .skill-chip:nth-child(6){animation-delay:.29s}
  .skill-chip:nth-child(7){animation-delay:.34s} .skill-chip:nth-child(8){animation-delay:.39s}
}
@keyframes chipIn { to { opacity: 1; transform: none; } }

/* Kontakt: Formular und Daten nebeneinander */
.kontakt-formular .formular { margin-top: 20px; }
.kontakt-formular .widget { margin-bottom: 16px; }
.kontakt-formular label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.kontakt-formular input[type="text"], .kontakt-formular input[type="email"],
.kontakt-formular input[type="tel"], .kontakt-formular textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; background: #fff; }
.kontakt-formular textarea { min-height: 160px; resize: vertical; }
.kontakt-formular input:focus, .kontakt-formular textarea:focus { outline: 2px solid var(--coral);
  outline-offset: 1px; border-color: transparent; }
.kontakt-formular .submit { background: var(--coral); color: #fff; border: 0; padding: 15px 32px;
  border-radius: 4px; font-weight: 700; cursor: pointer; transition: .25s; }
.kontakt-formular .submit:hover { background: var(--bordeaux); }
.kontakt-formular .checkbox_container label { display: inline; font-weight: 400; }
/* Formular als hinterlegte Karte (rechts), Daten links offen */
.kontakt-formular { background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 34px; }
.kontakt-wege a { color: var(--bordeaux); }
.kontakt-wege .bi { margin-right: 6px; }
.kontakt-team { display: flex; gap: 20px; margin-top: 26px; }
.kontakt-team figure { margin: 0; text-align: center; }
.kontakt-team img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  object-position: center 22%; display: block; margin: 0 auto 8px; }
.kontakt-team figcaption { font-size: .88rem; color: var(--grey); }
/* Footer-Ratgeber: kompakte Zeilen mit Pfeil */
#footer .foot-ratgeber li { margin: 0 0 4px; line-height: 1.35; }
#footer .foot-ratgeber .bi { color: var(--coral); margin-right: 2px; }
.kontakt-daten-alt { background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 34px 32px; align-self: start; box-shadow: 0 30px 70px -58px rgba(36,16,23,.45); }
.kontakt-daten .kontakt-block .rte p { margin-bottom: 14px; }
.kontakt-daten .kontakt-block a { color: var(--bordeaux); }
.kontakt-daten .kontakt-portrait img { width: 120px; height: 120px; object-fit: cover;
  border-radius: 50%; margin-top: 10px; }

@media (max-width: 980px) {
  .leistung-block .leistung-bild img { height: 260px; }
  .section--seitenkopf { padding: 150px 0 56px; }
}

/* ============================================================
   Lesetext auf den Ratgeber- und Leistungsseiten
   Ziel: ruhige Spalte, klare Hierarchie, angenehme Zeilenlaenge.
   ============================================================ */
.lesetext > * { max-width: 820px; }
.lesetext .content-headline { margin: 46px 0 14px; }
.lesetext h2.content-headline { font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -.015em; }
.lesetext h3.content-headline { font-size: 1.25rem; margin-top: 34px; }
.lesetext .content-text .rte { font-size: 1.06rem; line-height: 1.75; color: #4a3b41; }
.lesetext .content-text .rte p { margin-bottom: 16px; }
.lesetext .content-text .rte p + p { margin-top: 0; }
.lesetext .rte h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 700; color: var(--ink);
  margin: 46px 0 14px; letter-spacing: -.015em; }
.lesetext .rte h3 { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 32px 0 10px; }
.lesetext .rte h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 24px 0 8px; }
.lesetext .rte ul, .lesetext .rte ol { margin: 14px 0 20px 22px; }
.lesetext .rte li { margin-bottom: 9px; }
.lesetext .rte li::marker { color: var(--coral); }
.lesetext .rte a { color: var(--bordeaux); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lesetext .rte a:hover { color: var(--coral); }
.lesetext .rte strong, .lesetext .rte b { color: var(--ink); }
.lesetext .rte img { border-radius: 4px; margin: 22px 0; }
.lesetext .rte table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .98rem; }
.lesetext .rte th, .lesetext .rte td { text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
.lesetext .rte th { font-weight: 700; color: var(--ink); }
/* Der erste Absatz nach dem Kopf traegt die Einleitung */
.lesetext > .content-text:first-child .rte > p:first-child { font-size: 1.2rem; color: var(--ink);
  line-height: 1.6; }

/* Querverweise am Fuss einer Unterseite */
.verwandte .content-headline { font-size: 1.4rem; margin-bottom: 16px; }
.verwandte-liste .rte ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.verwandte-liste .rte li { margin: 0; }
.verwandte-liste .rte a { display: inline-block; padding: 11px 22px; border-radius: 4px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500;
  text-decoration: none; transition: .2s; }
.verwandte-liste .rte a:hover { border-color: var(--coral); color: var(--coral); }

/* ============================================================
   Ratgeber-/SEO-Seiten: Aufwertung. Zentrierte, ausbalancierte
   Spalte, klare Kapitel mit Akzent, Haekchen-Listen, Lead-Block
   und Querverweis-Karten. Hebt alle Lesetext-Seiten auf einmal.
   ============================================================ */
.lesetext > * { margin-left: auto; margin-right: auto; }
.lesetext .content-headline, .lesetext .rte h2, .lesetext .rte h3, .lesetext .rte h4 { text-align: left; }
/* Kapitel-Akzent: kurzer Markenverlauf-Balken ueber jeder H2 */
.lesetext .rte h2, .lesetext h2.content-headline { padding-top: 22px; }
.lesetext .rte h2::before, .lesetext h2.content-headline::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  background: var(--grad); margin-bottom: 18px; }
/* Einleitung als hervorgehobener Lead */
.lesetext > .content-text:first-child .rte > p:first-child {
  border-left: 3px solid var(--coral); padding-left: 22px; }
/* Aufzaehlungen als Haekchen-Punkte; nummerierte Listen behalten Zahlen */
.lesetext .rte ul { list-style: none; margin-left: 0; padding-left: 0; }
.lesetext .rte ul li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.lesetext .rte ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; color: var(--coral); font-weight: 700; }
/* Querverweise als Karten mit Pfeil statt grauer Pills */
.verwandte-liste .rte ul { gap: 14px; }
.verwandte-liste .rte a {
  padding: 16px 48px 16px 20px; border-radius: 4px; position: relative; min-width: 230px;
  transition: box-shadow .2s, transform .2s, border-color .2s, color .2s; }
.verwandte-liste .rte a::after {
  content: "\2192"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--coral); transition: transform .2s; }
.verwandte-liste .rte a:hover { box-shadow: 0 22px 44px -30px rgba(36,16,23,.5); transform: translateY(-2px); }
.verwandte-liste .rte a:hover::after { transform: translate(4px, -50%); }

/* ---------- Referenz-Detailseite ---------- */
#referenz-detail { padding: 150px 0 90px; }
#referenz-detail .mod_newsreader > .layout_full { max-width: 820px; margin: 0 auto; }
#referenz-detail h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.06; }
#referenz-detail .info { color: var(--grey); font-size: .86rem; margin-top: 10px; }
#referenz-detail .subheadline { display: block; color: var(--coral); font-weight: 700;
  font-size: 1.05rem; margin-top: 6px; }
#referenz-detail figure { margin: 28px 0; border-radius: 4px; overflow: hidden; }
#referenz-detail figure img { width: 100%; height: auto; display: block; }
#referenz-detail .ce_text, #referenz-detail .content-text { margin-top: 24px; }
#referenz-detail h2 { font-size: 1.6rem; margin-bottom: 10px; }
#referenz-detail h3 { font-size: 1.2rem; margin-bottom: 8px; }
#referenz-detail ul { margin: 8px 0 0 20px; }
#referenz-detail li { margin-bottom: 6px; }
#referenz-detail .content-hyperlink { display: inline-block; margin-top: 28px; }
#referenz-detail .btn-coral a { background: var(--coral); color: #fff; }

/* Seiten ohne Hero: Inhalt beginnt unter der Leiste */
body.scrolled #header { position: fixed; }

/* Vorschau der Kundenseite in beiden Ansichten */
#referenz-detail .ref-vorschau { margin-top: 46px; }
#referenz-detail .ref-vorschau h2 { font-size: 1.5rem; margin-bottom: 20px; }
#referenz-detail .ref-geraete { display: grid; grid-template-columns: 1fr 240px; gap: 26px;
  align-items: end; }
#referenz-detail .ref-geraete figure { margin: 0; }
#referenz-detail .ref-geraete figcaption { font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey); margin-top: 10px; }
#referenz-detail .ref-desktop img { width: 100%; height: 360px; object-fit: cover;
  object-position: top center; border-radius: 4px; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.5); display: block; }
#referenz-detail .ref-mobil img { width: 100%; height: 360px; object-fit: cover;
  object-position: top center; border-radius: 4px; border: 6px solid var(--ink);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.6); display: block; }

/* Weitere Projekte als Durchklick */
#referenz-detail .ref-weitere { margin-top: 46px; }
#referenz-detail .ref-weitere h2 { font-size: 1.5rem; margin-bottom: 20px; }
#referenz-detail .ref-weitere-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#referenz-detail .ref-weitere-raster .ref-kachel { min-height: 190px; }
#referenz-detail .ref-weitere-raster .ref-titel { font-size: 1.05rem; }
#referenz-detail .ref-weitere-raster .ref-text { padding: 18px; }

@media (max-width: 700px) {
  #referenz-detail .ref-geraete { grid-template-columns: 1fr; }
  #referenz-detail .ref-mobil img { height: 420px; }
  #referenz-detail .ref-weitere-raster { grid-template-columns: 1fr; }
}

/* Abschluss der Detailseite: Ueberleitung zum Gespraech */
#referenz-detail .ref-abschluss { margin-top: 50px; padding-top: 30px;
  border-top: 1px solid var(--line); }
#referenz-detail .ref-abschluss h2 { font-size: 1.5rem; margin-bottom: 8px; }
#referenz-detail .ref-abschluss p { color: var(--grey); max-width: 52ch; }
#referenz-detail .ref-abschluss-aktionen { margin-top: 20px; display: flex; align-items: center;
  gap: 20px; flex-wrap: wrap; }
#referenz-detail .btn-detail { display: inline-block; background: var(--ink); color: #fff;
  padding: 14px 28px; border-radius: 4px; font-weight: 700; transition: .25s; }
#referenz-detail .btn-detail:hover { background: var(--bordeaux); }
#referenz-detail .ref-abschluss-link { color: var(--bordeaux); font-weight: 500; }

/* ---------- Referenz-Detailseite: Aufbau ---------- */
#referenz-detail .layout_full { max-width: 860px; margin: 0 auto; }
#referenz-detail .ref-kopf .ref-kategorie { display: block; color: var(--coral);
  font-size: .84rem; letter-spacing: .06em; margin-bottom: 10px; }
#referenz-detail .ref-kunde { color: var(--grey); font-weight: 500; margin-top: 8px; }
#referenz-detail .ref-teaser { font-size: 1.15rem; color: var(--ink); margin-top: 16px; max-width: 62ch; }
#referenz-detail .ref-buehne { margin: 34px 0; border-radius: 4px; overflow: hidden; }
#referenz-detail .ref-buehne img { width: 100%; height: auto; display: block; }
#referenz-detail .ref-eckdaten { display: flex; flex-wrap: wrap; gap: 34px;
  padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#referenz-detail .ref-label { display: block; font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
#referenz-detail .ref-wert { font-weight: 500; }
#referenz-detail .ref-wert a { color: var(--bordeaux); }
#referenz-detail .ref-inhalt { margin-top: 30px; }

/* ---------- Bewertungen ---------- */
#bewertungen .bewertung-kennzahl .rte { display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 22px; }
#bewertungen .bewertung-kennzahl p { margin: 0; color: var(--dgrey); font-size: .92rem; }
#bewertungen .bewertung-kennzahl p + p { margin-top: 0; }
#bewertungen .bewertung-kennzahl b { font-size: 3.2rem; font-weight: 700; line-height: 1;
  color: var(--gold); }
#bewertungen .bewertung-kennzahl .sterne { color: var(--gold); font-size: 1.35rem; letter-spacing: 3px; }
/* Sterne je Stimme kommen aus dem Modul, hier nur die Optik */
.bewertungs-liste .info { margin-bottom: 10px; }
.bewertungs-liste .rating .star { color: rgba(255,255,255,.18); font-size: 1rem; }
.bewertungs-liste .rating .star.active { color: var(--gold); }
/* Abschluss-Schaltflaeche der Referenzen mittig wie in der Vorlage.
   Der Artikel traegt "referenzen" als ID, nicht als Klasse. */
#referenzen .content-hyperlink { display: block; text-align: center; margin-top: 34px; }
/* Bewertungen als Slider: wischen auf Touch, Pfeile am Desktop */
.bewertungs-liste { display: flex; gap: 18px; margin-top: 30px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bewertungs-liste::-webkit-scrollbar { display: none; }
.bewertungs-liste > div { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
.bew-nav { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.bew-pfeil { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dline);
  background: none; color: #fff; font-size: 1.1rem; cursor: pointer;
  transition: background .25s, border-color .25s; }
.bew-pfeil:hover { background: var(--coral); border-color: var(--coral); }
.bewertungs-liste > div { border: 1px solid var(--dline); border-radius: 4px;
  padding: 24px; background: rgba(255,255,255,.02); }
.bewertungs-liste > div > div { border: 0; padding: 0; background: none; }
.bewertungs-liste h2, .bewertungs-liste h3, .bewertungs-liste .author { font-size: .92rem;
  color: #fff; font-weight: 700; margin-bottom: 10px; }
.bewertungs-liste p { color: #e2d7dc; font-size: .95rem; margin: 0; }
.bewertungs-liste .rating, .bewertungs-liste .stars { color: var(--gold); margin-bottom: 8px; }

@media (max-width: 980px) { .bewertungs-liste > div { flex: 0 0 85%; } }

/* Kopfbereich auf schmalen Geraeten: die Navigation laeuft als eigene Zeile
   unter dem Logo, sonst legt sie sich beim Umbrechen darueber. */
@media (max-width: 620px) {
  #header .inside { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 18px; }
  #header .content-image { width: 158px; height: 38px; }
  /* das farbige Logo laeuft hier im Fluss, sonst liegt es ueber der Navigation */
  #header .logo-negativ { display: none; }
  #header .logo-farbig { position: relative; left: auto; top: auto; transform: none;
    opacity: 1; margin: 0; }
  #header .mod_navigation { flex: 0 0 100%; }
  #header .mod_navigation ul { justify-content: center; gap: 16px; font-size: .9rem; }
  .section--hero { padding-top: 150px; }
  /* Abschluss mittig, damit Ueberschrift und Person zusammenpassen */
  .cta-person { text-align: center; }
  .cta-bild figure { max-width: 280px; margin: 0 auto; }
  .section--cta .content-hyperlink { display: block; text-align: center; }
}

/* ============================================================
   Feinschliff: Rhythmus, Details, sanftes Einblenden
   ============================================================ */

/* Sichtbarkeit haengt nie an JavaScript: die Klasse setzt erst das Skript,
   und auch dann bleibt der Inhalt sichtbar, er kommt nur weich herein. */
.kann-einblenden .blendet-ein { opacity: .001; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.kann-einblenden .blendet-ein.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kann-einblenden .blendet-ein { opacity: 1; transform: none; transition: none; }
}

/* Ueberschriften bekommen mehr Luft nach oben, Absaetze eine ruhigere Laenge */
.section--white .content-headline, .section--bg .content-headline,
.section--about .content-headline { letter-spacing: -.025em; }
.sec-intro .rte p { max-width: 68ch; }

/* Schaltflaechen: klarer Fokus, ruhigeres Hovern */
.content-hyperlink a { position: relative; }
.btn-coral a:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(244,94,72,.9); }
.btn-dunkel a:hover { transform: translateY(-1px); }
.content-hyperlink a:focus-visible, .ref-chip:focus-visible, .wand-feld:focus-visible,
.ref-kachel:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* Karten heben sich beim Ueberfahren gleichmaessig */
.card-s:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -50px rgba(36,16,23,.55); }

/* Blogkacheln: Bild leicht heranziehen, Titel klarer */
.blog-liste h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.blog-liste .layout_latest:hover figure img { transform: scale(1.04); }
.blog-liste figure img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }

/* Referenzkacheln: Titel etwas ruhiger, Motiv zieht beim Ueberfahren an */
.ref-kachel .ref-motiv img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.ref-kachel:hover .ref-motiv img { transform: scale(1.05); }
.ref-kachel { transition: transform .3s cubic-bezier(.2,.7,.3,1); }

/* Seitenkopf der Unterseiten: mehr Praesenz */
.section--seitenkopf { padding: 190px 0 84px; }
.section--seitenkopf .eyebrow-line { color: var(--coral); }
@media (max-width: 620px) { .section--seitenkopf { padding: 150px 0 54px; } }

/* ---------- Blog-Übersicht: Blätterung unter dem Kachel-Raster ---------- */
/* Contao 5.3 rendert <nav class="pagination"><p>…</p><ul><li>…</li></ul></nav>.
   Flex-Reihe und list-style muss auf das innere <ul>, nicht auf das <nav>. */
.blog-liste .pagination { grid-column: 1 / -1; margin: 44px 0 0; padding: 0; }
.blog-liste .pagination p { display: none; }
.blog-liste .pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 0; padding: 0; }
.blog-liste .pagination li { margin: 0; list-style: none; }
.blog-liste .pagination a, .blog-liste .pagination li.active span, .blog-liste .pagination strong { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink); font-weight: 500; transition: .2s; text-decoration: none; }
.blog-liste .pagination a:hover { border-color: var(--coral); color: var(--coral); }
.blog-liste .pagination li.active span, .blog-liste .pagination strong { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---------- Logo-Link: klickbar auf Unterseiten, auf der Startseite deaktiviert ---------- */
#header .logo-link { position: absolute; left: 32px; top: 0; bottom: 0; width: 260px; z-index: 6; display: block; }
body.scrolled #header .logo-link { width: 200px; }
@media (max-width: 980px) { #header .logo-link { width: 200px; } }
body:has(.section--hero) #header .logo-link { pointer-events: none; }

/* ---------- Formular: Checkbox-Fieldset (z.B. Datenschutz) ohne Rahmen ---------- */
.widget-checkbox fieldset, fieldset.checkbox_container { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

/* ---------- Kontakt als Button in der Hauptnavigation ---------- */
#header nav li.contact a { display: inline-flex; align-items: center; gap: 8px; line-height: 1.15; background: var(--coral); color: #fff; padding: 9px 20px; border-radius: 4px; font-weight: 600; border: 2px solid var(--dark); transition: background .2s, transform .2s; }
/* Telefon-Zeichen vor dem Kontakt-Button (Bootstrap-Icon als Data-URI, weiss) */
#header nav li.contact a::before { content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328z'/%3E%3C/svg%3E") center/contain no-repeat; }
#header nav li.contact a:hover { background: #e04a34; color: #fff; transform: translateY(-1px); }
body.scrolled #header nav li.contact a { color: #fff; }

/* ---------- Footer: Kontaktspalte, prominente Social, Schlussleiste ---------- */
#footer .foot-anschrift { margin-bottom: 14px; color: #c9b8c0; }
#footer .foot-kontakt a { color: #c9b8c0; }
#footer .foot-kontakt a:hover { color: #fff; }
#footer .foot-social { display: flex; gap: 14px; margin-top: 4px; }
#footer .foot-social a { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--dline); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; transition: .2s; }
#footer .foot-social a:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-2px); }
#footer .foot-schluss { border-top: 1px solid rgba(255,255,255,.08); margin-top: 26px; padding-top: 22px; }
#footer .foot-schluss .rte { max-width: none; }
#footer .foot-schluss-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 26px; }
#footer .foot-schluss-in p { margin: 0; font-size: .82rem; color: #6f5c65; }
#footer .foot-recht { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; line-height: 1.4; }
#footer .foot-recht a { color: #8f7a84; font-size: .82rem; }
#footer .foot-recht a:hover { color: #fff; }
@media (max-width: 620px) { #footer .foot-schluss-in { flex-direction: column; align-items: flex-start; } }

/* ---------- FAQ-Akkordeon ---------- */
#faq .eyebrow-block, #faq .content-headline { text-align: center; }
#faq .faq-akkordeon { max-width: 820px; margin: 34px auto 0; }
#faq .faq-item { border: 1px solid var(--line); border-radius: 4px; background: #fff; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; }
#faq .faq-item[open] { border-color: rgba(244,94,72,.45); box-shadow: 0 30px 60px -48px rgba(36,16,23,.5); }
#faq .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font-weight: 600; font-size: 1.08rem; color: var(--ink); }
#faq .faq-item summary::-webkit-details-marker { display: none; }
#faq .faq-item summary::before { content: ""; order: 2; flex: 0 0 auto; width: 14px; height: 14px; background: linear-gradient(var(--coral),var(--coral)) center/14px 2px no-repeat, linear-gradient(var(--coral),var(--coral)) center/2px 14px no-repeat; transition: transform .25s ease; }
#faq .faq-item[open] summary::before { transform: rotate(135deg); }
#faq .faq-item summary:hover { color: var(--bordeaux); }
#faq .faq-antwort { padding: 0 24px 22px; color: var(--grey); line-height: 1.7; }
#faq .faq-antwort p { margin: 0; max-width: 66ch; }
#faq .faq-item summary:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; border-radius: 4px; }
@media (max-width: 620px) { #faq .faq-item summary { padding: 16px 18px; font-size: 1rem; } #faq .faq-antwort { padding: 0 18px 18px; } }

/* ============================================================
   Blog-Detailseite (news_blog_detail)
   ============================================================ */
.blogdetail { padding: 150px 0 90px; }
.blog-detail { max-width: 820px; margin: 0 auto; }

/* Kopf: Meta-Zeile, grosse Headline, Teaser */
/* Wichtig: Das Theme setzt global `header{position:fixed}` (Site-Navigation).
   Der semantische Artikel-<header class="blog-kopf"> erbt das sonst und klebt
   full-bleed oben fest. Hier explizit neutralisieren. */
.blog-detail .blog-kopf { position: static; width: auto; top: auto; left: auto;
  right: auto; z-index: auto; border-bottom: 0; background: none; box-shadow: none; }
.blog-kopf { margin-bottom: 30px; }
.blog-meta { font-family: 'Ubuntu', sans-serif; font-size: .92rem; color: var(--grey);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.blog-meta .blog-punkt { color: var(--coral); }
.blog-titel { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 18px; }
.blog-teaser .rte p, .blog-teaser p { font-size: 1.2rem; line-height: 1.55; color: var(--dgrey, #6b6b6b);
  color: #5a5157; margin: 0; }

/* Lesebild */
.blog-buehne { margin: 0 0 40px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 40px 90px -55px rgba(36,16,23,.5); }
.blog-buehne img { width: 100%; height: auto; display: block; }

/* Inhalt: ruhige Lesetypografie */
.blog-inhalt { font-size: 1.08rem; line-height: 1.72; color: #2f2429; }
.blog-inhalt h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--ink);
  margin: 42px 0 14px; letter-spacing: -.01em; }
.blog-inhalt h3 { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 30px 0 10px; }
.blog-inhalt p { margin: 0 0 18px; }
.blog-inhalt ul, .blog-inhalt ol { margin: 0 0 18px 22px; }
.blog-inhalt li { margin-bottom: 8px; }
.blog-inhalt a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; }
.blog-inhalt img { max-width: 100%; height: auto; border-radius: 4px; }
.blog-inhalt figure { margin: 26px 0; }

/* Verwandte Beitraege */
.blog-weitere { margin: 60px 0 0; padding-top: 40px; border-top: 1px solid var(--line); }
.blog-weitere > h2 { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0 0 22px; }
.blog-weitere-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-w-kachel { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.blog-w-kachel:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(112,33,84,.5); }
.blog-w-motiv { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg); }
.blog-w-motiv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-w-text { padding: 14px 16px 18px; }
.blog-w-datum { display: block; font-family: 'Ubuntu', sans-serif; font-size: .8rem; color: var(--grey); margin-bottom: 6px; }
.blog-w-titel { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* Abschluss / Call-to-Action */
.blog-abschluss { margin: 56px 0 0; padding: 40px; border-radius: 4px;
  background: linear-gradient(135deg, #2a0f1e, var(--dark, #0c0509)); color: #efe7ea; text-align: center; }
.blog-abschluss h2 { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0 0 10px; }
.blog-abschluss p { color: #cdbfc6; margin: 0 0 8px; }
.blog-abschluss-aktionen { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
.btn-detail { display: inline-block; background: var(--coral); color: #fff; font-weight: 600;
  padding: 13px 26px; border-radius: 4px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.btn-detail:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(244,94,72,.9); }
.blog-abschluss-link { display: inline-flex; align-items: center; color: #efe7ea; text-decoration: none;
  font-weight: 500; padding: 13px 8px; opacity: .85; }
.blog-abschluss-link:hover { opacity: 1; }

/* ============================================================
   Cookiebar (oveleon): Box unten mittig statt bildschirm-mittig
   ============================================================ */
.contao-cookiebar.cc-middle { align-items: flex-end; padding-bottom: 26px; }
@media (max-width: 620px) { .contao-cookiebar.cc-middle { padding-bottom: 14px; } }
/* Cookiebar-Buttons an den Marken-Pill-Stil angleichen (nicht eckig) */
.contao-cookiebar button, .contao-cookiebar .cc-btn, .contao-cookiebar input[type="button"],
.contao-cookiebar input[type="submit"] { border-radius: 4px !important; }

@media (max-width: 720px) {
  .blog-weitere-raster { grid-template-columns: 1fr; }
  .blogdetail { padding: 120px 0 70px; }
}

/* ============================================================
   Ratgeber-Detailseiten: kuratierte Sektionen
   ============================================================ */
/* Zentrierte Sektionskoepfe fuer Karten-Abschnitte */
.rg-center .content-headline { text-align: center; }
.rg-lead { max-width: 62ch; margin: 8px auto 0; text-align: center; color: var(--grey);
  font-size: 1.1rem; line-height: 1.6; }

/* CTA-Button im dunklen Seitenkopf: Wrapper als Block, damit er im zentrierten
   1220-Raster fluchtet; nur der Link selbst ist die Pille. */
.section--seitenkopf .content-hyperlink { margin-top: 24px; }

/* Vergleich: zwei Karten */
.rg-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.rg-karte { border-radius: 4px; padding: 32px 30px; border: 1px solid var(--line);
  background: #fff; text-align: left; }
.rg-karte h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 18px; color: var(--ink); }
.rg-karte ul { list-style: none; margin: 0; padding: 0; }
.rg-karte li { position: relative; padding-left: 30px; margin-bottom: 13px; line-height: 1.5; }
.rg-karte li:last-child { margin-bottom: 0; }
.rg-karte li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.rg-neg { background: var(--bg); }
.rg-neg h3 { color: var(--grey); }
.rg-neg li { color: var(--grey); }
.rg-neg li::before { content: "\00d7"; color: #b9576a; font-size: 1.1em; }
.rg-pos { border-color: var(--coral); box-shadow: 0 34px 74px -50px rgba(244,94,72,.75); }
.rg-pos h3 { color: var(--bordeaux); }
.rg-pos li { color: var(--ink); }
.rg-pos li::before { content: "\2713"; color: #1f9d55; }

/* Checkliste: Icon-Karten */
.rg-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px;
  text-align: left; }
.rg-check { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px 26px;
  transition: transform .25s, box-shadow .25s; }
.rg-check:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(112,33,84,.4); }
.rg-check .rg-ico { display: inline-flex; width: 54px; height: 54px; align-items: center;
  justify-content: center; border-radius: 4px; background: rgba(244,94,72,.1);
  color: var(--coral); font-size: 1.55rem; margin-bottom: 18px; }
.rg-check h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 7px; color: var(--ink); }
.rg-check p { margin: 0; color: var(--grey); font-size: .98rem; line-height: 1.55; }

/* Mini-Homepage-Pakete */
.mini-pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px;
  text-align: left; }
.mini-paket { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 30px;
  transition: transform .25s, box-shadow .25s; }
.mini-paket:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(112,33,84,.35); }
.mini-paket-mitte { border-color: var(--coral); border-width: 2px; }
.mini-paket h3 { font-size: 1.2rem; margin: 0 0 10px; }
.mini-paket .mini-preis { font-size: 2rem; font-weight: 700; color: var(--bordeaux); margin: 0 0 16px; }
.mini-paket .mini-preis span { font-size: .95rem; font-weight: 400; color: var(--grey); }
.mini-paket ul { margin: 0; padding-left: 20px; color: var(--grey); }
.mini-paket li { margin-bottom: 6px; }
@media (max-width: 960px) { .mini-pakete { grid-template-columns: 1fr; } }

/* Detaillierte Vergleichstabelle (z. B. Contao vs. WordPress) */
.rg-tabelle-wrap { overflow-x: auto; margin-top: 34px; -webkit-overflow-scrolling: touch; }
.rg-tabelle { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left;
  font-size: .97rem; }
.rg-tabelle th { background: var(--ink); color: #fff; padding: 14px 18px; font-weight: 700; }
.rg-tabelle th:first-child { border-radius: 4px 0 0 0; }
.rg-tabelle th:last-child { border-radius: 0 4px 0 0; }
.rg-tabelle td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rg-tabelle tbody tr:nth-child(even) { background: var(--bg); }
.rg-tabelle .rg-krit { font-weight: 700; color: var(--ink); }
.rg-tabelle .rg-pro .bi { color: #2e9e44; margin-right: 6px; }
.rg-tabelle .rg-contra { color: var(--grey); }
.rg-tabelle .rg-contra .bi { color: var(--bordeaux); margin-right: 6px; }

/* Ablauf: nummerierte Schritte */
.rg-prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 34px;
  text-align: left; }
.rg-schritt { position: relative; }
.rg-schritt .rg-num { display: block; font-family: 'Ubuntu', sans-serif; font-weight: 700;
  font-size: 2.6rem; line-height: 1; margin-bottom: 14px; color: var(--coral); }
.rg-schritt h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 7px; color: var(--ink); }
.rg-schritt p { margin: 0; color: var(--grey); font-size: .98rem; line-height: 1.55; }

/* Spezialist-Portrait: hoeherer Ausschnitt, Gesicht im Fokus (Hochformat 2:3) */
.leistung-bild .rg-portrait img { height: 470px; object-position: center 20%; }
@media (max-width: 960px) { .leistung-bild .rg-portrait img { height: 380px; } }

/* Interne Verlinkung: Stadt-Chips */
.rg-orte { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 960px;
  margin: 30px auto 0; }
.rg-ort { padding: 8px 15px; border: 1px solid var(--line); border-radius: 4px; font-size: .9rem;
  color: var(--ink); text-decoration: none; background: #fff; transition: border-color .18s, color .18s, transform .18s; }
.rg-ort:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-2px); }

/* SEO/GEO-FAQ als Akkordeon */
.rg-faq { max-width: 760px; margin: 32px auto 0; text-align: left; }
.rg-faq-item { border: 1px solid var(--line); border-radius: 4px; background: #fff; margin-bottom: 12px; }
.rg-faq-item summary { cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 600; color: var(--ink);
  list-style: none; position: relative; }
.rg-faq-item summary::-webkit-details-marker { display: none; }
.rg-faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; line-height: 1; color: var(--coral); font-weight: 400; }
.rg-faq-item[open] summary::after { content: "\2212"; }
.rg-faq-a { padding: 0 22px 20px; color: var(--grey); line-height: 1.65; }
.rg-faq-a p { margin: 0; }

/* Vertrauens-Chips im Spezialist-Block */
.rg-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 2px; padding: 0; list-style: none; }
.rg-trust li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px;
  border: 1px solid var(--line); border-radius: 4px; font-size: .92rem; color: var(--ink); background: #fff; }
.rg-trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

@media (max-width: 860px) {
  .rg-checks { grid-template-columns: 1fr 1fr; }
  .rg-prozess { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .rg-vergleich { grid-template-columns: 1fr; }
  .rg-checks { grid-template-columns: 1fr; }
  .rg-prozess { grid-template-columns: 1fr; }
}

/* ---------- Passende Projekte auf Leistungs-Unterseiten ---------- */
/* Dynamisches Referenz-Modul auf Leistungsseiten: drei gleich grosse Kacheln,
   ref-filter.js blendet ueber data-projekt-filter die passende Kategorie ein */
/* margin auto: die Auto-Zentrierung der Artikel-Kinder darf nicht verloren gehen */
.leistung-projekte-modul { margin: 6px auto 28px; }
.leistung-projekte-modul .mod_newslist { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; }
.leistung-projekte-modul .ref-kachel { min-height: 230px;
  grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 900px) { .leistung-projekte-modul .mod_newslist { grid-template-columns: 1fr; } }

/* ---------- Leistungen-Dropdown (Submenu-Flyout) ---------- */
/* Contao-Klasse .block setzt global overflow:hidden und wuerde das Flyout
   abschneiden: fuer die Kopf-Navigation aufheben. */
#header .mod_navigation { overflow: visible; }
#header .mod_navigation li.submenu { position: relative; }
/* Unsichtbare Bruecke: haelt den Hover zwischen Menuepunkt und Panel */
#header .mod_navigation li.submenu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
/* kleiner Pfeil am Elternpunkt */
#header .mod_navigation li.submenu > a::after { content: "\203A"; display: inline-block; margin-left: 7px;
  transform: rotate(90deg); font-size: .8em; opacity: .55; }
/* Flyout-Panel: immer helle Karte, in beiden Header-Zustaenden lesbar */
#header .mod_navigation ul.level_2 { position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(6px); display: flex; flex-direction: column; gap: 2px;
  min-width: 232px; padding: 10px; margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; box-shadow: 0 26px 60px -28px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 80; }
#header .mod_navigation li.submenu:hover > ul.level_2,
#header .mod_navigation li.submenu:focus-within > ul.level_2 { opacity: 1; visibility: visible;
  pointer-events: auto; transform: translateX(-50%) translateY(0); }
#header .mod_navigation ul.level_2 li { width: 100%; }
#header .mod_navigation ul.level_2 a, #header .mod_navigation ul.level_2 strong { display: block;
  padding: 9px 14px; border-radius: 4px; white-space: nowrap; color: var(--ink); font-weight: 500; font-size: .95rem; }
#header .mod_navigation ul.level_2 a:hover { background: var(--bg); color: var(--bordeaux); }
#header .mod_navigation ul.level_2 strong { color: var(--bordeaux); background: var(--bg); }
/* auch im gescrollten (hellen) Header bleibt das Panel dunkel-auf-hell */
body.scrolled #header .mod_navigation ul.level_2 a { color: var(--ink); }

/* Mobile: Navigation liegt hinter dem Burger-Menue (nav.js). Im offenen
   Panel sind die Leistungs-Unterpunkte eingerueckt sichtbar. */
@media (max-width: 980px) {
  #header .mod_navigation ul.level_2 { display: none; }
  body.nav-offen #header .mod_navigation ul.level_2 { display: block; }
  #header .mod_navigation li.submenu > a::after { display: none; }
}

/* ---------- Hero Variante 02: schwarz, Grain, scharfe Coral-Kante ---------- */
/* Grund und Coral-Kante laufen hinter der Video-Buehne weiter (Pseudo-Elemente
   verlaengert, overflow sichtbar); der Ticker darunter schneidet beides ab. */
/* padding-bottom und video-padding-top gleich gross: die Banderole dazwischen
   sitzt mittig zwischen Hero-Buttons und Video */
.section--hero.hero-v2 { position: relative; overflow: visible; background: none;
  padding: 200px 0 70px; text-align: left; }
.section--hero.hero-v2::before { content: ""; position: absolute; inset: 0; z-index: 0;
  bottom: -1400px; background-color: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
/* z2: liegt ueber der Banderole (z1), damit die Logos hinter der Coral-Flaeche
   starten; Video/Vorteile (z2, spaeter im DOM) decken sie weiterhin ab */
.section--hero.hero-v2::after { content: ""; position: absolute; top: -22%; right: -15%;
  width: 42%; height: 290%; background: var(--coral); transform: rotate(14deg); z-index: 2; }
.hero-v2 > * { position: relative; z-index: 3; }
.hero-v2 .hero-titel { font-size: clamp(2.4rem, 4.6vw, 4.4rem); color: #fff; line-height: 1.05;
  letter-spacing: -.02em; font-weight: 700; }
/* Schlusszeile bewusst leichter als die Hauptzeilen */
.hero-v2 .hero-titel .titel-leicht { font-weight: 300; }
.hero-v2 .eyebrow-line { color: var(--gold); }
.hero-v2 .hero-text .rte p, .hero-v2 .sub { color: #e8dde2; max-width: 54ch; font-size: 1.15rem; }
/* Buttons auf der Fluchtlinie der zentrierten Textbloecke; das globale
   Artikel-Kind-Padding (32px) wuerde den Button aus der Flucht schieben */
.hero-v2 .content-hyperlink { display: inline-block; margin: 26px 14px 0 0; padding: 0; }
.hero-v2 .hero-text + .content-hyperlink { margin-left: max(32px, calc((100% - 1220px) / 2 + 32px)); }
.btn-eckig a { border-radius: 0 !important; }
.hero-v2 .btn-outline a { border: 1.5px solid rgba(255,255,255,.5); color: #fff; padding: 15px 30px;
  display: inline-block; font-weight: 700; }
.hero-v2 .btn-outline a:hover { border-color: var(--coral); }
@media (max-width: 980px) { .section--hero.hero-v2 { padding: 150px 0 80px; }
  .section--hero.hero-v2::after { width: 60%; right: -30%; }
  /* schmale Viewports: Artikel-Kinder haben 18px Padding, Flucht angleichen */
  .hero-v2 .hero-text + .content-hyperlink { margin-left: 18px; } }

/* Video-Buehne: zentral, gross, direkt nach dem Hero. Grund liefert der Hero,
   damit die Coral-Kante dahinter durchlaeuft; schwarze Outline grenzt das Video ab. */
.section--video { background: none; position: relative; z-index: 2; padding: 70px 0 100px; }
.section--video .video-rahmen { max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9;
  overflow: hidden; border: 3px solid var(--dark); box-shadow: 0 60px 120px -60px rgba(0,0,0,.8);
  /* das globale Artikel-Kind-Padding wuerde 32px Luft zwischen Video und Kontur lassen */
  padding: 0; }
.section--video .video-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1040px) { .section--video .video-rahmen { margin: 0 24px; } }

/* "Warum mit uns arbeiten" direkt unter dem Video: Grund liefert der Hero,
   damit die Coral-Kante bis zum Ticker durchlaufen kann. */
/* Eigener dunkler Grund: laesst den Hero-Grund nahtlos weiterlaufen, deckt aber
   die Coral-Kante ab, damit sie nicht in die Textspalten laeuft */
#vorteile { position: relative; z-index: 2;
  background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
#vorteile .content-headline { color: #fff; margin-bottom: 14px; }
/* Intro-Satz vor den sechs Punkten, bewusst ueber die gesamte Breite;
   danach eine Leerzeile Abstand zu den Aufzaehlungen */
.vorteile-intro .rte p { color: #cdbfc6; font-size: 1.12rem; margin: 0 0 40px; }
/* Auslaufender Trennstrich zum Sektionsende (gleiche Sprache wie im CTA) */
#vorteile::after { content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); width: min(1156px, calc(100% - 64px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
/* Helle Folge-Sektion deckt den fixen Ueberlauf des Hero-Grunds (-1400px) ab;
   bewusst im dezenten hellen Grau, "Alles aus einer Hand" darunter bleibt weiss */
#onlinepartner { position: relative; z-index: 2; background: var(--bg); }

/* Bildbuehne: breites Projekt-Motiv als Zwischenakt */
.section--buehne { padding: 0; background: var(--bg); }
.section--buehne .buehne-bild img { width: 100%; height: auto; display: block; }

/* Onlinepartner-Headline ohne Farbakzent (Farbkacheln darunter reichen) */
#onlinepartner .content-headline b { color: inherit; }

/* Typewriter-Caret der CTA-Headline */
/* Caret absolut: nimmt keinen Platz im Textfluss ein, dadurch kein Ruecksprung
   der zentrierten Headline, wenn es am Ende verschwindet */
.section--cta .content-headline.tippt::after { content: ""; position: absolute;
  width: .08em; height: .82em; background: var(--coral); margin-left: .08em;
  animation: caret-blink .8s step-end infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- Split-Optik: Portraet laeuft randlos ueber die volle Sektionshoehe.
   Arbeitsweise (Bild rechts) und Startseiten-Teaser (Bild links). Unterhalb der
   Grid-Umbruchbreite bleibt der normale Fluss erhalten. ---------- */
@media (min-width: 981px) {
  #ueber-arbeitsweise, #ueber { position: relative; overflow: hidden; }
  #ueber-arbeitsweise .portrait, #ueber .portrait { position: static; background: none;
    aspect-ratio: auto; box-shadow: none; overflow: visible; }
  #ueber-arbeitsweise .portrait .content-image, #ueber .portrait .content-image {
    position: absolute; top: 0; bottom: 0; width: 44%; margin: 0;
    aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  #ueber-arbeitsweise .portrait .content-image { right: 0; }
  #ueber .portrait .content-image { left: 0; }
  #ueber-arbeitsweise .portrait figure, #ueber .portrait figure { height: 100%; margin: 0; }
  #ueber-arbeitsweise .portrait img, #ueber .portrait img { width: 100%; height: 100%;
    object-fit: cover; object-position: center 25%; }
  /* Luft zwischen randlosem Bild und Textspalte */
  #ueber .grid_start > .ce_cp_column_start:last-child { padding-left: 56px; }
  #ueber-arbeitsweise .grid_start > .ce_cp_column_start:first-child { padding-right: 56px; }
}

/* ---------- Referenzschreiben: zwei getrennte Karten nebeneinander ---------- */
#referenzschreiben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px; padding: 90px max(32px, calc((100% - 1220px) / 2)); }
#referenzschreiben > * { grid-column: 1 / -1; max-width: none; margin: 0; padding: 0; }
#referenzschreiben > :has(.schreiben-zitat) { grid-column: auto; }
#referenzschreiben .content-headline { margin-bottom: 18px; }
.schreiben-zitat { background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 28px 30px; height: 100%; text-align: left; }
.schreiben-zitat p { margin: 0; color: var(--dgrey); }
.schreiben-zitat .schreiben-quelle { color: var(--grey); font-size: .9rem; margin-top: 16px; }
.schreiben-zitat a { color: var(--coral); font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { #referenzschreiben { grid-template-columns: 1fr; } }

/* Über uns: Logo-Leiste der besuchten Konferenzen/Workshops */
.knowhow-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 36px;
  align-items: center; max-width: 1020px; margin: 34px auto 0; }
.knowhow-logos img { width: 100%; height: auto; filter: grayscale(1); opacity: .82;
  transition: filter .25s, opacity .25s; }
.knowhow-logos img:hover { filter: none; opacity: 1; }
@media (max-width: 980px) { .knowhow-logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .knowhow-logos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Leistungs-Kacheln: vollflaechig auf die Unterseite verlinkt */
.card-s .kachel-link { position: absolute; inset: 0; z-index: 2; }

/* Erstberatung: die vier Kern-Dienstleistungsbereiche als Karten-Grid */
.bereich-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; margin-top: 34px; }
.bereich-karte { display: block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 34px; color: inherit; text-decoration: none;
  transition: transform .3s, box-shadow .3s; }
.bereich-karte:hover { transform: translateY(-4px);
  box-shadow: 0 30px 60px -42px rgba(112,33,84,.5); }
.bereich-ico { display: inline-block; color: var(--coral); font-size: 1.9rem; line-height: 1; }
.bereich-karte h3 { margin: 12px 0 8px; font-size: 1.35rem; }
.bereich-karte p { color: var(--grey); margin: 0 0 12px; }
.bereich-karte ul { margin: 0 0 18px 18px; color: var(--grey); font-size: .95rem; }
.bereich-karte ul li { margin-bottom: 4px; }
.bereich-mehr { color: var(--coral); font-weight: 700; }
@media (max-width: 760px) { .bereich-karten { grid-template-columns: 1fr; gap: 18px; } }

/* ============================================================
   Mobil-Feinschliff (Marcos Review 09.08.)
   ============================================================ */

/* Mobiles Burger-Menue: Knopf kommt aus nav.js */
.nav-burger { display: none; }
@media (max-width: 980px) {
  .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px 8px; background: none; border: 0; cursor: pointer;
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 5; }
  .nav-burger span { display: block; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .25s, opacity .25s; }
  body.nav-offen .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-offen .nav-burger span:nth-child(2) { opacity: 0; }
  body.nav-offen .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #header .mod_navigation { display: none; }
  body.nav-offen #header .mod_navigation { display: block; position: absolute; left: 0; right: 0;
    top: 100%; background: rgba(12,5,9,.97); backdrop-filter: blur(10px);
    padding: 14px 28px 26px; border-bottom: 1px solid var(--dline); }
  body.nav-offen #header .mod_navigation ul { flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0; }
  body.nav-offen #header .mod_navigation ul.level_1 > li > a,
  body.nav-offen #header .mod_navigation ul.level_1 > li > strong { display: block;
    padding: 12px 0; font-size: 1.05rem; color: #fff; }
  body.nav-offen #header .mod_navigation ul.level_2 { position: static; opacity: 1;
    visibility: visible; transform: none; background: none; box-shadow: none;
    padding: 0 0 8px 16px; min-width: 0; }
  body.nav-offen #header .mod_navigation ul.level_2 a { color: #d9c7cf; padding: 8px 0; background: none; }
}

/* Mobil traegt der Kopf immer dunklen Grund: Logo in der Weissvariante */
@media (max-width: 620px) {
  #header .logo-negativ { display: block; position: relative; left: auto; top: auto;
    transform: none; opacity: 1; margin: 0; }
  #header .logo-farbig { display: none; }
}

/* Logo-Wand ("Fest verwurzelt in der Region") mobil zweispaltig */
@media (max-width: 620px) {
  .wand-grid .grid_start { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Abschluss-CTA: die Coral-Ecke mobil klein in die Ecke statt ueber die Sektion */
@media (max-width: 620px) {
  .section--cta::before { right: -22%; bottom: -6%; width: 58%; height: 24%;
    transform: rotate(-14deg); }
}

/* Contao-vs-WordPress: Funktions-Karten im Wissensteil */
.contao-funktionen-titel { margin-top: 46px; }
.leistung-inhalt .contao-funktionen { margin: 30px 0 40px; }
.contao-funktionen .rg-check { text-align: left; }

/* Mobil: Logo gross starten und beim Scrollen verkleinern (wie Desktop) */
@media (max-width: 620px) {
  #header .content-image { width: 216px; height: 52px; }
  body.scrolled #header .content-image { width: 150px; height: 36px; }
}

/* Mobiles Panel: Kontakt-Button eingerueckt mit Icon, darunter Telefon/E-Mail */
.nav-kontaktwege { display: none; }
@media (max-width: 980px) {
  body.nav-offen #header .mod_navigation ul.level_1 > li.contact { margin: 14px 6px 4px; }
  body.nav-offen #header .mod_navigation ul.level_1 > li.contact > a { display: inline-flex;
    align-items: center; gap: 8px; padding: 12px 22px; }
  body.nav-offen #header .mod_navigation ul.level_1 > li.contact > a::before { display: inline-block; }
  body.nav-offen .nav-kontaktwege { display: flex; flex-direction: column; gap: 2px;
    margin: 12px 6px 0; padding-top: 14px; border-top: 1px solid var(--dline); }
  body.nav-offen .nav-kontaktwege a { color: #d9c7cf; padding: 9px 0; font-size: 1rem;
    text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
  body.nav-offen .nav-kontaktwege a .bi { color: var(--coral); font-size: 1.1rem; }
}

/* Blog-Detail: "Alle Beiträge ansehen" unter den Weitere-Kacheln, nicht in der Box */
.blog-weitere .blog-alle-link { margin: 22px 0 0; }
.blog-weitere .blog-abschluss-link { color: var(--coral); font-weight: 700; text-decoration: none; }
.blog-weitere .blog-abschluss-link:hover { text-decoration: underline; }

/* Kundenlogos-Ticker auf Ratgeber- und Stadtseiten */
.kunden-ticker h2 { margin-bottom: 18px; }
.kunden-ticker-link { margin: 18px 0 0; text-align: center; }
.kunden-ticker-link a { color: var(--coral); font-weight: 700; text-decoration: none; }
.kunden-ticker-link a:hover { text-decoration: underline; }

/* Mini-Homepage: Feature-Galerie (12 Screenshots der bestehenden Seite) */
.mini-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; text-align: left; }
.mini-feature { margin: 0; background: #fff; border: 1px solid var(--dline); border-radius: 8px; overflow: hidden; }
.mini-feature img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: center top; }
.mini-feature figcaption { padding: 14px 16px 18px; }
.mini-feature figcaption strong { display: block; margin-bottom: 6px; }
.mini-feature figcaption span { color: var(--dgrey); font-size: .93rem; line-height: 1.5; }
@media (max-width: 980px) { .mini-galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mini-galerie { grid-template-columns: 1fr; } }

/* Schaubilder: Inline-SVG-Infografiken im CI (Neubau der Live-Grafiken) */
.schaubild { margin: 40px auto 0; max-width: 860px; }
.schaubild svg { width: 100%; height: auto; display: block; }
.schaubild-bereiche { max-width: 1000px; margin: 26px auto 10px; }
.schaubild-sektion .schaubild { margin-top: 0; }

/* Rechtstexte (Impressum/Datenschutz): Typografie entzerren */
.ce_er24_legal_text { max-width: 900px; margin: 0 auto; padding: 34px 32px 90px; line-height: 1.7; }
.ce_er24_legal_text h1 { margin: .4em 0 1em; }
.ce_er24_legal_text h2 { margin: 1.9em 0 .55em; font-size: 1.5rem; line-height: 1.25; }
.ce_er24_legal_text h3 { margin: 1.5em 0 .45em; font-size: 1.2rem; line-height: 1.3; }
.ce_er24_legal_text h4 { margin: 1.3em 0 .4em; }
.ce_er24_legal_text p, .ce_er24_legal_text ul, .ce_er24_legal_text ol { margin: 0 0 1em; }
.ce_er24_legal_text ul, .ce_er24_legal_text ol { padding-left: 1.3em; }

/* Wissens-Sektionen: gestalteter Lesetext statt Textwüste */
.wissen-design h2 { font-size: 1.8rem; margin: 0 0 .55em; }
.wissen-design h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
.wissen-design p { margin: 0 0 1em; }
.wissen-design ul, .wissen-design ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.wissen-design li { margin-bottom: .5em; }
.wissen-design li::marker { color: var(--coral); }
.wissen-lead { max-width: 880px; }
.wissen-lead p:first-of-type { font-size: 1.15rem; line-height: 1.65; }
.wissen-abschnitt { margin-top: 46px; max-width: 880px; }
.wissen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 46px; align-items: stretch; }
.wissen-karte { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 30px; }
.wissen-karte h2 { font-size: 1.22rem; margin: 0 0 .6em; position: relative; padding-left: 16px; }
.wissen-karte h2::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; border-radius: 2px; background: var(--grad); }
.wissen-karte > *:last-child { margin-bottom: 0; }
@media (min-width: 1100px) {
  .wissen-spalten { max-width: none; column-count: 2; column-gap: 60px; }
  .wissen-spalten h2 { column-span: all; margin-bottom: .8em; }
  .wissen-spalten h3 { break-after: avoid; }
  .wissen-spalten li { break-inside: avoid; }
}
.wissen-bilder { display: grid; gap: 26px; margin: 48px 0 6px; }
.wissen-bilder .wissen-bild { margin: 0; }
.wissen-bilder img { width: 100%; height: 340px; object-fit: cover; border-radius: 12px; display: block; }
.wissen-bilder-duo { grid-template-columns: 1fr 1fr; }
.wissen-bilder-duo img { height: 280px; }
.wissen-design .bereich-karten { margin-bottom: 52px; }
.wissen-design .rg-tabelle-wrap { margin: 34px 0; }
@media (max-width: 980px) {
  .wissen-grid, .wissen-bilder-duo { grid-template-columns: 1fr; }
  .wissen-bilder img { height: 220px; }
}

/* Kopf-Grafik im dunklen Seitenkopf (z. B. Contao-Logo) */
.section--seitenkopf { position: relative; }
.section--seitenkopf .kopf-grafik { position: absolute; right: 17%; top: 50%; transform: translateY(-50%); width: 380px; opacity: .96; }
@media (max-width: 1200px) { .section--seitenkopf .kopf-grafik { display: none; } }

/* Contao-Grafik (weiße Beschriftung) im hellen Intro auf dunklem Panel */
#contao-wordpressintro .leistung-bild img { background: var(--panel); padding: 48px 36px; border-radius: 14px; object-fit: contain; height: auto; width: 100%; }

/* QA-Feinschliff: Witwen vermeiden, Koepfe nicht anschneiden */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.wissen-zwischentitel h3 { font-size: 1.45rem; margin: 0; }
.wissen-zwischentitel h2 { font-size: 1.7rem; margin: 0; }
.leistung-block img[src*="marco-portrait-business"] { object-position: center 14%; }
.wissen-bilder img[src*="marco-"], .wissen-bilder img[src*="julia"] { object-position: center 16%; }

/* Mobil: Hero-Titel klein genug, damit ONLINEMARKETING nicht anschneidet */
@media (max-width: 480px) { .hero-titel, .hero-v2 .hero-titel { font-size: 1.7rem; } }

/* Referenz-Detail: Blättern-Navigation */
.ref-blaettern { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 0 30px; font-weight: 700; }
.ref-blaettern + .ref-blaettern, .ref-weitere + .ref-blaettern { margin: 38px 0 10px; }
.ref-blaettern a { color: var(--coral); }
.ref-blaettern a:hover { text-decoration: underline; }
.ref-blaettern a[href="/referenzen"] { color: var(--bordeaux); }

/* Startseiten-Referenzfilter: Chips sind dort Links zur Referenzseite */
a.ref-chip { text-decoration: none; display: inline-block; }

/* ALTCHA-Honeypot generisch verstecken: Beim AJAX-Rerender des Formulars kommt ein
   neuer Zufallsname, der injizierte Head-Style passt dann nicht mehr und das Feld
   stand sichtbar unter der Nachricht. Selektor greift unabhängig vom Namen. */
form .widget > input[type="text"][tabindex="-1"][aria-hidden="true"] { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
form .widget:has(> input[type="text"][tabindex="-1"][aria-hidden="true"]) { position: absolute; left: -9999px; width: 0; height: 0; margin: 0; overflow: hidden; opacity: 0; }

/* Kontakt-Erfolgsseite: zentrierte Danke-Sektion (kontakterfolg ist die Artikel-ID) */
#kontakterfolg { text-align: center; }
#kontakterfolg .erfolg-zeichen p { display: inline-flex; width: 74px; height: 74px; align-items: center;
  justify-content: center; border-radius: 50%; background: rgba(244,94,72,.1);
  color: var(--coral); font-size: 2.2rem; margin: 0 0 8px; }
#kontakterfolg .erfolg-text { max-width: 620px; margin: 0 auto; }
#kontakterfolg .erfolg-text a { color: var(--coral); }
#kontakterfolg .content-hyperlink { margin-top: 22px; }

/* Social-Feed: Instagram-Kacheln auf der Startseite */
.mod_newslist.insta-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.insta-feed .insta-kachel a { display: block; text-decoration: none; color: inherit; }
.insta-feed .insta-kachel figure { margin: 0 0 10px; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.insta-feed .insta-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.insta-feed .insta-kachel a:hover img { transform: scale(1.04); }
.insta-feed .insta-text { display: block; font-size: .85rem; line-height: 1.45; color: var(--grey); }
.insta-feed .insta-kachel time { font-size: .75rem; color: var(--grey); opacity: .7; }
@media (max-width: 900px) { .mod_newslist.insta-feed { grid-template-columns: repeat(2, 1fr); } }