:root { color-scheme: dark; font-family: Bahnschrift, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif; color: #f4f4f2; background: #0b0c0e; }
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at top, #202124 0%, #0b0c0e 58%); }
    .hero-panel { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 1700px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; padding: clamp(24px, 4vw, 48px); background: linear-gradient(145deg, #17191c, #101113); border: 1px solid #2c2e31; border-radius: 24px; box-shadow: 0 24px 80px #0009; text-align: left; }
    .hero-panel::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 72%; height: 58%; background: url("ebike-tour-group-sunset.webp") center 42% / cover no-repeat; opacity: .16; mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%), linear-gradient(180deg, #000 0%, transparent 100%); mask-composite: intersect; pointer-events: none; }
    .brand-trust { color: #f4f4f2; }
    .brand-bike-wrap { display: inline-flex; flex-direction: column; vertical-align: top; line-height: .96; }
    .brand-bike { color: #ff6500; }
    .brand-taunus { display: block; margin-top: -.08em; color: #f4f4f2; font-size: .34em; font-weight: 700; letter-spacing: .44em; text-align: center; }
    .hero-copy, .hero-details { min-width: 0; }
    .hero-copy { width: 100%; text-align: center; }
    .hero-copy .intro { max-width: 100%; margin-right: auto; margin-left: auto; }
    .hero-details { display: block; width: 100%; }
    .eyebrow { margin: 0 0 18px; color: #ff7418; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    h1 { margin: 0; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; letter-spacing: -.055em; }
    .logo { display: block; height: auto; border-radius: 50%; }
    .intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; width: 100%; max-width: none; margin: 18px auto 24px; color: #c4c7c7; font-size: 1.04rem; line-height: 1.58; text-align: left; }
    .intro p { margin: 0; }
    .intro .intro-lead { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: none; margin-bottom: 24px; color: #e4e5e3; font-size: 1.12rem; text-align: center; }
    .intro-lead span { display: block; }
    .intro-lead .lead-opening { color: #ff7418; font-weight: 700; font-style: italic; text-transform: uppercase; }
    .intro-lead .lead-following { width: calc(100% - 36px); max-width: none; margin: 8px auto 0; font-weight: 700; font-style: italic; text-align: center; text-align-last: auto; text-transform: uppercase; }
    .intro .intro-detail { padding: 14px 18px 4px; border-top: 1px solid #383a3d; }
    .intro .intro-detail-justify { text-align: left; hyphens: auto; }
    .intro-column { display: grid; grid-template-rows: 1fr auto; justify-items: stretch; align-content: stretch; gap: 12px; }
    .intro-column .intro-detail { width: 100%; }
    .intro-column .button { width: 100%; min-width: 0; justify-self: stretch; }
    .intro-column .button-secondary { margin: 0; }
    .button { display: inline-flex; min-width: 260px; min-height: 52px; align-items: center; justify-content: center; padding: 0 24px; border-radius: 999px; background: #ff6500; color: #101113; font-weight: 650; text-decoration: none; }
    .button-secondary { margin: 8px 0 0 8px; border: 1px solid #ff7418; background: transparent; color: #ff8735; }
    .button-secondary:hover { background: #ff6500; color: #101113; }
    .hint { margin: 12px 0 0; color: #999f9f; font-size: .85rem; }
    .contact-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px 18px; width: 100%; max-width: 100%; margin: 0; padding: 16px 20px; border: 1px solid #2c2e31; border-radius: 16px; background: #121416; text-align: left; }
    .contact { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 8px 0; color: #aeb3b2; font-size: .94rem; line-height: 1.5; }
    .contact-icon { flex: 0 0 21px; width: 21px; height: 21px; margin-top: 1px; color: #ff7418; }
    .contact:nth-child(4) .contact-icon { color: #25d366; }
    .contact a { color: #ff8735; }
    .impressum { width: min(100%, 1700px); margin: 24px auto 0; padding: 24px; color: #aeb3b2; font-size: .9rem; line-height: 1.6; text-align: left; border-top: 1px solid #2c2e31; }
    .impressum h2 { margin-top: 0; color: #f4f4f2; font-size: 1.1rem; }
    .photo-band { position: relative; isolation: isolate; width: min(100%, 1700px); margin-inline: auto; min-height: 68vh; display: grid; place-items: center; padding: 32px; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
    .photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #08090bc9, #08090b20 52%, #08090b80); }
    .photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #0b0c0e 0%, #0b0c0e00 18%, #0b0c0e00 80%, #0b0c0e 100%); }
    .photo-band h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.05; letter-spacing: -.04em; text-align: center; text-shadow: 0 3px 28px #000b; }
    .photo-band-one { min-height: 68vh; background-image: url("ebike-tour-sunset.webp"); }
    @media (max-width: 760px) { .photo-band { min-height: 52vh; background-attachment: scroll; } }
    .map-section { width: 100%; margin: 0; padding: 20px; border: 1px solid #2c2e31; border-radius: 18px; background: #121416; text-align: left; }
    .map-section-bottom { width: 100%; margin: 0; }
    .map-section h2 { margin: 0 0 8px; color: #f4f4f2; font-size: 1.2rem; }
    .map-section p { color: #aeb3b2; line-height: 1.6; }
    .map-placeholder { min-height: 170px; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; border-radius: 12px; background: linear-gradient(135deg, #202326, #151719); text-align: center; }
    .map-placeholder p { max-width: 450px; margin: 0; font-size: .92rem; }
    .map-placeholder button { border: 0; border-radius: 999px; padding: 13px 20px; background: #ff6500; color: #101113; font: inherit; font-weight: 700; cursor: pointer; }
    .map-frame { display: block; width: 100%; height: 320px; border: 0; border-radius: 12px; }
    .bike-gallery { width: min(100%, 1700px); margin: 48px auto; padding: 28px 0; overflow: hidden; border-top: 1px solid #2c2e31; border-bottom: 1px solid #2c2e31; }
    .bike-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 16px 20px; }
    .bike-gallery h2 { margin: 0; color: #f4f4f2; font-size: clamp(1.35rem, 3vw, 1.8rem); }
    .gallery-toggle { min-height:44px; flex: 0 0 auto; border: 1px solid #55595c; border-radius: 999px; padding: 10px 16px; background: #17191c; color: #f4f4f2; font: inherit; cursor: pointer; }
    .gallery-toggle:hover { border-color: #ff7418; }
    .gallery-card { flex: 0 0 clamp(210px, 28vw, 300px); height: 190px;  display: grid; place-items: center; overflow: hidden; border: 1px solid #2c2e31; border-radius: 16px; background: #4b4d50; padding: 0; cursor: zoom-in; }
    .gallery-card:hover { border-color: #ff7418; }
    .gallery-card img { width: 100%; height: 100%; object-fit: contain; }
    .image-viewer { width: min(92vw, 1000px); max-width: none; max-height: 92vh; padding: 20px; border: 1px solid #44484b; border-radius: 18px; background: #111315; color: #f4f4f2; }
    .image-viewer::backdrop { background: #000d; backdrop-filter: blur(5px); }
    .image-viewer-close { display: block; margin: 0 0 12px auto; border: 1px solid #55595c; border-radius: 999px; padding: 9px 15px; background: #1b1e20; color: #f4f4f2; font: inherit; cursor: pointer; }
    .image-viewer img { display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto; margin: 0 auto; object-fit: contain; }
    .image-viewer p { margin: 12px 0 0; color: #aeb3b2; text-align: center; }
    .contact-location-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: stretch; gap: 24px; width: min(100%, 1700px); margin: 52px auto; }
    .contact-form-section { width: 100%; margin: 0; padding: clamp(24px, 5vw, 40px); border: 1px solid #2c2e31; border-radius: 20px; background: linear-gradient(145deg, #17191c, #101113); }
    .contact-form-section h2 { margin: 0 0 8px; color: #f4f4f2; font-size: clamp(1.5rem, 4vw, 2rem); }
    .contact-form-section > p { margin: 0 0 24px; color: #aeb3b2; line-height: 1.6; }
    .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
    .form-field { display: grid; gap: 7px; }
    .form-field-full { grid-column: 1 / -1; }
    .form-field label { color: #d8dbda; font-size: .92rem; font-weight: 600; }
    .form-field input, .form-field textarea { width: 100%; border: 1px solid #3a3d40; border-radius: 10px; padding: 12px 14px; background: #0b0c0e; color: #f4f4f2; font: inherit; }
    .form-field input:focus, .form-field textarea:focus { outline: 2px solid #ff7418; outline-offset: 1px; }
    .form-field textarea { min-height: 150px; resize: vertical; }
    .form-submit { justify-self: start; min-height: 48px; border: 0; border-radius: 999px; padding: 0 22px; background: #ff6500; color: #101113; font: inherit; font-weight: 700; cursor: pointer; }
    .form-submit:hover { background: #ff8735; }
    .form-note { grid-column: 1 / -1; margin: -4px 0 0; color: #999f9f; font-size: .85rem; line-height: 1.5; }
    @media (max-width: 900px) { .contact-location-layout { grid-template-columns: 1fr; } }
    @media (max-width: 600px) { .intro { grid-template-columns: 1fr; gap: 12px; } .intro .intro-lead { grid-column: auto; text-align: left; } .intro-lead .lead-opening { text-align: center; } .intro-lead .lead-following { width: 100%; text-align: left; text-align-last: left; } .intro .intro-detail { padding: 12px 0 2px; } .contact-list { grid-template-columns: 1fr; } .contact-form { grid-template-columns: 1fr; } .form-field-full, .form-note { grid-column: auto; } }

    a:focus-visible, button:focus-visible { outline: 3px solid #ff8735; outline-offset: 4px; }
    .text-link { color: #ff8735; text-underline-offset: 4px; }
    .hero-appointment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
    .hero-appointment .button { min-width: 0; margin: 0; justify-self: end; }
    .hero-appointment .button:last-child { justify-self: end; }
    .visit-flow { border-top: 1px solid #383a3d; padding-top: 24px; }
    .visit-flow h2 { margin: 0 0 18px; font-size: clamp(1.35rem, 3vw, 1.8rem); }
    .visit-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: visit; }
    .visit-flow li { counter-increment: visit; line-height: 1.6; color: #c4c7c7; }
    .visit-flow li::before { content: "0" counter(visit); display: block; margin-bottom: 6px; color: #ff8735; font-size: .85rem; font-weight: 700; }
    .visit-flow strong { display: block; color: #f4f4f2; }
    .photo-band, .photo-band-one { min-height: 46vh; }
    .gallery-note { margin: 0 16px 20px; max-width: 850px; color: #aeb3b2; line-height: 1.6; }
    .contact-alternatives { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
    .contact-alternatives .button { min-width: 0; padding: 12px 22px; }
    .contact a { overflow-wrap: anywhere; }
    @media (max-width: 600px) { body { padding: 12px; }  .hero-panel { padding: 22px 18px; } .visit-flow ol { grid-template-columns: 1fr; gap: 16px; } .bike-gallery-header { flex-wrap: wrap; } .hero-appointment { grid-template-columns: 1fr; } .hero-appointment .button { width: 100%; } .contact-form-section { padding: 24px 18px; } .photo-band { padding: 24px 18px; } .intro .intro-lead { margin-bottom: 8px; } .intro-lead .lead-following { text-align: center; text-align-last: auto; } }

    /* Blocksatz für Fließtexte; kurze Kontaktangaben und Überschriften bleiben ausgerichtet. */
    .intro .intro-detail-justify,
    .visit-flow li,
    .gallery-note,
    .contact-form-section > p,
    .form-note,
    .map-section > p,
    .map-placeholder p {
      text-align: justify;
      text-align-last: left;
      hyphens: auto;
      -webkit-hyphens: auto;
      overflow-wrap: break-word;
    }
  
/* Header: a single definition across desktop and mobile. */
.brand-header { grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,4vw,56px); padding-bottom:8px; }
.brand-header .logo { flex:0 0 auto; width:clamp(128px,18vw,250px); height:auto; margin:0; }
.brand-header > div { min-width:0; margin:0; text-align:right; }
.brand-header h1 { margin:0; font-size:clamp(2rem,5.3vw,5.2rem); font-style:italic; font-weight:700; line-height:.96; letter-spacing:.015em; text-transform:uppercase; }
.brand-header .eyebrow { margin:14px 0 0; font-size:clamp(.65rem,1.3vw,.85rem); letter-spacing:.04em; }
.gallery-window { overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:none; scrollbar-width:thin; scrollbar-color:#ff8735 #17191c; padding-bottom:12px; }
.gallery-track { display:flex; width:max-content; gap:16px; padding:4px 16px; }
.gallery-card { margin:0; scroll-snap-align:none; }
.gallery-controls { display:flex; flex-wrap:wrap; gap:8px; }
.form-status { grid-column:1/-1; margin:0; padding:14px; border-radius:10px; background:#202326; line-height:1.6; }
.form-status:empty { display:none; }
.form-status[data-state="error"] { border-left:3px solid #ff8735; }
.form-status[data-state="success"] { border-left:3px solid #70d49b; }
.form-submit:disabled { opacity:.65; cursor:wait; }
.form-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10; transform:translateY(-200%); padding:12px 18px; background:#ff6500; color:#101113; border-radius:10px; }
.skip-link:focus { transform:none; }
.map-route { display:inline-block; margin:8px 0 18px; color:#ff8735; text-underline-offset:4px; }
.image-viewer { overflow:auto; }
@media(max-width:820px) { .contact-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .brand-header { flex-direction:row; gap:12px; padding-bottom:0; } .brand-header .logo { width:72px; } .brand-header > div { flex:1; text-align:right; } .brand-header h1 { font-size:clamp(1.4rem,6.4vw,1.8rem); } .brand-header .eyebrow { margin-top:8px; font-size:.6rem; line-height:1.4; } .hero-panel { gap:16px; } .intro { margin-top:6px; margin-bottom:16px; } .contact-list { grid-template-columns:1fr; } .intro .intro-detail-justify,.visit-flow li,.gallery-note,.contact-form-section > p,.form-note,.map-section > p,.map-placeholder p { text-align:left; text-align-last:auto; } }

main { width:100%; min-width:0; }