:root {
  --ink:#073d4c;
  --petrol:#00516a;
  --orange:#dc8615;
  --paper:#f5f5ef;
  --muted:#607578;
  --line:#d6dfdb
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  background:var(--paper)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}
.draft {
  padding:9px 5%;
  background:var(--ink);
  color:#dbe6df;
  font-size:10px;
  letter-spacing:1.7px;
  display:flex;
  justify-content:space-between
}
header {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 5%;
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.brand img {
  width:190px;
  height:78px;
  object-fit:contain
}
nav {
  display:flex;
  gap:33px;
  align-items:center;
  font-size:13px;
  font-weight:600
}
.nav-cta {
  border:1px solid #789493;
  padding:16px 20px
}
.menu {
  display:none
}
.hero {
  min-height:690px;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden
}
.hero-copy {
  padding:76px 0 80px 10%;
  z-index:2
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:bold;
  line-height:1.6
}
.eyebrow>span {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin-right:8px
}
h1 {
  font-size:clamp(46px,4.65vw,78px);
  letter-spacing:-3.5px;
  line-height:1.06;
  margin:29px 0 26px;
  font-weight:500;
  position:relative;
  width:116%
}
em {
  font-family:Georgia,serif;
  font-weight:normal
}
h1 em {
  color:var(--petrol)
}
.intro {
  font-size:17px;
  line-height:1.75;
  max-width:460px;
  color:#506b70
}
.actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  justify-content:space-between;
  gap:28px;
  padding:19px 23px;
  font-size:13px;
  font-weight:600;
  border:0
}
.orange {
  background:var(--orange);
  color:#142f32
}
.button:hover {
  filter:brightness(1.07)
}
.text-link {
  font-size:12px;
  border-bottom:1px solid #87a09c;
  padding-bottom:7px
}
.hero-bottom {
  display:flex;
  gap:20px;
  font-size:8px;
  letter-spacing:1.1px;
  margin-top:60px
}
.terrain-scene {
  position:relative;
  min-width:0;
  background:radial-gradient(ellipse at 50% 50%,#dbe5de 0,#e8ece4 55%,#f5f5ef 80%);
  overflow:hidden
}
.terrain-scene canvas {
  position:absolute;
  width:100%;
  height:100%
}
.scene-top {
  position:absolute;
  top:36px;
  left:35px;
  right:35px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  letter-spacing:1.4px
}
.scene-top>span:last-child {
  margin-left:auto
}
.live-dot {
  width:6px;
  height:6px;
  background:var(--orange);
  border-radius:50%
}
.scene-cross {
  position:absolute;
  right:40px;
  top:95px;
  font-size:25px;
  font-weight:200
}
.scene-label {
  position:absolute;
  bottom:92px;
  left:46px;
  font-size:11px;
  letter-spacing:2px;
  line-height:1.6
}
.scene-label strong {
  font-size:22px;
  letter-spacing:-.5px
}
.scene-label small {
  display:block;
  font-size:9px;
  letter-spacing:0;
  margin-top:10px
}
.coordinates {
  position:absolute;
  right:36px;
  bottom:33px;
  font-size:10px;
  line-height:1.8;
  text-align:right
}
.coordinates span {
  font-size:7px;
  letter-spacing:1px
}
.scroll {
  position:absolute;
  bottom:25px;
  left:5%;
  font-size:8px;
  letter-spacing:1.7px
}
.scroll span {
  margin-left:40px;
  font-size:19px
}
.section {
  padding:85px 7%
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:42px;
  gap:20px
}
.section-head>span {
  font-size:12px
}
.note {
  color:var(--muted);
  font-size:11px!important
}
.focus {
  background:#fff
}
.focus-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%
}
.contour-art {
  position:relative;
  min-height:510px;
  background:#0e4d5c;
  overflow:hidden;
  color:white
}
.contours {
  position:absolute;
  inset:-30%;
  background:repeating-radial-gradient(ellipse at 60% 50%,transparent 0 18px,#79a9a04a 19px 20px,transparent 21px 33px);
  transform:rotate(-28deg) scaleY(.65)
}
.contours:after {
  content:'';
  position:absolute;
  width:260px;
  height:170px;
  border:1px solid #e7a94c;
  top:40%;
  left:30%;
  transform:rotate(20deg);
  background:#de8c1520
}
.art-tag {
  position:absolute;
  top:28px;
  left:28px;
  font-size:9px;
  letter-spacing:1.6px
}
.art-caption {
  position:absolute;
  left:35px;
  bottom:45px;
  font-size:43px;
  line-height:1.1;
  letter-spacing:-1.6px
}
.art-axis {
  position:absolute;
  right:25px;
  bottom:30px;
  font-size:8px;
  line-height:2;
  letter-spacing:1px
}
h2 {
  font-size:clamp(33px,3.5vw,54px);
  line-height:1.08;
  letter-spacing:-2px;
  font-weight:500;
  margin:20px 0 26px
}
.focus-copy>p:not(.eyebrow),.about p,.contact p {
  color:var(--muted);
  font-size:15px;
  line-height:1.8
}
.benefit {
  display:flex;
  gap:22px;
  border-top:1px solid var(--line);
  padding:17px 0
}
.benefit>span {
  font-size:10px;
  color:var(--orange);
  margin-top:3px
}
h3 {
  font-weight:500;
  margin:0 0 9px
}
.benefit h3 {
  font-size:15px
}
.benefit p {
  font-size:12px;
  line-height:1.6;
  margin:0;
  color:var(--muted)
}
summary {
  cursor:pointer;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
.focus details {
  border-bottom:1px solid var(--ink);
  font-size:12px;
  padding:15px 0
}
.focus summary {
  display:flex;
  justify-content:space-between
}
.focus details p {
  line-height:1.7;
  color:var(--muted)
}
.applications h2 {
  margin-bottom:44px
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}
.card {
  display:block
}
.mini-art {
  height:230px;
  background:#dce5df;
  position:relative;
  overflow:hidden;
  margin-bottom:25px
}
.mini-art>span {
  position:absolute;
  right:20px;
  top:16px;
  font-size:24px;
  z-index:2
}
.quarry {
  background:repeating-radial-gradient(ellipse at 55% 110%,#d8d9c8 0 18px,#b3bbaa 19px 21px,#e8e6d7 22px 40px)
}
.church {
  background:linear-gradient(145deg,#dce6e0,#9db6ae)
}
.church i {
  position:absolute;
  width:115px;
  height:102px;
  background:#5e8581;
  left:38%;
  bottom:33px;
  transform:skewY(-12deg)
}
.church i:before {
  content:'';
  position:absolute;
  left:-32px;
  bottom:0;
  width:40px;
  height:145px;
  background:#366d70;
  clip-path:polygon(0 28%,50% 0,100% 28%,100% 100%,0 100%)
}
.build {
  background:repeating-linear-gradient(30deg,transparent 0 45px,#a3b8ac 46px 47px),repeating-linear-gradient(150deg,#dbe1d2 0 45px,#a3b8ac 46px 47px)
}
.build i {
  position:absolute;
  width:130px;
  height:90px;
  left:30%;
  top:70px;
  border:12px solid #789387;
  transform:skewY(-20deg);
  box-shadow:20px -25px 0 -5px #b3bfb0
}
.card h3 {
  font-size:25px;
  letter-spacing:-.7px
}
.card>p:not(.eyebrow) {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:310px
}
.card-link {
  display:block;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:11px;
  margin-top:24px
}
.card:hover .mini-art {
  filter:brightness(1.04)
}
.insights {
  background:#fff
}
.news-head {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.news details {
  border-top:1px solid var(--line);
  padding:25px 0
}
.news details:last-child {
  border-bottom:1px solid var(--line)
}
.news summary {
  display:grid;
  grid-template-columns:23% 1fr 30px;
  align-items:center;
  gap:15px
}
.news summary>span {
  font-size:9px;
  letter-spacing:1px
}
.news h3 {
  font-size:23px;
  margin:0;
  letter-spacing:-.5px
}
.news b {
  font-size:24px;
  font-weight:normal
}
.news details p {
  margin-left:23%;
  max-width:650px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted)
}
.viewer {
  background:var(--ink);
  color:#edf2e9;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  position:relative;
  overflow:hidden
}
.viewer .eyebrow {
  color:#d7a15c
}
.viewer p:not(.eyebrow) {
  color:#b7ccca;
  font-size:14px;
  line-height:1.8
}
.light {
  background:#e6eee5;
  color:var(--ink);
  margin:20px 0
}
.viewer small {
  display:block;
  max-width:400px;
  font-size:10px;
  line-height:1.7;
  color:#9dbab9
}
.wire-model {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:300px
}
.wire-model>div {
  width:260px;
  height:260px;
  border:1px solid #9dbbb3;
  transform:rotate(-30deg) skew(20deg,10deg);
  background:repeating-linear-gradient(0deg,transparent 0 24px,#9dbbb344 25px 26px),repeating-linear-gradient(90deg,transparent 0 24px,#9dbbb344 25px 26px);
  box-shadow:30px 30px 0 -1px #073d4c,30px 30px 0 0 #709e96
}
.wire-model>span {
  position:absolute;
  font-size:82px;
  font-weight:200;
  color:#e2a045;
  letter-spacing:-6px
}
.wire-model small {
  font-size:7px;
  letter-spacing:1.5px;
  text-align:center;
  color:#bdd1ca
}
.about {
  display:grid;
  grid-template-columns:.6fr 1.4fr .9fr;
  gap:35px
}
.about h2 {
  margin-top:0
}
.about-mark {
  align-self:center;
  font-size:44px;
  font-weight:bold;
  letter-spacing:-3px;
  text-align:center
}
.about-mark>span {
  color:var(--orange)
}
.about-mark small {
  display:block;
  font-size:7px;
  letter-spacing:1px;
  margin-top:8px
}
.contact {
  border-top:1px solid var(--line);
  background:#e9ede4
}
.contact h2 {
  font-size:clamp(43px,5.5vw,80px)
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15%
}
.contact-grid>p {
  max-width:440px
}
.contact-box h3 {
  font-size:17px
}
.contact-box p {
  font-size:13px
}
.contact-box #contact-note {
  font-size:10px;
  max-width:340px
}
footer {
  padding:35px 5%;
  display:flex;
  gap:35px;
  align-items:center;
  background:#fff
}
footer img {
  width:110px
}
footer p {
  font-size:11px
}
footer>span {
  font-size:9px;
  line-height:1.8;
  color:var(--muted);
  margin-left:auto
}
footer>a {
  font-size:10px
}
@media(min-width:1600px) {
  .hero {
    min-height:800px
  }
  .hero-copy {
    padding-top:110px
  }

}
@media(max-width:900px) {
  nav {
    gap:18px
  }
  .hero-copy {
    padding-top:55px
  }
  h1 {
    font-size:50px
  }
  .hero-bottom {
    gap:12px;
    font-size:6px
  }
  .section {
    padding:65px 6%
  }
  .mini-art {
    height:185px
  }
  .cards {
    gap:18px
  }
  .about {
    grid-template-columns:1fr 2fr
  }
  .about-mark {
    display:none
  }
  .focus-grid {
    gap:5%
  }
  .contour-art {
    min-height:490px
  }

}
@media(max-width:650px) {
  html {
    scroll-padding-top:85px
  }
  .draft {
    font-size:8px;
    padding:8px 5%;
    letter-spacing:1px
  }
  .draft span {
    font-size:7px;
    letter-spacing:0
  }
  header {
    height:85px
  }
  .brand img {
    width:145px;
    height:67px
  }
  .menu {
    display:flex;
    gap:15px;
    align-items:center;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:12px
  }
  nav {
    display:none;
    position:absolute;
    top:85px;
    left:0;
    right:0;
    background:var(--paper);
    padding:20px 6%;
    border-bottom:1px solid var(--line)
  }
  nav.open {
    display:flex;
    align-items:stretch;
    flex-direction:column;
    gap:22px
  }
  .hero {
    display:flex;
    flex-direction:column
  }
  .hero-copy {
    padding:42px 6% 28px
  }
  h1 {
    font-size:48px;
    letter-spacing:-2.5px;
    width:100%;
    margin:24px 0
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.3px
  }
  .intro {
    font-size:15px
  }
  .actions {
    gap:20px;
    margin-top:24px
  }
  .button {
    padding:18px 20px;
    font-size:12px
  }
  .hero-bottom {
    font-size:6px;
    justify-content:space-between;
    margin-top:34px
  }
  .terrain-scene {
    height:380px
  }
  .scene-top {
    top:20px;
    left:24px;
    right:24px;
    font-size:7px
  }
  .scene-label {
    bottom:58px;
    left:24px
  }
  .scene-label strong {
    font-size:20px
  }
  .coordinates {
    bottom:20px;
    right:24px
  }
  .scroll {
    display:none
  }
  .section {
    padding:52px 6%
  }
  .section-head {
    margin-bottom:28px;
    align-items:start
  }
  .section-head>span {
    font-size:9px;
    max-width:145px;
    text-align:right
  }
  .focus-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .contour-art {
    min-height:330px
  }
  .art-caption {
    font-size:36px;
    left:25px;
    bottom:30px
  }
  .focus-copy h2 {
    font-size:40px
  }
  .cards {
    grid-template-columns:1fr;
    gap:38px
  }
  .mini-art {
    height:240px
  }
  .card>p:not(.eyebrow) {
    max-width:none
  }
  .card-link {
    margin-top:16px
  }
  .news-head {
    align-items:start
  }
  .news-head h2 {
    font-size:36px
  }
  .news-head .note {
    padding-top:25px;
    font-size:8px!important
  }
  .news summary {
    grid-template-columns:1fr 22px;
    gap:12px
  }
  .news summary>span {
    grid-column:1/-1;
    font-size:8px
  }
  .news h3 {
    font-size:20px
  }
  .news details p {
    margin-left:0
  }
  .viewer {
    grid-template-columns:1fr
  }
  .viewer h2 {
    font-size:37px
  }
  .wire-model {
    min-height:290px;
    margin-top:20px
  }
  .wire-model>div {
    width:200px;
    height:200px
  }
  .about {
    grid-template-columns:1fr;
    gap:20px
  }
  .about h2 {
    font-size:38px
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .contact h2 {
    font-size:48px
  }
  .contact-box {
    border-top:1px solid #c6d1c7;
    padding-top:25px
  }
  footer {
    flex-wrap:wrap;
    gap:20px
  }
  footer>span {
    margin-left:0;
    width:100%
  }
  footer>a {
    margin-left:auto
  }
  footer p {
    font-size:10px
  }

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

}
  /* Abschnittsfarben: klare Wechsel entlang der bestehenden Seitenstruktur. */ .applications {
  background:#d7e7e4;
  border-top:1px solid #c1d8d3;
  border-bottom:1px solid #bfd5d0
}
 .applications .section-head,.applications .card-link {
  border-color:#a7c5bf
}
 .applications .card>p:not(.eyebrow) {
  color:#3f6265
}
 .focus {
  background:#fffefa
}
 .insights {
  background:#f0e7d8;
  border-top:1px solid #e3d4be;
  border-bottom:1px solid #dfceb3
}
 .insights .news details {
  border-color:#cdbda5
}
 .insights .note,.insights .news details p {
  color:#596760
}
 .viewer {
  background:#073d4c
}
 .about {
  background:#d9e6eb;
  border-top:1px solid #b7ced7;
  border-bottom:1px solid #b6cbd2
}
 .about p {
  color:#49636f
}
 .about .text-link {
  border-color:#819fac
}
 .contact {
  background:#073d4c;
  color:#f3f3e9;
  border-top:5px solid #dc8615
}
 .contact>.eyebrow {
  color:#eab466
}
 .contact h2 em {
  color:#eab466
}
 .contact p,.contact .contact-box p {
  color:#c6d8d8
}
 .contact .contact-box h3 {
  color:#f3f3e9
}
 @media(max-width:650px) {
  .contact-box {
    border-top-color:#416977
  }

}
  /* Kontaktformular: eigenständige Oberfläche, keine Bewegung bei Hover. */ .contact .contact-grid {
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  gap:7%;
  align-items:start
}
 .contact-form {
  min-width:0;
  background:#f5f5ef;
  color:var(--ink);
  padding:32px;
  border-top:5px solid var(--orange)
}
 .contact-form h3 {
  font-size:25px;
  line-height:1.25
}
 .contact .contact-form p {
  color:#50676b;
  font-size:12px;
  line-height:1.65
}
 .contact .contact-form .form-required {
  font-size:11px;
  margin-bottom:24px
}
 .form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:21px 18px
}
 .form-grid label {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  font-weight:600;
  line-height:1.5
}
 .form-grid label>span {
  font-size:10px;
  font-weight:400;
  display:contents
}
 .form-grid input,.form-grid select,.form-grid textarea {
  width:100%;
  min-width:0;
  border:1px solid #8fa8a4;
  border-radius:0;
  background:#fffefa;
  color:var(--ink);
  padding:13px 12px;
  font:400 16px/1.5 Arial,Helvetica,sans-serif
}
 .form-grid textarea {
  resize:vertical;
  min-height:145px
}
 .form-grid :is(input,select,textarea):focus-visible {
  outline:3px solid var(--orange);
  outline-offset:2px
}
 .form-wide {
  grid-column:1/-1
}
 .form-grid .form-wide>span {
  display:block;
  margin-top:-6px
}
 .contact-form .form-privacy {
  margin:24px 0 20px
}
 .contact-form .form-status {
  margin:18px 0 0;
  padding:12px 14px;
  background:#e1e9e2;
  border-left:3px solid #71958b;
  overflow-wrap:anywhere
}
 .contact-form .form-status[data-state="error"] {
  background:#fff0dc;
  border-color:#b26b0e;
  color:#754300
}
 .contact-form .form-status[data-state="success"] {
  background:#dcebdc;
  border-color:#397747;
  color:#235030
}
 .contact-form button:disabled {
  opacity:.65;
  cursor:default
}
 .newsletter-choice {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:25px;
  font-size:12px;
  line-height:1.7;
  cursor:pointer
}
 .newsletter-choice input {
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin:2px 0 0;
  accent-color:var(--petrol)
}
 .newsletter-choice input:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:3px
}
 .contact .contact-form .newsletter-note {
  font-size:11px;
  margin:10px 0 0 31px
}
 .form-privacy a {
  text-decoration:underline;
  text-underline-offset:3px
}
 .form-trap {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
 @media(max-width:850px) {
  .contact .contact-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .contact-grid>p {
    max-width:650px
  }
  .contact-form {
    padding:28px
  }

}
 @media(max-width:520px) {
  .form-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .contact-form {
    padding:24px 18px
  }
  .contact-form h3 {
    font-size:23px
  }
  .contact-form .button {
    width:100%
  }

}
  /* Bereitgestellte Grubenmodell-Ansicht ersetzt die Geländeillustration im Hero. */ .hero-photo {
  background:#446460
}
 .hero-photo>img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 50%
}
 .hero-photo:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,36,42,.27),transparent 30%,transparent 58%,rgba(5,36,42,.75));
  pointer-events:none
}
 .hero-photo .scene-top,.hero-photo .scene-label {
  z-index:1;
  color:#fff
}
 .hero-photo .scene-label {
  bottom:45px;
  left:35px
}
 .hero-photo .scene-label small {
  color:#e4eeea
}
 @media(max-width:650px) {
  .hero-photo>img {
    object-position:52% 48%
  }
  .hero-photo .scene-label {
    left:24px;
    bottom:27px
  }

}
  /* Anwendungen: auf beiden Seiten per Klick und Tastatur erreichbares Untermenü. */ .nav-group {
  position:relative
}
.nav-parent {
  display:flex;
  align-items:center;
  gap:5px
}
.submenu-toggle {
  border:0;
  background:transparent;
  color:var(--ink);
  padding:8px;
  font-size:17px
}
.submenu {
  position:absolute;
  top:100%;
  left:-16px;
  min-width:210px;
  background:#fffefa;
  padding:12px;
  box-shadow:0 12px 25px #073d4c20;
  border:1px solid #c1d8d3;
  z-index:30
}
.submenu[hidden] {
  display:none
}
.submenu a {
  display:block;
  padding:12px 10px;
  font-size:12px
}
.submenu a:hover {
  background:#d7e7e4
}
.breadcrumb {
  display:inline-block;
  font-size:11px;
  margin-bottom:42px;
  color:#49676d
}
.quarry-hero {
  background:#f5f5ef;
  padding-top:34px
}
.quarry-hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6%;
  align-items:center
}
.quarry-hero h1 {
  width:auto;
  margin-top:25px;
  font-size:clamp(48px,5.3vw,78px)
}
.quarry-claim {
  font-size:20px;
  line-height:1.55;
  max-width:540px
}
.quarry-hero .intro {
  font-size:15px
}
.quarry-hero .button {
  margin-top:15px
}
.quarry-hero figure {
  margin:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  min-height:510px
}
.quarry-hero figure img {
  width:100%;
  height:100%;
  min-height:480px;
  max-height:620px;
  object-fit:cover;
  object-position:53% center
}
.quarry-hero figcaption {
  font-size:9px;
  color:var(--muted);
  padding:12px 0
}
.quarry-benefits {
  background:#d7e7e4
}
.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:45px
}
.benefit-grid article {
  border-top:1px solid #9dbdb6;
  padding-top:21px
}
.benefit-grid article>span {
  font-size:10px;
  color:#90600d
}
.benefit-grid h3 {
  font-size:22px;
  margin-top:20px
}
.benefit-grid p,.process-grid p {
  font-size:14px;
  line-height:1.8;
  color:#3f6265
}
.context-note {
  font-size:11px;
  line-height:1.7;
  color:#48666a;
  margin:35px 0 0;
  max-width:710px
}
.quarry-packages {
  background:#fffefa
}
.section-intro {
  font-size:15px;
  line-height:1.8;
  max-width:760px;
  color:var(--muted)
}
.package-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:44px
}
.package-grid article {
  border:1px solid #c9d7cf;
  padding:30px 25px;
  display:flex;
  flex-direction:column
}
.package-grid h3 {
  font-size:29px;
  letter-spacing:-1px;
  line-height:1.15;
  margin-top:16px
}
.package-grid article>p:not(.eyebrow) {
  font-size:13px;
  line-height:1.8;
  color:var(--muted)
}
.package-grid ul {
  padding-left:17px;
  margin:15px 0 30px;
  font-size:12px;
  line-height:1.8
}
.package-grid li {
  padding:6px 0
}
.package-grid .text-link {
  margin-top:auto;
  align-self:start
}
.package-grid .featured-package {
  background:#073d4c;
  color:#f3f3e9;
  border-top:4px solid var(--orange)
}
.featured-package .eyebrow {
  color:#edb86e
}
.package-grid .featured-package>p:not(.eyebrow) {
  color:#c6d8d8
}
.featured-package .text-link {
  border-color:#73918e
}
.package-notes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  margin-top:27px
}
.package-notes p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted)
}
.quarry-process {
  background:#f0e7d8
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:40px
}
.process-grid article>span {
  font-size:9px;
  letter-spacing:1.2px
}
.process-grid h3 {
  font-size:23px;
  line-height:1.3;
  margin-top:23px
}
.quarry-region {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  background:#d9e6eb
}
.quarry-region h2 {
  margin-top:0
}
.quarry-region p:not(.eyebrow) {
  font-size:15px;
  line-height:1.8;
  max-width:630px;
  color:#49636f
}
 @media(max-width:900px) {
  .package-grid {
    gap:12px
  }
  .package-grid article {
    padding:24px 18px
  }
  .package-grid h3 {
    font-size:25px
  }
  .quarry-hero-grid {
    gap:4%
  }
  .quarry-claim {
    font-size:17px
  }

}
 @media(max-width:650px) {
  .nav-parent {
    justify-content:space-between
  }
  .submenu {
    position:static;
    margin-top:8px;
    box-shadow:none;
    min-width:0;
    border:0;
    border-left:2px solid var(--orange);
    padding:4px 10px
  }
  .submenu-toggle {
    padding:6px 10px
  }
  .quarry-hero-grid,.package-grid,.process-grid,.quarry-region,.package-notes {
    grid-template-columns:1fr
  }
  .quarry-hero {
    padding-top:25px
  }
  .breadcrumb {
    margin-bottom:30px
  }
  .quarry-hero h1 {
    font-size:53px
  }
  .quarry-claim {
    font-size:19px
  }
  .quarry-hero figure {
    min-height:0;
    margin-top:34px
  }
  .quarry-hero figure img {
    min-height:310px;
    height:360px
  }
  .benefit-grid {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:30px
  }
  .benefit-grid article {
    display:grid;
    grid-template-columns:30px 1fr;
    column-gap:12px
  }
  .benefit-grid article>span {
    padding-top:5px
  }
  .benefit-grid h3 {
    margin-top:0
  }
  .benefit-grid p {
    grid-column:2;
    margin-top:0
  }
  .package-grid {
    gap:22px
  }
  .package-grid article {
    padding:30px 25px
  }
  .package-grid h3 {
    font-size:31px
  }
  .package-notes {
    gap:5px
  }
  .process-grid {
    gap:22px
  }
  .process-grid article {
    border-top:1px solid #cdbda5;
    padding-top:22px
  }
  .quarry-region {
    gap:20px
  }

}
  /* Gemeinsamer Navigationshintergrund für Startseite und Unterseiten. */ :root {
  --navigation-bg:#dcebf1;
  --navigation-border:#bdd3dd
}
 header {
  background:var(--navigation-bg);
  border-bottom-color:var(--navigation-border)
}
 header nav,header .submenu {
  background:var(--navigation-bg)
}
 header .submenu {
  border-color:var(--navigation-border)
}
 header .submenu a:hover {
  background:#c7dfe8
}
 @media(max-width:650px) {
  header nav {
    border-bottom-color:var(--navigation-border)
  }

}
  /* Semantische Flächenfarben: Navigationsblau bleibt der Navigation vorbehalten. */ :root {
  --surface-content-soft:#c4d8cc;
  --surface-content-warm:#ece2cf;
  --surface-content-light:#fffefa;
  --surface-content-dark:#073d4c;
  --header-divider:#9ebbc8;
  --header-shadow:0 5px 15px rgba(7,61,76,.14)
}
 header {
  border-bottom-color:var(--header-divider);
  box-shadow:var(--header-shadow)
}
 .surface-content-soft,.applications,.quarry-benefits {
  background:var(--surface-content-soft);
  border-color:#a9c4b4
}
 .surface-content-warm,.about,.quarry-region {
  background:var(--surface-content-warm);
  border-color:#d7c6a6
}
 .surface-content-light {
  background:var(--surface-content-light)
}
 .surface-content-dark {
  background:var(--surface-content-dark)
}
 .about p,.quarry-region p:not(.eyebrow) {
  color:#536154
}
 .about .text-link {
  border-color:#97a18b
}
  /* Wiederverwendbarer Leistungskartenstil für weitere Angebotsseiten. */ :root {
  --offer-card-bg:#e8eee6;
  --offer-card-border:#71958b;
  --offer-card-border-width:2px;
  --offer-card-shadow:0 8px 20px rgba(7,61,76,.11);
  --offer-card-featured-bg:#073d4c;
  --offer-card-featured-border:#dc8615;
  --offer-card-top-width:5px
}
 .offer-card,.package-grid article {
  background:var(--offer-card-bg);
  border:var(--offer-card-border-width) solid var(--offer-card-border);
  border-top-width:var(--offer-card-top-width);
  box-shadow:var(--offer-card-shadow)
}
 .offer-card--featured,.package-grid .featured-package {
  background:var(--offer-card-featured-bg);
  border:var(--offer-card-border-width) solid var(--offer-card-featured-border);
  border-top-width:var(--offer-card-top-width);
  box-shadow:var(--offer-card-shadow)
}
  /* Gebäude-Seite nutzt das gemeinsame Unterseiten- und Kartensystem. */ .building-page .quarry-hero h1 {
  font-size:clamp(42px,4.1vw,62px);
  letter-spacing:-2.5px;
  line-height:1.08
}
 .building-page .building-hero-art {
  object-fit:contain;
  background:var(--surface-content-soft)
}
 .editorial-note {
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  margin-top:19px
}
 .building-questions .news summary {
  grid-template-columns:1fr 30px
}
 .building-questions .news details p {
  margin-left:0;
  max-width:850px
}
 @media(max-width:650px) {
  .building-page .quarry-hero h1 {
    font-size:44px;
    letter-spacing:-2px
  }
  .building-page .quarry-hero figure img {
    min-height:0;
    height:auto;
    aspect-ratio:1
  }
  .building-questions .news summary {
    grid-template-columns:1fr 22px
  }
  .building-questions .news h3 {
    font-size:20px;
    line-height:1.3
  }

}
  /* Gliederung ausschließlich der drei Optionen in der Gebäude-Ergebnis-FAQ. */ .faq-offer-options {
  max-width:850px;
  padding-top:10px
}
 .faq-offer-option {
  margin:25px 0
}
 .faq-offer-option h4 {
  margin:0 0 9px;
  font-size:17px;
  line-height:1.4;
  font-weight:700;
  color:var(--ink)
}
 .faq-offer-option p {
  margin-top:0
}
 @media(max-width:650px) {
  .faq-offer-option {
    margin:26px 0
  }
  .faq-offer-option h4 {
    font-size:16px
  }

}
  /* Dezente Nutzenboxen: eigenständige, sanfte Flächen unterhalb der Angebotskarten. */ :root {
  --benefit-card-bg:#dfe9de;
  --benefit-card-border:#b8ccbe
}
 .benefit-grid .benefit-card {
  background:var(--benefit-card-bg);
  border:1px solid var(--benefit-card-border);
  padding:25px 24px
}
 @media(max-width:650px) {
  .benefit-grid .benefit-card {
    padding:22px 18px
  }

}
  /* Gemeinsamer Hover für eigenständige Inhaltskarten auf allen Seiten.
   Künftige gleichartige Karten können die Klasse motion-card verwenden.
   Navigations-, Medien-, Kontakt- und FAQ-Container sind keine Inhaltskarten. */ :root {
  --card-hover-lift:-8px;
  --card-hover-shadow:0 16px 30px rgba(7,61,76,.23);
  --card-hover-duration:240ms
}
 @media(min-width:651px) and (hover:hover) and (pointer:fine) {
    main :is(.motion-card,.card,.benefit-grid>article,.package-grid>article,.process-grid>article,.benefit) {
    transition:transform var(--card-hover-duration) ease,box-shadow var(--card-hover-duration) ease
  }
    main :is(.motion-card,.card,.benefit-grid>article,.package-grid>article,.process-grid>article,.benefit):hover {
    transform:translateY(var(--card-hover-lift));
    box-shadow:var(--card-hover-shadow)
  }

}
 @media(prefers-reduced-motion:reduce) {
    main :is(.motion-card,.card,.benefit-grid>article,.package-grid>article,.process-grid>article,.benefit) {
    transition:none
  }
    main :is(.motion-card,.card,.benefit-grid>article,.package-grid>article,.process-grid>article,.benefit):hover {
    transform:none
  }

}
  /* Gemeinsame umrahmte Navigation mit echtem Split-Control bei Anwendungen. */ :root {
  --nav-item-border:#83a7b6;
  --nav-item-hover:#c8dfe9;
  --nav-item-radius:2px
}
 header nav {
  gap:12px
}
 header nav>a,header .nav-parent {
  border:1px solid var(--nav-item-border);
  border-radius:var(--nav-item-radius);
  min-height:44px
}
 header nav>a {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px 16px
}
 header .nav-parent {
  gap:0;
  display:flex;
  align-items:stretch;
  overflow:hidden
}
 header .nav-parent>a {
  display:flex;
  align-items:center;
  padding:13px 15px
}
 header .submenu-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  padding:0 10px;
  border:0;
  border-left:1px solid var(--nav-item-border);
  border-radius:0;
  background:#c9dfe9;
  font-size:20px;
  line-height:1
}
 header .submenu-toggle[aria-expanded="true"] {
  background:#b2d0de
}
 header .submenu-toggle span {
  display:block
}
 header .submenu-toggle[aria-expanded="true"] span {
  transform:rotate(180deg)
}
 header nav>a:hover,header .nav-parent>a:hover,header .submenu-toggle:hover {
  background:var(--nav-item-hover)
}
 header nav>.nav-cta {
  background:var(--orange);
  border-color:#ba7415;
  color:var(--ink)
}
 header nav>.nav-cta:hover {
  background:#e79a33
}
 header .submenu {
  top:calc(100% + 8px);
  left:0;
  min-width:245px;
  padding:8px;
  border-radius:var(--nav-item-radius);
  box-shadow:0 10px 24px #073d4c26
}
 header .submenu a {
  padding:13px 12px;
  min-height:44px
}
 header .nav-parent>a:focus-visible,header .submenu-toggle:focus-visible {
  outline-offset:-4px
}
 @media(max-width:1000px) {
    header .menu {
    display:flex;
    gap:15px;
    align-items:center;
    min-height:44px;
    padding:8px 12px;
    border:1px solid var(--nav-item-border);
    border-radius:var(--nav-item-radius);
    background:transparent;
    color:var(--ink);
    font-size:12px
  }
    header nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:18px 5%;
    background:var(--navigation-bg);
    border-bottom:1px solid var(--navigation-border);
    max-height:calc(100dvh - 106px);
    overflow-y:auto
  }
    header nav.open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px
  }
    header .nav-parent>a {
    flex:1
  }
    header nav>a {
    justify-content:flex-start;
    padding:14px 16px
  }
    header .submenu-toggle {
    min-width:48px
  }
    header .submenu {
    position:static;
    margin:8px 0 0;
    min-width:0;
    border:1px solid var(--nav-item-border);
    box-shadow:none;
    padding:6px;
    background:var(--navigation-bg)
  }

}
 @media(max-width:650px) {
  header nav {
    max-height:calc(100dvh - 85px)
  }

}
  /* Dezente Füllung der eingerahmten Hauptmenüpunkte vor dem hellblauen Header. */ :root {
  --nav-item-bg:#edf4f6
}
 header nav>a,header .nav-parent {
  background:var(--nav-item-bg)
}
 header nav>.nav-cta {
  background:var(--orange)
}
 header nav>a:hover,header .nav-parent>a:hover {
  background:var(--nav-item-hover)
}
 header nav>.nav-cta:hover {
  background:#e79a33
}
  /* Symmetrisches Chevron: unabhängig von Schriftmetriken um denselben Mittelpunkt gedreht. */ header .submenu-toggle {
  position:relative
}
 header .submenu-toggle .nav-chevron {
  position:absolute;
  left:calc(50% - .5px);
  top:50%;
  width:12px;
  height:12px;
  display:block;
  transform:translate(-50%,-50%);
  transform-origin:center;
  pointer-events:none
}
 header .submenu-toggle[aria-expanded="true"] .nav-chevron {
  transform:translate(-50%,-50%) rotate(180deg)
}



/* Viewer-Infoseite: geplante Funktionen, gemeinsames Kontaktformular der Startseite. */
.viewer-info-hero {
  padding-top: 34px;
}
.viewer-info-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 7%;
}
.viewer-info h1 {
  width: auto;
  font-size: clamp(44px, 4.8vw, 70px);
  letter-spacing: -2.6px;
}
.viewer-info-claim {
  max-width: 600px;
  font-size: 21px;
  line-height: 1.55;
}
.viewer-info .intro {
  max-width: 600px;
  margin-bottom: 28px;
}
.viewer-info-plan {
  background: var(--ink);
  color: var(--paper);
  border-top: 5px solid var(--orange);
  padding: 36px;
}
.viewer-info-plan .eyebrow {
  color: #edb86e;
}
.viewer-info-logo {
  margin: 32px 0;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.8px;
}
.viewer-info-plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.viewer-info-plan li {
  padding: 15px 0;
  border-top: 1px solid #73918e;
  font-size: 14px;
}
.viewer-info-status {
  margin: 22px 0 0;
  color: #c6d8d8;
  font-size: 12px;
  line-height: 1.7;
}
.viewer-info-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 8%;
}
.viewer-info-contact {
  background: #f0e7d8;
}
.viewer-info-contact p:not(.eyebrow) {
  max-width: 660px;
  margin: 24px 0 28px;
  font-size: 17px;
  line-height: 1.8;
  color: #49636f;
}
@media (max-width: 800px) {
  .viewer-info-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .viewer-info-plan {
    max-width: 600px;
  }
}
@media (max-width: 650px) {
  .viewer-info-hero {
    padding-top: 25px;
  }
  .viewer-info h1 {
    font-size: clamp(38px, 10.5vw, 56px);
    letter-spacing: -1.8px;
  }
  .viewer-info-claim {
    font-size: 19px;
  }
  .viewer-info-plan {
    padding: 28px 24px;
  }
  .viewer-info-features {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}


/* Rein fiktives Kundenlogo zur Illustration der geplanten Branding-Funktion. */
.viewer-info-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: start;
  gap: 24px 16px;
  margin: 0 0 32px;
}
.viewer-info-brand-row > .eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.viewer-info-brand-row .viewer-info-logo {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -1.2px;
}
.viewer-example-logo {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 106px;
  padding: 13px 8px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #d6dfdb;
  border-radius: 12px;
  box-shadow: 0 10px 20px #00000012;
}
.viewer-example-logo svg {
  width: 42px;
  height: 37px;
  margin-bottom: 4px;
}
.viewer-example-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .65px;
}
.viewer-example-caption {
  font-size: 7px;
  letter-spacing: 1px;
  color: #49636f;
}
@media (max-width: 650px) {
  .viewer-info-brand-row {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 24px 12px;
  }
  .viewer-info-brand-row .viewer-info-logo {
    font-size: 30px;
  }
  .viewer-example-logo {
    min-height: 98px;
    padding: 12px 6px;
  }
}
@media (max-width: 360px) {
  .viewer-info-brand-row > .eyebrow {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .viewer-info-brand-row .viewer-info-logo {
    font-size: 27px;
  }
}