:root {
    --blue:   #1466C4;
    --blue-d: #0E4F9C;
    --accent: #F97316;
    --accent-d:#EA670C;
    --ink:    #0F1B2D;
    --muted:  #64748B;
    --bg:     #FFFFFF;
    --tint:   #F4F8FD;
    --line:   #E6EDF4;
    --radius: 14px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .wrap { width: min(1120px, 91vw); margin-inline: auto; }
  h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; }

  /* HEADER */
  header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .hrow { display: flex; align-items: center; justify-content: space-between; height: 66px; }
  .logo { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
  .logo img { height: 30px; width: auto; display: block; }
  .logo b { color: var(--blue); }
  .hnav { display: flex; align-items: center; gap: 1.8rem; font-size: .93rem; font-weight: 500; }
  .hnav a { color: var(--muted); }
  .hnav a:hover { color: var(--ink); }
  .lang { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); font-weight: 500; }
  .lang:hover { border-color: var(--blue); color: var(--blue); }
  @media (max-width: 720px){ .hnav a.navlink { display: none; } }

  /* HERO */
  .hero { position: relative; overflow: hidden; background: #0B192A; padding: 5.5rem 0 4rem; text-align: center; color: #fff; }
  .hero > .wrap { position: relative; z-index: 2; }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(11,25,42,.58), rgba(11,25,42,.42)); }
  .hero-slide { position: absolute; inset: 0; z-index: 0; background-position: center 40%; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity .9s ease-in-out; will-change: opacity; }
  .hero-slide.is-on { opacity: 1; }
  @media (prefers-reduced-motion: reduce){ .hero-slide { transition: none; } }
  .hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: .7rem; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  .hero h1 .b { color: #8FCBFF; }
  .rot { display: inline-block; text-align: left; min-width: 7.5em; white-space: nowrap; max-width: 100%; transition: opacity .38s ease, transform .38s ease; }
  .rot.out { opacity: 0; transform: translateY(-8px); }
  .hero .sub { font-size: 1.1rem; color: rgba(255,255,255,.92); max-width: 34em; margin: 0 auto 2.2rem; text-shadow: 0 1px 10px rgba(0,0,0,.3); }

  /* SEARCH CARD */
  .search { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: .6rem; box-shadow: 0 20px 50px -24px rgba(15,27,45,.28); display: grid; grid-template-columns: 1fr auto; gap: .5rem; text-align: left; max-width: 760px; margin: 0 auto; }
  .fld { position: relative; border-radius: 12px; padding: .65rem .9rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; transition: background .15s; }
  .ac-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 22px 55px -18px rgba(15,27,45,.35); z-index: 60; max-height: 330px; overflow-y: auto; display: none; text-align: left; }
  .ac-drop.open { display: block; }
  .ac-head { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: .7rem .9rem .3rem; }
  .ac-item { display: flex; flex-direction: column; padding: .55rem .9rem; cursor: pointer; }
  .ac-item:hover { background: var(--tint); }
  .ac-item .nm { font-weight: 600; font-size: .95rem; color: var(--ink); }
  .ac-item .co { font-size: .8rem; color: var(--muted); }
  .ac-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: .55rem .9rem; cursor: pointer; }
  .ac-route:hover { background: var(--tint); }
  .ac-route .ep { font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.2; text-align: right; min-width: 0; }
  .ac-route .ep small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; }
  .ac-route .ep.r { text-align: left; }
  .ac-route .ar { color: var(--blue); flex: none; }
  .ac-swap { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; flex: none; transition: transform .3s ease, background .2s, color .2s; }
  .ac-swap:hover { background: var(--blue); color: #fff; transform: rotate(180deg); }
  .route-display { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .55rem; padding-top: .1rem; }
  .fld-route.chosen input { display: none; }
  .fld-route.chosen .route-display { display: grid; }
  .route-ep { font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; min-width: 0; }
  #rdFrom { text-align: right; }
  #rdTo { text-align: left; }
  .route-ep:hover { color: var(--blue); }
  .route-swap { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; flex: none; transition: transform .35s ease, background .2s, color .2s; }
  .route-swap:hover { background: var(--blue); color: #fff; transform: rotate(180deg); }
  .fld:hover { background: var(--tint); }
  .fld label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .12rem; }
  .fld input, .fld select { border: none; outline: none; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); background: transparent; width: 100%; padding: 0; cursor: pointer; }
  .fld input::placeholder { color: #A3B1C2; font-weight: 500; }
  .go-btn { background: var(--accent); color: #fff; border: none; border-radius: 12px; font-family: inherit; font-size: 1.02rem; font-weight: 700; padding: 0 1.9rem; cursor: pointer; transition: background .15s, transform .1s; }
  .go-btn:hover { background: var(--accent-d); }
  .go-btn:active { transform: translateY(1px); }
  @media (max-width: 800px){
    .search { grid-template-columns: 1fr; gap: .4rem; }
    .go-btn { grid-column: 1 / -1; padding: .95rem; }
  }
  .note { margin-top: 1.3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; font-size: .88rem; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
  .note span { display: inline-flex; align-items: center; gap: .4rem; }
  .note span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

  /* SECTIONS */
  section { padding: 3.4rem 0; }
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
  .sec-head h2 { font-size: 1.5rem; font-weight: 700; }
  .more { color: var(--blue); font-weight: 600; font-size: .92rem; }
  .more:hover { text-decoration: underline; }

  /* ROUTES */
  .routes { display: grid; grid-template-columns: repeat(3,1fr); gap: .85rem; }
  @media (max-width: 860px){ .routes { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .routes { grid-template-columns: 1fr; } }
  .rc { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.15rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
  .rc:hover { border-color: transparent; box-shadow: 0 12px 28px -14px rgba(15,27,45,.25); transform: translateY(-2px); }
  .r-pair { font-weight: 700; font-size: 1.02rem; }
  .r-op { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
  .r-price { text-align: right; white-space: nowrap; }
  .r-price small { display: block; font-size: .72rem; color: var(--muted); }
  .r-price b { color: var(--blue); font-size: 1.15rem; font-weight: 700; }

/* Startseite, Routen-Sektion (01.09.2026, Seitennotizen 9 und 11).
   .r-tag markiert die Karten, hinter denen eine eigene Streckenseite liegt.
   .how-sub ist die Einleitungszeile ueber den drei Schritten. */
.rc .r-tag { display: inline-block; margin-top: .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.how-sub { margin: -.7rem 0 1.6rem; max-width: 62ch; color: var(--muted); font-size: .95rem; }
.rpages li a.is-all { border-color: var(--blue); color: var(--blue); }
.rc-more { margin-top: .9rem; }
.rc-more > summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--blue); list-style: none; }
.rc-more > summary::-webkit-details-marker { display: none; }
.rc-more > summary::after { content: " \2193"; }
.rc-more[open] > summary::after { content: " \2191"; }
.rc-more .routes { margin-top: .9rem; }

/* Liste der ausgebauten Streckenseiten unter den beliebten Strecken (20.08.2026).
   Bewusst als Textliste statt als Karten: die Karten daruber sind der Weg zur
   Buchung, hier geht es um eigene Inhalte. */
.rpages { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rpages h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; }
.rpages p { font-size: .88rem; color: var(--muted); margin: 0 0 .9rem; max-width: 62ch; }
.rpages ul { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem .55rem; margin: 0; padding: 0; }
.rpages li a { display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: .38rem .8rem; font-size: .88rem; font-weight: 600; color: var(--ink); background: #fff; }
.rpages li a:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 560px){ .rpages li a { font-size: .84rem; padding: .34rem .7rem; } }

  /* HOW */
  .how-wrap { background: var(--tint); }
  .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
  .gallery figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
  .gallery img { width: 100%; height: 230px; object-fit: cover; display: block; transition: transform .3s ease; }
  .gallery figure:hover img { transform: scale(1.05); }
  .gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .9rem .6rem; color: #fff; font-size: .84rem; font-weight: 500; background: linear-gradient(transparent, rgba(11,25,42,.75)); }
  @media (max-width: 720px){ .gallery { grid-template-columns: 1fr 1fr; } }
  /* WARUM FLASHFERRY: Zahlenleiste + Feature-Karten */
  .why { padding-top: .5rem; }
  .ff-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.6rem; }
  .ff-stat { background: var(--tint); padding: 1.05rem .8rem; text-align: center; }
  .ff-stat b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
  .ff-stat span { display: block; margin-top: .15rem; font-size: .82rem; color: var(--muted); }
  .feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .feat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.3rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
  .feat:hover { border-color: #D8E4F2; box-shadow: 0 16px 36px -22px rgba(15,27,45,.35); transform: translateY(-2px); }
  .feat .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(249,115,22,.10); color: var(--accent); margin-bottom: .95rem; }
  .feat h3 { font-size: 1.03rem; font-weight: 700; margin: 0 0 .35rem; letter-spacing: -.01em; }
  .feat p { font-size: .92rem; line-height: 1.6; color: var(--muted); margin: 0; }
  @media (max-width: 980px){ .feats { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px){
    .feats { grid-template-columns: 1fr; gap: .7rem; }
    .feat { padding: 1.1rem 1.05rem; }
    .feat .ic { width: 36px; height: 36px; margin-bottom: .7rem; }
    .ff-stats { grid-template-columns: 1fr 1fr; }
    .ff-stat b { font-size: 1.3rem; }
  }
  .how { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
  @media (max-width: 720px){ .how { grid-template-columns: 1fr; gap: 1.4rem; } }
  .step .n { width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; display: grid; place-items: center; margin-bottom: .8rem; font-size: .95rem; }
  .step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
  .step p { color: var(--muted); font-size: .94rem; }

  /* FOOTER */
  footer { background: #0F1B2D; color: rgba(255,255,255,.7); padding: 3rem 0 1.8rem; font-size: .9rem; }
  .fcols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 2rem; margin-bottom: 2.2rem; }
  @media (max-width: 720px){ .fcols { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
  footer h4 { color: #fff; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .85rem; }
  .flogo { display: flex; align-items: center; gap: .5rem; color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.03em; }
  .flogo img { height: 28px; width: auto; }
  .flogo b { color: #5AA0EE; }
  footer .col a { display: block; margin-bottom: .5rem; color: rgba(255,255,255,.7); }
  footer .col a:hover { color: #fff; }
  .langs a { display: inline-block; margin: 0 .4rem .4rem 0; padding: .28rem .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; font-size: .82rem; color: rgba(255,255,255,.8); }
  .langs a:hover { border-color: rgba(255,255,255,.5); color: #fff; }
  .langs a.on { border-color: #5AA0EE; color: #fff; }
  .fbase { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.3rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .82rem; color: rgba(255,255,255,.5); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sprachumschalter (details/summary) */
.langsel { position: relative; }
.langsel summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-weight: 500; font-size: .9rem; }
.langsel summary::-webkit-details-marker { display: none; }
.langsel[open] summary { border-color: var(--blue); color: var(--blue); }
.langmenu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 45px -18px rgba(15,27,45,.3); padding: .4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; min-width: 264px; z-index: 70; }
.langmenu a { padding: .5rem .7rem; border-radius: 7px; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.langmenu a:hover { background: var(--tint); }
.langmenu a.on { color: var(--blue); font-weight: 600; }

/* FAQ */
.faq-wrap { background: #fff; border-top: 1px solid var(--line); }
.faq-inner { max-width: 760px; }
.faq { display: flex; flex-direction: column; gap: .6rem; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; }
.faq-item summary { list-style: none; cursor: pointer; font-weight: 600; padding: .9rem 2.4rem .9rem 1rem; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1rem; top: .75rem; color: var(--blue); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { padding: 0 1rem 1rem; color: var(--muted); margin: 0; }

/* ===== DF-Handoff: Widget-Modal (Template-Design, FlashFerry-Farben) ===== */
body.ho-lock{overflow:hidden}
.hi{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.12em}
.ho-back{position:fixed;inset:0;background:rgba(15,27,45,.55);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.ho-modal{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:94vh;overflow:auto;box-shadow:0 24px 64px rgba(15,27,45,.35);animation:hoIn .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes hoIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
.ho-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 22px 14px;border-bottom:1px solid #E5E7EB}
.ho-route{font-weight:800;font-size:1.05rem;color:#0F1B2D;display:flex;align-items:center;gap:8px}
.ho-route .hi{color:#F97316;width:1.2em;height:1.2em}
.ho-arr{color:#F97316}
.ho-x{border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer;color:#6B7280;padding:2px 6px}
.ho-body{padding:18px 22px 6px}
.ho-seg{display:inline-flex;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:9px;padding:3px;position:relative;margin-bottom:16px}
.ho-slider{position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);left:3px;background:#fff;border-radius:6px;transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ho-seg[data-j="2"] .ho-slider{transform:translateX(100%)}
.ho-jbtn{position:relative;z-index:1;padding:8px 16px;border:none;background:transparent;color:#6B7280;border-radius:6px;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:color .22s;min-height:38px;display:inline-flex;align-items:center;gap:7px}
.ho-jbtn.active{color:#0F1B2D}
.ho-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ho-sf{display:flex;flex-direction:column;gap:6px;min-width:0}
.ho-sf>span{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6B7280;display:flex;align-items:center;gap:6px}
.ho-sf>span .hi{width:.95rem;height:.95rem;color:#F97316}
.ho-sf input[type=date],.ho-veh{background:#fff;border:1px solid #D1D5DB;border-radius:9px;color:#0F1B2D;font:inherit;font-size:.93rem;padding:10px 12px;min-height:46px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;width:100%}
.ho-sf input:focus,.ho-veh:focus{border-color:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.ho-vhidden{visibility:hidden}
.ho-count{display:flex;align-items:center;background:#fff;border:1px solid #D1D5DB;border-radius:9px;overflow:hidden;min-height:46px}
.ho-cbtn{background:transparent;border:none;color:#6B7280;font-size:1.05rem;font-weight:600;width:40px;min-height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.ho-cbtn:hover{background:#F3F4F6;color:#0F1B2D}
.ho-cval{flex:1;text-align:center;font-size:.98rem;font-weight:700}
.ho-kids{display:none;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 4px;border-top:1px dashed #E5E7EB;margin-top:14px}
.ho-kids.show{display:grid;animation:hoFade .25s ease}
@keyframes hoFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ho-kcard{display:flex;align-items:center;gap:10px;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:10px;padding:9px 11px}
.ho-kico{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #E5E7EB;color:#F97316;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ho-kinfo{min-width:0;display:flex;flex-direction:column}
.ho-kname{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B7280;white-space:nowrap}
.ho-kage{font-size:.9rem;font-weight:700;color:#0F1B2D;white-space:nowrap}
.ho-kstep{display:flex;align-items:center;gap:2px;margin-left:auto;background:#fff;border:1px solid #D1D5DB;border-radius:100px;padding:2px}
.ho-kbtn{width:27px;height:27px;border:none;background:transparent;color:#6B7280;border-radius:50%;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.ho-kbtn:hover{background:#FFF3E9;color:#F97316}
.ho-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:14px 22px;background:#F3F4F6;border-top:1px solid #E5E7EB;flex-wrap:wrap}
.ho-summary{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#374151;flex-wrap:wrap;min-width:0}
.ho-summary .hi{color:#F97316;width:1.05rem;height:1.05rem}
.ho-summary b{font-weight:800;color:#0F1B2D}
.ho-sep{width:3px;height:3px;background:#D1D5DB;border-radius:50%}
.ho-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#F97316;color:#fff;font-weight:800;font-size:.96rem;border:none;border-radius:10px;padding:13px 26px;min-height:50px;cursor:pointer;transition:background .18s,transform .12s;white-space:nowrap;box-shadow:0 4px 14px rgba(249,115,22,.3);font-family:inherit}
.ho-cta:hover{background:#EA6C0B;transform:translateY(-1px)}
.ho-cta:disabled{opacity:.7;cursor:wait;transform:none}
.ho-cta .hi{transition:transform .2s}
.ho-cta:hover .hi{transform:translateX(3px)}
.ho-legal{padding:12px 22px 18px;font-size:.72rem;line-height:1.55;color:#6B7280}

/* ===== DF-Handoff: Lade-Overlay (Template-Design) ===== */
.ho-load,.ho-fload{display:flex;align-items:center;justify-content:center;padding:20px}
.ho-load{position:fixed;inset:0;background:rgba(15,27,45,.6);backdrop-filter:blur(4px);z-index:950;animation:hoFade .25s ease}
.ho-fload{position:absolute;inset:0;background:rgba(255,255,255,.97)}
.ho-lcard{background:#fff;border-radius:14px;box-shadow:0 24px 60px -12px rgba(0,0,0,.3);max-width:420px;width:100%;padding:30px 30px 24px;text-align:center;animation:hoIn .3s cubic-bezier(.34,1.4,.64,1)}
.ho-spin{width:52px;height:52px;margin:0 auto 16px;position:relative}
.ho-spin::before{content:'';position:absolute;inset:0;border:3px solid #FFF3E9;border-radius:50%}
.ho-spin::after{content:'';position:absolute;inset:0;border:3px solid transparent;border-top-color:#F97316;border-radius:50%;animation:hospin .8s linear infinite}
@keyframes hospin{to{transform:rotate(360deg)}}
.ho-ltitle{font-weight:800;font-size:1.05rem;color:#0F1B2D;margin-bottom:16px}
.ho-lstep{display:flex;align-items:center;gap:11px;text-align:left;font-size:.88rem;color:#D1D5DB;padding:5px 0;transition:color .3s;max-width:320px;margin:0 auto}
.ho-lstep.on{color:#0F1B2D}
.ho-lstep.ok{color:#374151}
.ho-dot{width:20px;height:20px;border-radius:50%;border:2px solid #E5E7EB;flex:0 0 auto;position:relative;transition:all .3s}
.ho-lstep.on .ho-dot{border-color:#F97316}
.ho-lstep.on .ho-dot::after{content:'';position:absolute;inset:4px;background:#F97316;border-radius:50%;animation:hopulse 1s ease-in-out infinite}
@keyframes hopulse{0%,100%{opacity:1}50%{opacity:.3}}
.ho-lstep.ok .ho-dot{border-color:#16a34a;background:#16a34a}
.ho-lstep.ok .ho-dot::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);animation:none}
.ho-lcard .ho-legal{border-top:1px solid #E5E7EB;margin-top:14px;padding:12px 0 0}
@media (prefers-reduced-motion: reduce){.ho-spin::after{animation:none}.ho-lstep.on .ho-dot::after{animation:none}}
@media (max-width:560px){
  .ho-fields{grid-template-columns:1fr}
  .ho-kids{grid-template-columns:1fr}
  .ho-foot{flex-direction:column;align-items:stretch}
  .ho-cta{width:100%}
  .ho-vhidden{display:none}
}

/* ===== DF-Handoff: eingebettetes Widget-Panel ===== */
.ho-panel{position:fixed;inset:0;z-index:960;background:#fff;display:flex;flex-direction:column}
.ho-bar{display:flex;align-items:center;gap:12px;background:#0F1B2D;color:#fff;padding:10px 14px;flex:0 0 auto}
.ho-blogo{font-weight:800;font-size:1rem;letter-spacing:.01em}
.ho-blogo b{color:#F97316}
.ho-broute{flex:1;min-width:0;font-size:.86rem;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-bext{border:1px solid rgba(255,255,255,.35);background:none;color:#fff;border-radius:8px;padding:6px 10px;font:inherit;font-size:.78rem;cursor:pointer;white-space:nowrap}
.ho-bext:hover{background:rgba(255,255,255,.12)}
.ho-bx{border:0;background:none;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 4px}
.ho-fwrap{position:relative;flex:1;min-height:0}
.ho-frame{width:100%;height:100%;border:0;display:block;background:#fff}
@media (max-width:480px){.ho-broute{display:none}}

/* ===== Routen-Unterseiten ===== */
.rp-hero{background-size:cover;background-position:center;padding:72px 0 64px;color:#fff}
.rp-crumb{font-size:.78rem;color:rgba(255,255,255,.75);margin-bottom:14px}
.rp-crumb a{color:rgba(255,255,255,.9);text-decoration:none}
.rp-crumb a:hover{text-decoration:underline}
.rp-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.rp-sub{max-width:46em;color:rgba(255,255,255,.88);line-height:1.65;margin:0 0 22px}
.rp-cta{min-width:220px}
.rp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.rp-fact{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 3px rgba(15,27,45,.05)}
.rp-fk{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6B7280}
.rp-fv{font-size:1.25rem;font-weight:800;color:#0F1B2D}
.rp-fv.rp-small{font-size:.92rem;line-height:1.4}
.rp-tips-sec{background:#F3F4F6}
.rp-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.rp-tip{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:18px;display:flex;gap:14px;align-items:flex-start}
.rp-tn{width:30px;height:30px;border-radius:50%;background:#F97316;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.9rem}
.rp-tip p{margin:0;font-size:.92rem;line-height:1.6;color:#374151}
.rp-book{max-width:52em;line-height:1.7;color:#374151;margin:0 0 20px}
.rp-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}

/* Routen-Unterseiten: Reederei-Tabelle + Preisnotiz */
.rp-h3{font-size:1.02rem;font-weight:800;color:#0F1B2D;margin:26px 0 12px}
.rp-optab-wrap{overflow-x:auto}
.rp-optab{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;font-size:.92rem}
.rp-optab th{background:#F3F4F6;text-align:left;padding:11px 14px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B7280}
.rp-optab td{padding:12px 14px;border-top:1px solid #E5E7EB;color:#0F1B2D}
.rp-optab td:first-child{font-weight:700}
.rp-pricenote{font-size:.74rem;color:#6B7280;margin:-6px 0 18px}

/* ===== Reederei-Banderole (monochrom navy, Endlos-Loop) ===== */
.ops{background:#fff;border-bottom:1px solid #e7ebf1;padding:16px 0 18px;overflow:hidden}
.ops-label{margin:0 0 10px;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-weight:600}
.ops-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ops-track{display:flex;width:max-content;animation:ops-scroll 45s linear infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
@media (hover:hover) and (pointer:fine){.ops-marquee:hover .ops-track{animation-play-state:paused}}
.ops-row{display:flex;align-items:center;gap:52px;padding-right:52px;flex:0 0 auto}
.op-logo{display:block;height:28px;width:var(--w);flex:0 0 auto;opacity:.85;background-image:url('/assets/ops-sprite.png');background-repeat:no-repeat;background-size:3091.7px 28px;background-position:calc(-1 * var(--x)) 0}
@keyframes ops-scroll{to{transform:translateX(-50%)}}
@media (max-width:640px){.ops-row{gap:30px;padding-right:30px}.ops-track{zoom:.8}}
@media (prefers-reduced-motion:reduce){
  .ops-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .ops-row[aria-hidden]{display:none}
  .ops-row{flex-wrap:wrap;justify-content:center;row-gap:10px;padding:0 16px}
}

/* ===== SEO-Textsektion ===== */
.seo-txt{padding:8px 0 34px}
.seo-txt p{max-width:860px;color:#475569;line-height:1.75;margin:0 0 14px;font-size:15.5px}


/* ===== Legal-Seiten & Footer-Rechtszeile ===== */
.legal-page{padding:36px 0 60px;background:#fff}
.legal-page .wrap{max-width:860px}
.legal-page h1{font-size:30px;margin:0 0 14px;color:#0F1B2D}
.legal-page h2{font-size:19px;margin:28px 0 8px;color:#0F1B2D}
.legal-page p,.legal-page li{color:#475569;line-height:1.7;font-size:15.5px}
.legal-page ul{padding-left:20px}
.legal-page a{color:#0F1B2D;text-decoration:underline}
.legal-en{background:#f1f5f9;border-left:3px solid #cbd5e1;padding:10px 14px;border-radius:6px}
.legal-stand{font-size:13px;color:#94a3b8}
.ftm{margin:14px 0 0;font-size:12px;color:#8fa0b8;opacity:.85;max-width:70em}
.flegal a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ===== Routen-Unterseiten (rt-*) ===== */
.rt-hero{background-size:cover;background-position:center;color:#fff;padding:72px 0 64px}
.rt-hero h1{font-size:clamp(28px,5vw,44px);margin:6px 0 12px;font-weight:800}
.rt-arrow{color:#F97316}
.rt-kicker{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#F97316;margin:0}
.rt-hero .rt-sub{max-width:38em;font-size:17px;line-height:1.6;color:#e3e9f2;margin:0 0 22px}
.rt-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.rt-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.55);padding:11px 20px;border-radius:10px;font-weight:600;text-decoration:none}
.rt-ghost:hover{background:rgba(255,255,255,.12)}











.rt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.rt-stat{background:#f6f8fb;border:1px solid #e7ebf1;border-radius:12px;padding:18px}
.rt-stat b{display:block;font-size:26px;color:#0F1B2D}
.rt-stat span{color:#64748b;font-size:14px}
.rt-alt{background:#f6f8fb}
.rt-lead{max-width:52em;color:#475569;line-height:1.7;margin:0 0 18px}
.rt-table-scroll{overflow-x:auto}
.rt-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e7ebf1;border-radius:12px;overflow:hidden}
.rt-table th,.rt-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eef1f6;font-size:15px;color:#334155}
.rt-table th{background:#0F1B2D;color:#fff;font-weight:600}
.rt-table tr:last-child td{border-bottom:0}
.rt-table .pr{font-weight:700;color:#0F1B2D;white-space:nowrap}
.rt-note{font-size:13px;color:#94a3b8;margin-top:10px}
.rt-price-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.rt-calc{background:#0F1B2D;color:#fff;border-radius:14px;padding:20px}
.rt-calc h3{margin:0 0 12px}
.rt-calc label{display:block;font-size:13px;color:#8fa4c4;margin:10px 0 4px}
.rt-calc select{width:100%;padding:10px;border-radius:8px;border:1px solid #33455f;background:#16233a;color:#fff;font-size:15px}
.rt-calc-out{margin:16px 0 6px;font-size:15px;color:#c6d2e4}
.rt-calc-out b{font-size:24px;color:#fff;margin-left:8px}
.rt-calc .rt-note{color:#8fa4c4}
.rt-calc-btn{display:inline-block;margin-top:8px;text-decoration:none;text-align:center}
.rt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rt-card{background:#fff;border:1px solid #e7ebf1;border-radius:14px;overflow:hidden}
.rt-card img{width:100%;height:170px;object-fit:cover;display:block}
.rt-card-b{padding:16px}
.rt-card-b h3{margin:0 0 6px;font-size:17px;color:#0F1B2D}
.rt-card-b p{margin:0;color:#64748b;font-size:14px;line-height:1.6}
.rt-price{display:inline-block;margin-top:10px;font-weight:700;color:#F97316;font-size:14px}
.rt-pets{background:#0F1B2D;color:#fff;padding:44px 0}
.rt-pets-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.rt-pets h2{margin:6px 0 10px}
.rt-pets p{color:#c6d2e4;line-height:1.7}
.rt-pets ul{padding-left:20px;color:#e3e9f2;line-height:1.9;margin:0 0 20px}
.rt-pets img{width:100%;height:100%;max-height:340px;min-height:240px;object-fit:cover;border-radius:14px;display:block}
.rt-steps-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.rt-steps{counter-reset:s;list-style:none;padding:0;margin:0}
.rt-steps li{counter-increment:s;position:relative;padding:0 0 18px 52px;color:#475569;line-height:1.6}
.rt-steps li b{color:#0F1B2D}
.rt-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:#F97316;color:#fff;font-weight:700;display:grid;place-items:center}
.rt-steps-grid img{width:100%;height:100%;max-height:340px;min-height:220px;object-fit:cover;border-radius:14px;display:block}
.rt-final{background:linear-gradient(180deg,#132238,#0F1B2D);color:#fff;text-align:center;padding:52px 0}
.rt-final p{color:#c6d2e4;margin:8px 0 20px}
@media (max-width:820px){.rt-price-grid,.rt-pets-grid,.rt-steps-grid{grid-template-columns:1fr}}

/* ===== Routenkarte ===== */

.ffmap{width:100%}
.ffmap-svg{width:100%;height:auto;display:block;border-radius:10px;font-family:Inter,system-ui,sans-serif}
.ffm-sea{fill:#eaf1f7}
.ffm-land{fill:#fdfdfb;stroke:#d5dfe9;stroke-width:.8;stroke-linejoin:round}
.ffm-country{fill:#9fb0c4;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-anchor:middle}
.ffm-route{fill:none;stroke:#9db4cf;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 6}
.ffm-route.is-active{stroke:#F97316;stroke-width:3.4;stroke-dasharray:none}
.ffm-route-halo{stroke:#fff;stroke-width:6;opacity:.85;stroke-dasharray:none}
.ffm-route-halo.is-active{stroke-width:8}
@keyframes ffmDraw{to{stroke-dashoffset:0}}
.ffm-badge rect{fill:#fff;stroke:#d5dfe9}
.ffm-badge text{fill:#64748b;font-weight:600}
.ffm-badge.is-active rect{fill:#0F1B2D;stroke:#0F1B2D}
.ffm-badge.is-active text{fill:#fff}
.ffm-port{fill:#fff;stroke:#64748b;stroke-width:1.6}
.ffm-port.is-main{fill:#F97316;stroke:#fff;stroke-width:2}
.ffm-portlabel{fill:#5b6b80;font-weight:600}
.ffm-portlabel.is-main{fill:#0F1B2D;font-weight:800}

/* ===== Galerie ===== */
.rt-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rt-gitem{margin:0;background:#fff;border:1px solid #e7ebf1;border-radius:14px;overflow:hidden}
.rt-gitem img{width:100%;height:190px;object-fit:cover;display:block}
.rt-gitem figcaption{padding:12px 14px;color:#64748b;font-size:14px;line-height:1.5}
@media (max-width:640px){.rt-dpick{display:none}.rt-gitem img{height:170px}}


/* ===== Fahrplan (hell, mobil zuerst) ===== */
.fp{padding:34px 0}
.fp-box{background:#fff;border:1px solid #e3e9f0;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(15,27,45,.05)}
.fp-datebar{display:flex;align-items:center;gap:6px;padding:12px;background:#f8fafc;border-bottom:1px solid #e8edf3}
.fp-nav{flex:0 0 auto;width:34px;height:46px;border-radius:10px;border:1px solid #dbe3ec;background:#fff;color:#475569;font-size:19px;line-height:1;cursor:pointer}
.fp-nav:hover{background:#f1f5f9;color:#0F1B2D}
.fp-days{display:flex;gap:6px;overflow-x:auto;flex:1 1 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fp-days::-webkit-scrollbar{display:none}
.fp-day{flex:1 0 auto;min-width:56px;padding:7px 6px;border-radius:10px;border:1px solid #dbe3ec;background:#fff;cursor:pointer;font-family:inherit;display:grid;gap:2px;line-height:1.2;text-align:center}
.fp-day .wd{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8}
.fp-day .dm{font-size:14px;font-weight:700;color:#334155}
.fp-day.has-data{border-color:#c7d7ea}
.fp-day.has-data::after{content:'';display:block;height:3px;width:16px;margin:1px auto 0;border-radius:2px;background:#F97316;opacity:.5}
.fp-day.is-sel{background:#0F1B2D;border-color:#0F1B2D}
.fp-day.is-sel .wd{color:#9fb3ce}
.fp-day.is-sel .dm{color:#fff}
.fp-day.is-sel::after{background:#F97316;opacity:1}
.fp-pick{flex:0 0 auto}
.fp-pick input{height:46px;border-radius:10px;border:1px solid #dbe3ec;background:#fff;color:#475569;padding:0 10px;font-family:inherit;font-size:13px}
.fp-status{padding:12px 16px 4px;color:#64748b;font-size:13px;font-weight:600}
.fp-rows{padding:6px 8px 8px}
.fp-row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:14px 10px;border-radius:12px}
.fp-row:nth-child(odd){background:#f8fafc}
.fp-times{display:flex;align-items:center;gap:10px;grid-column:1}
.fp-t{font-size:20px;font-weight:800;color:#0F1B2D;font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-t sup{font-size:11px;color:#F97316;font-weight:700;margin-left:1px}
.fp-line{flex:1 1 auto;min-width:44px;height:1px;background:#d8e1ec;position:relative;display:flex;justify-content:center}
.fp-line::after{content:'';position:absolute;right:-1px;top:-3px;border:3px solid transparent;border-left-color:#d8e1ec}
.fp-dur{position:absolute;top:-9px;background:#fff;padding:0 7px;font-size:11px;color:#94a3b8;white-space:nowrap}
.fp-row:nth-child(odd) .fp-dur{background:#f8fafc}
.fp-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;min-height:20px}
.fp-op{font-weight:700;color:#334155}
.fp-vessel{color:#94a3b8}
.fp-type{font-size:11px;padding:2px 8px;border-radius:20px;background:#eef4fb;color:#4a6b96}
.fp-type.is-night{background:#eae6fb;color:#59489b}
.fp-price{grid-column:2;grid-row:1/3;font-size:19px;font-weight:800;color:#0F1B2D;text-align:right;white-space:nowrap}
.fp-price small{display:block;font-size:11px;color:#94a3b8;font-weight:600}
.fp-empty{padding:28px 16px;text-align:center;color:#94a3b8;font-size:14px}
.fp-empty.is-loading{opacity:.75}
.fp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #e8edf3;background:#f8fafc;flex-wrap:wrap}
.fp-note{color:#94a3b8;font-size:12px}
.fp-cta{background:#F97316;color:#fff;padding:11px 18px;border-radius:10px;font-weight:700;text-decoration:none;font-size:14px}
.fp-cta:hover{background:#ea6a0c}
@media (min-width:700px){
  .fp-row{grid-template-columns:minmax(240px,1.1fr) 1.2fr auto;gap:16px;align-items:center}
  .fp-meta{grid-column:2}
  .fp-price{grid-row:1}
}
@media (max-width:520px){.fp-pick{display:none}.fp-t{font-size:18px}.fp-price{font-size:17px}}

/* ===== Preisrechner ===== */
.pc{display:grid;gap:18px;background:#fff;border:1px solid #e3e9f0;border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(15,27,45,.05)}
.pc-form{display:grid;gap:16px}
.pc-field{display:grid;gap:8px}
.pc-field label,.pc-label{font-size:13px;font-weight:700;color:#334155}
#pcDate{height:46px;border-radius:10px;border:1px solid #dbe3ec;padding:0 12px;font-family:inherit;font-size:15px;color:#0F1B2D;background:#fff;width:100%;max-width:260px}
.pc-steppers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pc-step{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;border:1px solid #dbe3ec;border-radius:12px;padding:8px 10px}
.pc-step-t{font-size:14px;color:#334155;font-weight:600;line-height:1.2}
.pc-step-t small{display:block;font-size:11px;color:#94a3b8;font-weight:500}
.pc-mm{width:34px;height:34px;border-radius:9px;border:1px solid #dbe3ec;background:#f8fafc;color:#0F1B2D;font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.pc-mm:hover{background:#eef2f7}
.pc-step output{min-width:24px;text-align:center;font-weight:800;color:#0F1B2D;font-size:16px}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pc-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:11px;border:1px solid #dbe3ec;background:#fff;color:#475569;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pc-chip:hover{border-color:#b9c8db;background:#f8fafc}
.pc-chip.is-on{background:#0F1B2D;border-color:#0F1B2D;color:#fff}
.pc-ico{display:none}
.pc-result{background:#f8fafc;border:1px solid #e8edf3;border-radius:14px;overflow:hidden}
.pc-best{display:grid;gap:2px;padding:18px;background:#0F1B2D;color:#fff}
.pc-best-l{font-size:12px;color:#9fb3ce;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.pc-best-p{font-size:34px;font-weight:800;line-height:1.1;color:#fff}
.pc-best-s{font-size:13px;color:#c6d2e4}
.pc-list{display:grid}
.pc-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid #eaeff5}
.pc-item:last-child{border-bottom:0}
.pc-item.is-best{background:#fff7ed}
.pc-i-t{font-weight:800;color:#0F1B2D;font-variant-numeric:tabular-nums}
.pc-i-t small,.pc-i-o small{display:block;font-size:11px;color:#94a3b8;font-weight:500}
.pc-i-o{font-size:13px;color:#475569;font-weight:600}
.pc-i-p{font-weight:800;color:#0F1B2D;font-size:16px;white-space:nowrap}
.pc-item.is-best .pc-i-p{color:#F97316}
.pc-hint{margin:0;padding:12px 16px;font-size:12px;color:#94a3b8;line-height:1.55;background:#fff}
.pc-empty{padding:28px 16px;text-align:center;color:#94a3b8;font-size:14px}
.pc-empty.is-loading{opacity:.7}
.pc-table-wrap{margin-top:14px}
.pc-table-wrap summary{cursor:pointer;color:#475569;font-weight:600;font-size:14px;padding:10px 0}
@media (min-width:860px){.pc{grid-template-columns:1.05fr .95fr;align-items:start}}

/* ===== Kartenlayout ===== */
.ffmap-layout{display:grid;gap:22px;align-items:center}
.ffmap-text p{color:#475569;line-height:1.7;margin:0 0 14px}
.ffmap-facts{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ffmap-facts li{display:flex;gap:10px;font-size:14px;color:#475569;line-height:1.5}
.ffmap-facts li b{color:#0F1B2D;flex:0 0 auto;min-width:92px}
.ffmap-box{background:#fff;border:1px solid #e3e9f0;border-radius:16px;padding:8px;overflow:hidden}
.ffmap-lead{font-size:16px}
.ffmap-regions{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.ffmap-regions li{background:#f1f5f9;border:1px solid #e3e9f0;color:#334155;font-size:12.5px;
  font-weight:600;padding:6px 12px;border-radius:999px;line-height:1.2}
.ffmap-stat{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:#0F1B2D;background:#fff7ed;border:1px solid #fed7aa;padding:7px 14px;border-radius:10px;
  margin:0 0 22px}
.ffmap-guides{border-top:1px solid #e7ebf1;padding-top:16px}
.ffmap-guides-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#94a3b8;margin:0 0 10px}
.ffmap-routelinks{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.ffmap-routelinks a{display:flex;align-items:center;gap:8px;color:#0F1B2D;font-weight:600;
  font-size:14.5px;padding:8px 4px;border-radius:8px;text-decoration:none;transition:background .12s}
.ffmap-routelinks a:hover{background:#f8fafc;color:var(--blue,#2563eb)}
.ffmap-routelinks a::before{content:"→";color:#F97316;font-weight:700;flex:0 0 auto}
@media (min-width:900px){.ffmap-layout{grid-template-columns:1fr 1.15fr}}

.rt-credit{margin:8px 0 0;font-size:11.5px;color:#94a3b8;text-align:right}
.rt-credit a{color:#94a3b8;text-decoration:underline}
.rt-stepsfig{margin:0}
.rt-stepsfig img{width:100%;height:auto;max-height:none;min-height:0;border-radius:14px;display:block}


/* ===== Tipps ===== */
.tips{padding:34px 0}
.tips-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tip{display:flex;gap:14px;background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:16px 18px}
.tip.is-top{border-color:#fdba74;background:#fff9f3}
.tip-ico{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#f1f5f9;color:#0F1B2D}
.tip-ico svg{display:block}
.tip.is-top .tip-ico{background:#ffedd5;color:#c2410c}
.tip-b h3{margin:0 0 6px;font-size:16px;color:#0F1B2D}
.tip-b p{margin:0;color:#475569;font-size:14.5px;line-height:1.65}
.tip-note{margin-top:8px !important;font-size:13px !important;color:#94a3b8 !important}

/* ===== Fahrplan-Warnungen & Sparpreise ===== */
.fp-hint{margin:8px 10px 12px;padding:11px 14px;border-radius:11px;background:#fff7ed;border:1px solid #fed7aa;color:#7c4a12;font-size:13.5px;line-height:1.55}
.fp-hint b{color:#9a3412}
.fp-row.is-alt{background:#fffbf5;box-shadow:inset 3px 0 0 #fdba74}
.fp-row.is-alt:nth-child(odd){background:#fff7ed}
.fp-warn{font-size:11px;padding:2px 8px;border-radius:20px;background:#ffedd5;color:#9a3412;font-weight:700}
.fp-save{font-size:11px;padding:2px 8px;border-radius:20px;background:#dcfce7;color:#166534;font-weight:700}
.fp-full{font-size:11px;padding:2px 8px;border-radius:20px;background:#fee2e2;color:#991b1b;font-weight:700}
.fp-price s{display:block;font-size:12px;color:#94a3b8;font-weight:500}

/* ===== Auswahl-Dialog nach "Los" ===== */
.ffm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .18s ease}
.ffm.open{opacity:1}
.ffm-bg{position:absolute;inset:0;background:rgba(10,18,32,.62);backdrop-filter:blur(3px)}
.ffm-card{position:relative;background:#fff;border-radius:18px;padding:24px 22px 22px;width:100%;max-width:440px;box-shadow:0 24px 60px rgba(10,18,32,.3);transform:translateY(10px) scale(.985);transition:transform .2s ease}
.ffm.open .ffm-card{transform:none}
.ffm-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;background:transparent;color:#94a3b8;font-size:24px;line-height:1;cursor:pointer;border-radius:8px}
.ffm-x:hover{background:#f1f5f9;color:#0F1B2D}
.ffm-route{margin:0 0 4px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#F97316;font-weight:800}
.ffm-h{margin:0 0 16px;font-size:21px;color:#0F1B2D;line-height:1.25}
.ffm-acts{display:grid;gap:10px}
.ffm-act{font-family:inherit;cursor:pointer;width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:15px 16px;border-radius:13px;border:1px solid #e3e9f0;text-decoration:none;background:#fff;transition:border-color .15s,background .15s}
.ffm-act:hover,.ffm-act:focus-visible{border-color:#cbd5e1;background:#f8fafc}
.ffm-act.is-book{background:#F97316;border-color:#F97316}
.ffm-act.is-book:hover,.ffm-act.is-book:focus-visible{background:#ea6a0c;border-color:#ea6a0c}
.ffm-ico{display:grid;place-items:center;width:22px;height:22px;color:#64748b}
.ffm-ico svg{display:block}
.ffm-act.is-book .ffm-ico{color:#fff}
.ffm-tx{display:grid;gap:2px;min-width:0;text-align:left}
.ffm-tx b{font-size:16px;color:#0F1B2D;line-height:1.25}
.ffm-tx small{font-size:12.5px;color:#64748b;line-height:1.45}
.ffm-act.is-book .ffm-tx b{color:#fff}
.ffm-act.is-book .ffm-tx small{color:#ffe4cc}
.ffm-arr{color:#94a3b8;font-size:18px}
.ffm-act.is-book .ffm-arr{color:#fff}
@media (max-width:420px){.ffm-card{padding:20px 16px 18px}.ffm-h{font-size:19px}.ffm-tx b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.ffm,.ffm-card{transition:none}}

.langsel summary{display:flex;align-items:center;gap:7px}
.langsel summary svg{display:block;flex:0 0 auto}

/* ===== Richtungsumschalter ===== */
.dirsw{display:inline-flex;gap:4px;padding:4px;background:#eef2f7;border-radius:12px;margin:0 0 14px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dirsw::-webkit-scrollbar{display:none}
.dirsw-b{flex:0 0 auto;border:0;background:transparent;color:#64748b;font-family:inherit;font-size:14px;font-weight:700;padding:9px 15px;border-radius:9px;cursor:pointer;white-space:nowrap}
.dirsw-b span{color:#94a3b8;margin:0 3px}
.dirsw-b:hover{color:#0F1B2D}
.dirsw-b.is-on{background:#fff;color:#0F1B2D;box-shadow:0 1px 3px rgba(15,27,45,.12)}
.dirsw-b.is-on span{color:#F97316}
.is-hidden{display:none !important}
@media (max-width:520px){.dirsw-b{font-size:13px;padding:8px 11px}}

/* ===== Vergleichsblock ===== */
.cmp{padding:34px 0}
.cmp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cmp-col{background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:18px}
.cmp-col.is-own{border-color:#F97316;box-shadow:0 0 0 1px #F97316 inset}
.cmp-col h3{margin:0 0 2px;font-size:18px;color:#0F1B2D}
.cmp-sub{margin:0 0 12px;font-size:13px;color:#94a3b8}
.cmp-col ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.cmp-col li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14.5px;line-height:1.5;border-top:1px solid #f1f5f9;padding-top:9px}
.cmp-col li:first-child{border-top:0;padding-top:0}
.cmp-col li b{color:#64748b;font-weight:600;min-width:96px}
.cmp-col li span{color:#0F1B2D;font-weight:600}

/* ===== Fahrplan: Filter, Bestpreis, Logos, Skeleton ===== */
.fp-tabs{display:flex;gap:7px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}
.fp-tabs::-webkit-scrollbar{display:none}
.fp-tabs:empty{display:none}
.fp-tab{flex:0 0 auto;padding:7px 15px;border:1.5px solid #dbe3ec;background:#fff;color:#64748b;border-radius:100px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.fp-tab:hover{border-color:#b9c8db;color:#0F1B2D}
.fp-tab.is-on{background:#0F1B2D;border-color:#0F1B2D;color:#fff}
.fp-row{position:relative}
.fp-row.is-best{background:#fff9ef !important;box-shadow:inset 3px 0 0 #F97316}
.fp-best{position:absolute;top:0;right:10px;background:#F97316;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:0 0 7px 7px;line-height:1}
.fp-logo{display:inline-block;flex:0 0 auto;background-image:url('/assets/ops-sprite.png');background-repeat:no-repeat;opacity:.9}
.fp-price .fp-total{display:block;font-size:11px;color:#94a3b8;font-weight:600;margin-top:3px;white-space:nowrap}
.fp-skel{padding:6px 10px}
.fp-srow{display:grid;grid-template-columns:1fr 1.2fr auto;gap:14px;align-items:center;padding:16px 10px}
.fp-srow span{height:14px;border-radius:5px;background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 50%,#eef2f7 75%);background-size:200% 100%;animation:fpShimmer 1.4s infinite}
.fp-srow span:nth-child(1){height:20px}
.fp-srow span:nth-child(3){width:70px;justify-self:end}
@keyframes fpShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.fp-srow span{animation:none}}

/* ===== Hero im Stil der Vorlage (heroWide) ===== */
.rt-hero.is-wide{padding:40px 0 0;background-position:center 28%;background-size:cover;display:flex;flex-direction:column}

/* Bildfläche unterhalb des Textes: rund 50 % mehr sichtbares Foto */
.rt-hero.is-wide::after{content:"";display:block;height:clamp(150px,26vh,260px)}
.rt-eyebrow{max-width:100%;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:5px 15px;font-size:11.5px;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font-weight:700;color:#fff;margin:0 0 14px}
.rt-hero.is-wide h1{font-size:clamp(27px,5vw,44px);line-height:1.14;letter-spacing:-.02em;margin:0 0 12px;text-shadow:0 2px 14px rgba(8,16,30,.45)}
.rt-hero h1 em{font-style:normal;color:#F97316}
.rt-hero.is-wide .rt-sub{max-width:38em;margin:0 0 20px;text-shadow:0 1px 10px rgba(8,16,30,.5)}
.kpi-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.kpi{flex:1 1 132px;background:rgba(11,20,35,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.24);border-radius:13px;padding:12px 16px}
.kpi-v{display:block;font-size:23px;font-weight:800;color:#fff;line-height:1.05;margin-bottom:3px}
.kpi-l{font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.35;display:block}
.trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.trust{display:inline-flex;align-items:center;gap:7px;background:rgba(11,20,35,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:100px;padding:6px 13px;font-size:13px;font-weight:500}
.trust svg{width:15px;height:15px;flex:0 0 auto;opacity:.9}
/* Suchkarte schließt bündig an den Hero an */
.rt-hero.is-wide + #preise{padding-top:0;margin-top:-18px}
.rt-hero.is-wide + #preise .wrap > .sec-head{padding-top:26px}
@media (max-width:640px){
  .kpi{flex:1 1 calc(50% - 5px);padding:10px 13px}
  .kpi-v{font-size:20px}
  .rt-hero.is-wide{padding:30px 0 0}
}


/* ===== Fahrplan: lange Listen einklappen ===== */
.fp-rows .fp-row.is-fold{display:none}
.fp-rows.is-open .fp-row.is-fold{display:grid}
.fp-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:8px 0 2px;padding:12px 16px;border:1.5px solid #dbe3ec;border-radius:12px;background:#fff;color:#0F1B2D;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fp-toggle:hover{border-color:#b9c8db;background:#f8fafc}
.fp-toggle:focus-visible{outline:2px solid #F97316;outline-offset:2px}
.fp-chev{width:9px;height:9px;border-right:2px solid #F97316;border-bottom:2px solid #F97316;transform:rotate(45deg);margin-top:-4px;transition:transform .18s ease}
.fp-toggle[data-open="1"] .fp-chev{transform:rotate(225deg);margin-top:2px}
@media (prefers-reduced-motion:reduce){.fp-chev{transition:none}}

/* ===== Fahrplan: Buchen je Abfahrt ===== */
.fp-book{display:inline-block;margin-top:7px;padding:8px 16px;border:0;border-radius:9px;background:#F97316;color:#fff;font-family:inherit;font-size:13px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap}
.fp-book:hover{background:#ea6a0c}
.fp-book:focus-visible{outline:2px solid #0F1B2D;outline-offset:2px}
.fp-price:empty{display:none}
@media (max-width:520px){.fp-book{padding:7px 13px;font-size:12.5px}}
.ho-picked{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 13px;border-radius:10px;background:#fff4ea;border:1px solid #fcd9b6;color:#0F1B2D;font-size:14px;font-weight:600}
.ho-picked .hi{width:17px;height:17px;flex:0 0 auto;color:#F97316}

/* ===== Preisrechner v2: Filter, Ergebnistabelle, Preisbausteine ===== */
.pc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.pc-seg{display:flex;gap:6px;flex-wrap:wrap}
.pc-seg button{padding:8px 14px;border:1.5px solid #dbe3ec;background:#fff;border-radius:100px;font-family:inherit;font-size:13px;font-weight:600;color:#64748b;cursor:pointer}
.pc-seg button.is-on{background:#0F1B2D;border-color:#0F1B2D;color:#fff}
.pc-go{padding:11px 20px;border:0;border-radius:10px;background:#F97316;color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.pc-go:hover{background:#ea6a0c}
.pc-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.pc-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8;font-weight:700;padding:8px 10px;border-bottom:1px solid #e8edf3}
.pc-table td{padding:11px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.pc-table td.pr,.pc-table th.pr{text-align:right}
.pc-table tr.is-best{background:#fff9ef}
.pc-table tr.is-best .pc-sum{color:#b4530a}
.pc-t{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-t sup{font-size:10px;color:#F97316;margin-left:1px}
.pc-op{font-weight:700;color:#334155;display:block;white-space:nowrap}
.pc-table small{color:#94a3b8;font-size:12px}
.pc-sum{font-weight:800;white-space:nowrap}
.pc-bk{text-align:right}
.pc-book{padding:7px 13px;border:0;border-radius:8px;background:#F97316;color:#fff;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pc-book:hover{background:#ea6a0c}
.sec-head-sm{margin-top:34px}
.sec-head-sm h3{font-size:20px;margin:0}
.pp-grid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:14px}
@media(min-width:700px){.pp-grid{grid-template-columns:1fr 1fr}.pp-wide{grid-column:1/-1}}
.pp-card{background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:16px}
.pp-h{font-size:15px;font-weight:800;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eef2f7}
.pp-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #f6f8fb;font-size:14.5px}
.pp-row:last-of-type{border-bottom:0}
.pp-row b{white-space:nowrap;font-weight:800}
.pp-row .pp-free{color:#1d7a3d}
.pp-note{margin-top:10px;font-size:12.5px;color:#94a3b8;line-height:1.5}
.pp-table td{padding:10px}
@media(max-width:520px){.pc-table{font-size:13.5px}.pc-book{padding:6px 11px;font-size:12px}}

/* ===== Preisrechner v2: Karte im mittigen Aufbau ===== */
.pc{max-width:760px;margin:0 auto}
.pc-card{background:#fff;border:2px solid #0F1B2D;border-radius:16px;padding:20px;box-shadow:0 4px 24px rgba(15,27,45,.08)}
.pc-card-t{font-size:11.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;text-align:center}
.pc .pc-seg{display:grid;grid-template-columns:1fr 1fr 1fr;border:1.5px solid #dbe3ec;border-radius:11px;overflow:hidden;margin-bottom:14px;gap:0}
.pc .pc-seg button{border:0;border-right:1px solid #e8edf3;background:#fff;padding:11px 6px;font-family:inherit;font-size:13px;font-weight:700;color:#64748b;cursor:pointer;border-radius:0}
.pc .pc-seg button:last-child{border-right:0}
.pc .pc-seg button.is-on{background:#0F1B2D;color:#fff}
.pc-datef{margin-bottom:12px}
.pc-datef label,.pc-gl{display:block;font-size:11.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.pc-datef input{width:100%;height:48px;padding:0 12px;border:1.5px solid #dbe3ec;border-radius:11px;font-family:inherit;font-size:15px;color:#0F1B2D;background:#fff}
.pc-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(min-width:640px){.pc-grid{grid-template-columns:1fr 1fr 1fr}.pc-g-wide{grid-column:span 3}}
.pc-ctrl{display:flex;align-items:center;height:48px;border:1.5px solid #dbe3ec;border-radius:11px;overflow:hidden}
.pc-ctrl .pc-mm{width:44px;height:100%;border:0;background:#f4f7fb;font-size:19px;font-weight:700;color:#0F1B2D;cursor:pointer;font-family:inherit}
.pc-ctrl .pc-mm:hover{background:#e8eef6}
.pc-ctrl output{flex:1;text-align:center;font-size:16px;font-weight:800}
.pc-sel{width:100%;height:48px;padding:0 12px;border:1.5px solid #dbe3ec;border-radius:11px;font-family:inherit;font-size:15px;background:#fff;color:#0F1B2D}
.pc-sum{margin-top:14px;padding:11px 14px;background:#eef4fb;border-radius:10px;font-size:13.5px;font-weight:700;color:#0F1B2D;text-align:center}
.pc .pc-go{width:100%;margin-top:12px;padding:15px;border:0;border-radius:12px;background:#F97316;color:#fff;font-family:inherit;font-size:15.5px;font-weight:800;cursor:pointer}
.pc .pc-go:hover{background:#ea6a0c}
.pc-result{margin-top:16px}
.pc-best{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px;background:#fff9ef;border:1px solid #fcd9b6;border-radius:14px;margin-bottom:14px;text-align:center}
.pc-best-l{font-size:12.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
.pc-best-p{font-size:40px;font-weight:800;color:#0F1B2D;line-height:1.1}
.pc-best-s{font-size:13.5px;color:#64748b}

/* Kompaktes Rechnerergebnis: nur Preis, Durchschnitt, Anzahl */
.pc-facts{display:flex;gap:22px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.pc-facts span{font-size:12.5px;color:#94a3b8;display:flex;flex-direction:column;align-items:center;gap:2px}
.pc-facts b{font-size:17px;font-weight:800;color:#0F1B2D}
.pc-best .pc-book{margin-top:16px;padding:12px 28px;border-radius:10px;font-size:15px}
.pc-hint{margin-top:12px;font-size:12.5px;color:#94a3b8;line-height:1.55;text-align:center}

/* Statischer Fahrplan (Server-Render fuer Crawler; route.js ersetzt ihn) */
table.fp-static{width:100%;border-collapse:collapse;font-size:.94rem}
table.fp-static caption{caption-side:top;text-align:left;padding:.4rem 0 .7rem;color:#64748b;font-size:.85rem}
table.fp-static th,table.fp-static td{padding:.55rem .6rem;border-bottom:1px solid #e5e7eb;text-align:left}
table.fp-static th{font-weight:600;color:#0F1B2D;white-space:nowrap}
table.fp-static td{color:#334155}
@media(max-width:640px){table.fp-static th:nth-child(5),table.fp-static td:nth-child(5){display:none}}

/* ============ Blog & Beitrag ============ */
.blog-page{padding:40px 0 64px}
.blog-page h1{font-size:clamp(28px,5vw,40px);margin:0 0 8px}
.blog-lead{color:#5b6577;font-size:17px;margin:0 0 28px;max-width:44em}
.blog-empty{color:#5b6577}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e9ef;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,27,45,.10);border-color:#d3d9e4}
.blog-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#eef1f6}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.blog-cat{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#F97316}
.blog-title{font-size:19px;font-weight:700;line-height:1.3;color:#0F1B2D}
.blog-teaser{font-size:15px;color:#5b6577;line-height:1.55}
.blog-meta{font-size:13px;color:#8b94a5;margin-top:2px}

.post-page{padding-bottom:64px}
.post-hero{width:100%;max-height:420px;overflow:hidden;background:#0F1B2D}
.post-hero img{width:100%;height:100%;max-height:420px;object-fit:cover;display:block}
/* Kleine Vorlagen nicht vollflaechig hochziehen (01.09.2026, Seitennotiz 14). */
.post-hero.is-small{background:none;max-height:none;padding:1.6rem 1rem 0}
.post-hero.is-small img{width:auto;max-width:min(100%,800px);height:auto;max-height:none;margin:0 auto;border-radius:14px;object-fit:contain}

/* Dreispaltige Beitragstabellen stapeln sich auf dem Handy zu Karten
   (01.09.2026, Seitennotiz 14). Sonst muesste man den Vergleich seitlich
   scrollen, und die dritte Spalte bliebe unentdeckt. */
@media (max-width: 620px){
  .post-table.is-wide,
  .post-table.is-wide tbody,
  .post-table.is-wide tr,
  .post-table.is-wide td { display: block; width: 100%; }
  .post-table.is-wide { min-width: 0; }
  .post-table.is-wide td:first-child { white-space: normal; }
  .post-table.is-wide thead { display: none; }
  .post-table.is-wide tr { border: 1px solid var(--line,#E6EDF4); border-radius: 12px; margin: 0 0 .6rem; padding: .5rem .2rem; background: #fff; }
  .post-table.is-wide td { border: 0; padding: .3rem .85rem; }
  .post-table.is-wide td:first-child { font-weight: 700; padding-top: .5rem; }
  .post-table.is-wide td:not(:first-child)::before { content: attr(data-l); display: block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted,#64748B); margin-bottom: .1rem; }
  .post-table.is-wide td:last-child { padding-bottom: .55rem; }
}
.post-wrap{max-width:760px;padding-top:28px}
.post-crumb{font-size:13px;color:#8b94a5;margin-bottom:14px}
.post-crumb a{color:#8b94a5;text-decoration:none}
.post-crumb a:hover{color:#F97316}
.post-cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#F97316;margin-bottom:6px}
.post-page h1{font-size:clamp(27px,5.2vw,40px);line-height:1.2;margin:0 0 12px}
.post-meta{font-size:14px;color:#8b94a5;margin:0 0 22px}
.post-lead{font-size:19px;line-height:1.6;color:#39435a;font-weight:500;margin:0 0 26px}
.post-toc{background:#f6f8fb;border:1px solid #e6e9ef;border-radius:12px;padding:16px 20px;margin:0 0 30px}
.post-toc strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#5b6577;margin-bottom:8px}
.post-toc ol{margin:0;padding-left:20px}
.post-toc li{margin:4px 0}
.post-toc a{color:#0F1B2D;text-decoration:none}
.post-toc a:hover{color:#F97316;text-decoration:underline}

.post-body{font-size:17px;line-height:1.72;color:#25304a}
.post-body h2{font-size:clamp(21px,3.4vw,27px);line-height:1.3;margin:38px 0 12px;scroll-margin-top:80px}
.post-body h3{font-size:19px;margin:26px 0 8px}
.post-body p{margin:0 0 16px}
.post-list{margin:0 0 18px;padding-left:22px}
.post-list li{margin:6px 0}
.post-box{border-left:4px solid #F97316;background:#fff7f0;border-radius:0 10px 10px 0;padding:14px 18px;margin:22px 0}
.post-box strong{display:block;margin-bottom:4px;color:#0F1B2D}
.post-box p{margin:0;font-size:16px}
.post-box.tone-info{border-left-color:#2f6fd0;background:#f2f7fd}
.post-box.tone-warn{border-left-color:#F97316;background:#fff7f0}
.post-tablewrap{overflow-x:auto;margin:22px 0}
.post-table{width:100%;border-collapse:collapse;font-size:16px;min-width:420px}
.post-table th,.post-table td{text-align:left;padding:10px 14px;border-bottom:1px solid #e6e9ef;vertical-align:top}
.post-table thead th{background:#f6f8fb;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:#5b6577}
.post-table tr:last-child td{border-bottom:none}
.post-table td:first-child{font-weight:600;color:#0F1B2D;white-space:nowrap}
.post-fig{margin:26px 0}
.post-fig img{width:100%;height:auto;border-radius:12px;display:block}
.post-fig figcaption{font-size:14px;color:#8b94a5;margin-top:8px}
.post-faq details{border:1px solid #e6e9ef;border-radius:10px;padding:0;margin:10px 0;background:#fff}
.post-faq summary{cursor:pointer;padding:14px 18px;font-weight:600;color:#0F1B2D;list-style:none}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";float:right;color:#F97316;font-weight:700}
.post-faq details[open] summary::after{content:"–"}
.post-faq p{margin:0;padding:0 18px 16px;font-size:16px;color:#3f4a63}
.post-cta{background:#0F1B2D;color:#fff;border-radius:14px;padding:24px 26px;margin:32px 0}
.post-cta strong{display:block;font-size:20px;margin-bottom:6px}
.post-cta p{margin:0 0 16px;color:#c3ccdb;font-size:16px}
.post-cta-btn{display:inline-block;background:#F97316;color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:10px}
.post-cta-btn:hover{background:#ea680c}
.post-sources{margin:36px 0 0;padding-top:22px;border-top:1px solid #e6e9ef}
.post-sources h2{font-size:17px;margin:0 0 10px;color:#5b6577}
.post-sources ul{margin:0;padding-left:20px;font-size:15px;color:#5b6577}
.post-sources li{margin:5px 0}
.post-sources a{color:#2f6fd0}
.src-date{color:#8b94a5}
.post-back{margin-top:28px}
.post-back a{color:#F97316;text-decoration:none;font-weight:600}
@media(max-width:640px){
  .post-hero{max-height:230px}
  .post-hero img{max-height:230px}
  .post-hero.is-small{max-height:none;padding:1rem .8rem 0}
  .post-hero.is-small img{max-height:none}
  .post-body{font-size:16.5px}
  .post-cta{padding:20px}
}

/* ---- Blog v2: zweispaltig, aufgelockert ---- */
.post-wrap{max-width:1120px}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.post-body{max-width:none}

/* Sidebar */
.post-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.side-card{border:1px solid #e6e9ef;border-radius:14px;padding:18px 18px 20px;background:#fff}
.side-card strong{display:block;font-size:17px;color:#0F1B2D;margin-bottom:6px;line-height:1.3}
.side-card p{margin:0 0 14px;font-size:14.5px;color:#5b6577;line-height:1.5}
.side-book{background:#0F1B2D;border-color:#0F1B2D}
.side-book strong{color:#fff}
.side-book p{color:#b9c3d4}
.side-btn{display:block;width:100%;box-sizing:border-box;text-align:center;background:#F97316;color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:12px 16px;border-radius:10px;border:0;cursor:pointer;font-family:inherit}
.side-btn:hover{background:#ea680c}
.side-btn:disabled{opacity:.6;cursor:default}
.ask-form{display:flex;flex-direction:column;gap:9px}
.ask-form input,.ask-form textarea{width:100%;box-sizing:border-box;border:1px solid #dfe4ec;border-radius:9px;
  padding:10px 12px;font:inherit;font-size:14.5px;color:#25304a;background:#fbfcfe;resize:vertical}
.ask-form input:focus,.ask-form textarea:focus{outline:0;border-color:#F97316;background:#fff}
#askHp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask-note{margin:8px 0 0;font-size:14px;line-height:1.45}
.ask-note.ok{color:#1d7a4c}
.ask-note.err{color:#c0392b}

/* Auflockerung im Fliesstext */
.post-body h2{position:relative;padding-top:16px}
.post-body h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;background:#F97316;border-radius:2px}
.post-key{background:linear-gradient(180deg,#fff7f0,#fffdfb);border:1px solid #ffd9bd;border-radius:14px;padding:18px 20px;margin:0 0 28px}
.post-key strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#c2570a;margin-bottom:10px}
.post-key ul{margin:0;padding:0;list-style:none}
.post-key li{position:relative;padding-left:26px;margin:7px 0;font-size:16px;color:#25304a;line-height:1.5}
.post-key li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:#F97316}
.post-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:26px 0}
.stat{background:#f6f8fb;border:1px solid #e6e9ef;border-radius:12px;padding:16px 14px;text-align:center}
.stat-num{display:block;font-size:26px;font-weight:800;color:#0F1B2D;line-height:1.1;letter-spacing:-.01em}
.stat-lab{display:block;font-size:13px;color:#5b6577;margin-top:5px;line-height:1.35}
.post-quote{margin:30px 0;padding:4px 0 4px 22px;border-left:4px solid #0F1B2D}
.post-quote p{margin:0;font-size:20px;line-height:1.5;font-weight:600;color:#0F1B2D;font-style:normal}
.post-quote cite{display:block;margin-top:8px;font-size:14px;color:#8b94a5;font-style:normal}
.post-body>*:first-child{margin-top:0}

@media(max-width:900px){
  .post-layout{grid-template-columns:1fr;gap:0}
  .post-side{position:static;margin:30px 0 0;flex-direction:column}
  .side-card{border-radius:14px}
}
@media(min-width:901px){
  /* auf dem Desktop Buchen-Karte zuerst sichtbar halten */
  .post-side{max-width:300px}
}

/* ---- Blog v3: geteilter Buchen-Bereich ---- */
.side-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-btns .side-btn{padding:11px 10px;font-size:14.5px;line-height:1.25}
.side-btn.ghost{background:#fff;color:#0F1B2D;border:1px solid #dfe4ec}
.side-btn.ghost:hover{background:#f2f5fa;border-color:#c9d2e0}
.side-book .side-btn.ghost{border-color:rgba(255,255,255,.28);background:#fff;color:#0F1B2D}
.side-book .side-btn.ghost:hover{background:#eef2f8}
.side-btns:has(.side-btn:only-child){grid-template-columns:1fr}
@media(max-width:420px){
  .side-btns{grid-template-columns:1fr}
}

/* ---- Blog v4: Buttons mit Symbol, mittig ---- */
.side-btns .side-btn{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.side-btns .side-btn svg{flex:0 0 auto;opacity:.9}
.side-btns .side-btn span{display:inline-block}
@media(max-width:1050px) and (min-width:901px){
  .side-btns .side-btn{font-size:13.5px;gap:5px;padding:11px 8px}
  .side-btns .side-btn svg{width:16px;height:16px}
}

/* Kennzeichen auf den Blog-Karten der Startseite (14.08.2026) */
.blog-tags{align-self:flex-start;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.blog-badge{font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#fff2e6;color:#c2410c}
.blog-badge.neu{background:#e8f3ff;color:#1d4ed8}
#magazin .blog-grid{grid-template-columns:1fr}
@media(min-width:760px){#magazin .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Weitere Routen in der Beitrags-Seitenspalte (14.08.2026) */
.side-more{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.side-more-t{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#9fb3ce}
.side-more ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.side-more a{color:#fff;text-decoration:none;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.22)}
.side-more a:hover{border-bottom-color:#F97316;color:#ffd7b8}

/* Bildnachweise (15.08.2026) */
.bn-list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:4px;grid-template-columns:1fr}
@media(min-width:700px){.bn-list{grid-template-columns:1fr 1fr}}
.bn-list code{background:#eef2f7;padding:2px 6px;border-radius:4px;font-size:12.5px;color:#42506b;word-break:break-all}

/* ---- Blog v6: Streckenauswahl im Stil der Startseite ---- */
.ffm.pickm{display:none}
.ffm.pickm.open{display:grid;opacity:1}
.pickm .ffm-card{max-width:560px;overflow:visible}
.pickm .ffm-h{padding-right:34px}
.pickm .search{box-shadow:none;border:0;padding:0;max-width:none;background:transparent}
.pickm .fld{background:#f6f8fb;border:1px solid #e3e9f0}
.pickm .ac-drop{max-height:min(52vh,340px);overflow-y:auto}
.pickm .ac-swap{color:#F97316;font-weight:700;padding:0 6px}
@media(max-width:560px){
  .pickm .search{grid-template-columns:1fr;gap:.55rem}
  .pickm .go-btn{width:100%}
}

/* ===== Mobil: kein seitliches Ueberlaufen (18.08.2026) =====
   Befund per Messung bei 390 px: 18 von 30 geprueften Seiten schoben Inhalt
   ueber den rechten Bildschirmrand. Ursachen und Behebung: */

/* 1. Rasterkinder duerfen schmaler werden als ihr laengster Inhalt.
      Ohne min-width:0 zieht ein einzelner langer Text (Zusammenfassung im
      Rechner, Tabelle im Blogtext) die ganze Karte ueber den Rand. */
.pc > *, .post-layout > *, .pp-grid > * { min-width: 0; }

/* 2. Die Zusammenfassung im Rechner (#pcSum) erbte white-space:nowrap von der
      gleichnamigen Klasse .pc-sum in der Ergebnistabelle. Bei langen Fassungen
      ("2 x Erwachsene . Ohne Fahrzeug (Fussgaenger) . Mittwoch, 19. August")
      wuchs die Karte dadurch auf bis zu 584 px. */
.pc-card .pc-sum { white-space: normal; }

/* 3. Werte in den Preisbausteinen: nowrap ist fuer kurze Preise gedacht,
      lange Fassungen ("in unserer Stichprobe im August 2026 ab ...") sprengten
      damit die Karte. Auf schmalen Geraeten umbrechen lassen. */
.pp-row b { overflow-wrap: anywhere; }
@media (max-width: 700px) { .pp-row b { white-space: normal; text-align: right; } }

/* 4. Die Kopfzeile ueber der H1 wurde mit Auslassungspunkten abgeschnitten,
      auf fi und pl fehlte gut ein Drittel des Textes. Auf Mobilgeraeten
      umbrechen statt abschneiden. */
@media (max-width: 700px) {
  .rt-eyebrow { white-space: normal; overflow: visible; text-overflow: clip;
    border-radius: 14px; line-height: 1.4; text-align: left; }
}

/* Sprachhinweis: schmaler Balken ueber dem Header, wenn Browsersprache und Seitensprache abweichen (27.08.2026) */
.ff-langhint{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:#0F1B2D;color:#fff;font-size:14px;padding:8px 44px 8px 16px;position:relative;line-height:1.4}
.ff-langhint a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ff-langhint a:hover{color:#F97316}
.ff-langhint button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:22px;line-height:1;width:32px;height:32px;cursor:pointer;opacity:.75}
.ff-langhint button:hover{opacity:1}

/* Aktionsbanner (inc/aktion.php), seit 27.08.2026 - ein Banner sichtbar, Wechsel per JS */
.aktion { background: linear-gradient(90deg, #0F1B2D 0%, #1B2F4B 100%); color: #fff; }
.aktion-in { position: relative; padding: 10px 0; }
.aktion-slide { display: none; align-items: center; gap: 14px; }
.aktion-slide.is-on { display: flex; animation: aktion-fade .4s ease; }
@keyframes aktion-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.aktion-logo { flex: 0 0 auto; height: 34px; display: flex; align-items: center; }
.aktion-logo img { height: 30px; width: auto; max-width: 210px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.aktion-pill { flex: 0 0 auto; background: #F97316; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.aktion-tag { flex: 0 0 auto; background: #F97316; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; white-space: nowrap; }
.aktion-body { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.aktion-h { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.aktion-s { font-size: 13px; color: #c9d5e4; margin-top: 2px; }
.aktion-dot { color: #5b6f8c; }
/* Flip-Countdown */
.aktion-clock { flex: 0 0 auto; }
.aktion-timer.fc { display: inline-flex; align-items: center; gap: 5px; }
.fc-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #c9d5e4; margin-right: 3px; }
.fc-g { display: inline-flex; gap: 2px; position: relative; }
.fc-g + .fc-g::before { content: ":"; color: #fff; font-weight: 800; font-size: 18px; line-height: 30px; margin: 0 2px 0 0; }
.fc-d + .fc-h::before { content: ""; margin: 0 2px; }
.fc-t { display: inline-block; width: 20px; height: 30px; background: #fff; border-radius: 5px; position: relative; overflow: hidden; perspective: 120px; }
.fc-t::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(15,27,45,.28); }
.fc-t b { display: block; text-align: center; font-size: 20px; line-height: 30px; font-weight: 800; color: #0F1B2D; font-variant-numeric: tabular-nums; }
.fc-t.flip b { animation: fc-flip .45s ease-out; transform-origin: 50% 50%; }
@keyframes fc-flip { 0% { transform: rotateX(-90deg); opacity: .2; } 60% { transform: rotateX(15deg); opacity: 1; } 100% { transform: none; } }
.aktion-timer.nod .fc-d, .aktion-timer.nod .fc-d + .fc-h::before { display: none; }
@media (max-width: 640px) {
  .aktion-clock { flex-basis: 100%; }
  .fc-t { width: 19px; height: 28px; } .fc-t b { font-size: 19px; line-height: 28px; }
  .fc-g + .fc-g::before { line-height: 28px; }
}
.aktion-code { background: #fff; color: #0F1B2D; border-radius: 5px; padding: 0 6px; font-weight: 800; letter-spacing: .06em; }
.aktion-btn { flex: 0 0 auto; background: #F97316; color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 9px; white-space: nowrap; }
.aktion-btn:hover { background: #ea680c; }
@media (max-width: 640px) {
  .aktion-slide { flex-wrap: wrap; gap: 8px 10px; }
  .aktion-logo { height: 28px; }
  .aktion-logo img { height: 24px; max-width: 170px; }
  .aktion-body { flex-basis: 100%; }
  .aktion-h { font-size: 15px; }
  .aktion-s { white-space: normal; font-size: 12.5px; }
  .aktion-btn { width: 100%; text-align: center; padding: 10px; }
}


/* ============ Highlights (Reiseanlaesse, seit 27.08.2026) ============ */
.hl-when{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px;font-size:14px}
.hl-when-l{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#8b94a5}
.hl-when-v{font-weight:600;color:#0F1B2D}
.hl-routes{margin:6px 0 30px}
.hl-routes h2{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:#5b6577;margin:0 0 12px}
.hl-route-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.hl-route{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.hl-route:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,27,45,.10)}
.hl-route-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#eef1f6}
.hl-route-img img{width:100%;height:100%;object-fit:cover;display:block}
.hl-route-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.hl-route-t{font-size:16px;font-weight:700;color:#0F1B2D;line-height:1.3}
.hl-route-d{font-size:13px;color:#5b6577}
.hl-route-d b{color:#0F1B2D}
.hl-route-n{font-size:13px;color:#8b94a5;line-height:1.45}
.hl-list .post-lead{max-width:44em}

/* Kopfbild der Highlight-Uebersicht (01.09.2026, Seitennotiz 12).
   Aufbau wie der Hafen-Hub: Foto als Hintergrund, dunkler Verlauf darueber,
   damit die Schrift auf jedem Motiv lesbar bleibt. */
.hl-hero{position:relative;background:#0F1B2D;color:#fff;padding:3.2rem 0 3rem;overflow:hidden}
.hl-hero::before{content:"";position:absolute;inset:0;background-image:var(--hl-img);background-size:cover;
  background-position:center;opacity:.5}
.hl-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,27,45,.72) 0%,rgba(15,27,45,.55) 45%,rgba(15,27,45,.88) 100%)}
.hl-hero>.wrap{position:relative;z-index:2}
.hl-hero h1{font-size:clamp(28px,5vw,42px);margin:.35rem 0 .5rem;color:#fff}
.hl-hero .post-crumb{color:#c3d4e8;margin:0}
.hl-hero .post-crumb a{color:#c3d4e8}
.hl-hero .post-crumb a:hover{color:#fff}
.hl-hero-lead{max-width:44em;margin:0;font-size:1.05rem;line-height:1.55;color:#e4ecf6}
.hl-hero-meta{margin:.9rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9fb6d2}
.hl-list{padding-top:2.4rem}
@media(max-width:560px){.hl-hero{padding:2.2rem 0 2rem}.hl-hero-lead{font-size:1rem}}

/* 7-Tage-Preisueberblick (route.js renderPrices) */
.fp-prices{padding:14px 16px 6px;border-bottom:1px solid #e8edf3;background:#fff}
.fp-ov-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.fp-ov-head strong{font-size:15px;color:#0F1B2D}
.fp-ov-head span{font-size:12px;color:#64748b}
.fp-ov-rows{display:grid;gap:6px}
.fp-ov-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;width:100%;padding:0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;border-radius:8px}
.fp-ov-row.is-empty{cursor:default}
.fp-ov-lab{font-size:12px;font-weight:600;color:#475569;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-ov-bar{position:relative;height:30px;border-radius:8px;background:#f1f5f9;overflow:hidden}
.fp-ov-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:8px;background:#1d4ed8;transition:width .35s ease}
.fp-ov-val{position:relative;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.fp-ov-val i{font-style:normal;font-size:12px}
.fp-ov-row.is-empty .fp-ov-val{color:#94a3b8;font-weight:500}
.fp-ov-row.is-best .fp-ov-fill{background:#16a34a}
.fp-ov-row.is-sel .fp-ov-fill{box-shadow:inset 0 0 0 4px #0F1B2D}
.fp-ov-row.is-sel .fp-ov-lab{color:#0F1B2D}
.fp-ov-row:not(.is-empty):hover .fp-ov-fill{filter:brightness(1.1)}
.fp-ov-row:focus-visible{outline:2px solid #F97316;outline-offset:2px}
@media (max-width:480px){.fp-prices{padding:12px 12px 4px}.fp-ov-row{grid-template-columns:54px 1fr;gap:8px}.fp-ov-bar,.fp-ov-val{height:28px}}

/* Angeheftete günstigste Abfahrt über der Liste (route.js, .fp-pin) */
.fp-pin{padding:12px 16px 14px;border-bottom:1px solid #e8edf3;background:#f8fafc}
.fp-pin-h{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#16a34a}
.fp-pin .fp-row,.fp-pin .fp-row.is-best{border:2px solid #16a34a;border-radius:12px;background:#fff !important;box-shadow:none}
.fp-pin .fp-row.is-fold{display:grid}
@media (max-width:480px){.fp-pin{padding:10px 12px 12px}}

/* ===== Mobil, zweite Runde: abgeschnittene Inhalte (29.08.2026) =====
   Befund per Messung mit echtem Browser bei 360 px (iPhone SE, viele
   Android-Geraete). Bei 390 px faellt beides nicht auf, deshalb blieb es
   bisher unbemerkt. Gemessen auf /de/calais-dover/, /de/marseille-bastia/
   und /de/karlskrona-gdynia/. */

/* 5. Fahrplanzeile: Preis und Buchen-Knopf standen 11 px ausserhalb des
      Kastens und wurden von .fp-box (overflow:hidden) abgeschnitten — der
      orange Buchen-Knopf war am rechten Rand angeschnitten. Ursache: die
      Gesamtpreiszeile ("2 Erw. + PKW ab 106 €") ist white-space:nowrap und
      erzwang damit eine 123 px breite zweite Rasterspalte; zusammen mit der
      169 px breiten Zeitspalte passte das nicht mehr in die 266 px
      Innenbreite. Auf schmalen Geraeten darf sie umbrechen. */
@media (max-width: 420px) {
  .fp-row { grid-template-columns: minmax(0,1fr) auto; }
  .fp-price, .fp-times, .fp-meta { min-width: 0; }
  .fp-price .fp-total, .fp-total { white-space: normal; overflow-wrap: anywhere; }
}

/* 6. Segmentierte Auswahl im Preisrechner (Alle Fahrten / Tagfahrten /
      Nachtfahrten): 1fr hat als Mindestbreite den laengsten Inhalt, die drei
      Spalten kamen dadurch auf 66+89+102 = 257 px bei 244 px Platz. Das
      letzte Feld war um 13 px angeschnitten ("Nachtfahrte"). minmax(0,1fr)
      erlaubt schmalere Spalten, der Umbruch faengt lange Woerter in anderen
      Sprachen ab. */
@media (max-width: 420px) {
  .pc-seg { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pc-seg button { padding: 10px 4px; font-size: 12px; line-height: 1.25;
    white-space: normal; overflow-wrap: break-word; hyphens: auto; }
}

/* 7. Haustier- und Ablaufabschnitt auf der Routenseite: die Rasterkinder
      hatten keine Mindestbreite 0 und wurden dadurch breiter als ihre Spalte
      (nl bei 320 px: 311 statt 291, die ganze Seite lief 5 px ueber).
      Gleiche Ursache wie Punkt 1 vom 18.08.2026, nur an zwei weiteren
      Stellen. */
.rt-pets-grid > *, .rt-steps-grid > * { min-width: 0; }

/* 8. 7-Tage-Preisueberblick: die Beschriftungsspalte war auf Mobilgeraeten
      fest 54 px breit. Das reicht fuer "Morgen" (de) und die Wochentage,
      nicht aber fuer "Tomorrow" (63 px), "Huomenna" (64 px) und
      "Aujourd'hui" (68 px) — dort war das Wort mit Auslassungspunkten
      abgeschnitten, auf jeder Bildschirmbreite bis 480 px. Gemessen in allen
      zwoelf Sprachen, laengster Wert 68 px. Spalte auf 72 px, der Balken
      verliert 18 px und bleibt bei 320 px noch 187 px breit. */
@media (max-width: 480px) { .fp-ov-row { grid-template-columns: 72px 1fr; } }

/* =====================================================================
   9. Ueber-uns-Seite (29.08.2026)

   Bis heute gab es fuer /{lang}/about/ keine einzige Regel. Alle
   about-*-Klassen standen nur in inc/page-about.php, in dieser Datei
   kam "about" gar nicht vor. Die Karten sind <a> mit <span> darin —
   ohne Styles laufen sie als Fliesstext ineinander, und die Verweise
   auf die Schwesterseiten und auf Direct Ferries waren als solche
   nicht zu erkennen.

   Farben, Radius und Schrift kommen aus :root, damit die Seite zum
   Rest gehoert. Einzige bewusste Ausnahme ist die Partnerkarte: sie
   traegt Orange, weil sie die bezahlte Verbindung offenlegt und sich
   deshalb von den eigenen Projekten unterscheiden soll.
   ===================================================================== */

.about-page { padding: 34px 0 56px; }

.about-page h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.3rem);
  line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 14px;
}
.about-page h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink); margin: 38px 0 10px;
}
.about-page > .wrap > p {
  max-width: 64ch; color: #334155; line-height: 1.65; margin: 0 0 12px;
}
/* Hoehere Spezifitaet als die Zeile darueber, sonst zieht die Lead-Regel nicht. */
.about-page > .wrap > p.about-lead {
  font-size: 1.08rem; font-weight: 500; color: var(--ink); margin-bottom: 16px;
}

.about-box {
  max-width: 66ch; margin: 22px 0 6px; padding: 14px 16px;
  background: var(--tint);
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  color: #334155; font-size: .94rem; line-height: 1.6;
}
.about-box strong { color: var(--ink); }
.about-boxlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 4px; vertical-align: -6px;
  border-radius: 50%; background: var(--blue); color: #fff;
  text-decoration: none; font-size: .85rem; line-height: 1;
  transition: background .15s ease, transform .15s ease;
}
.about-boxlink:hover { background: var(--blue-d); transform: translateX(2px); }
.about-boxlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.about-grid {
  display: grid; gap: 14px; margin: 16px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.about-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.about-card:hover { border-color: #C7DBF3; box-shadow: 0 6px 20px rgba(15,27,45,.08); transform: translateY(-2px); }
.about-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.about-head { display: flex; align-items: center; gap: 10px; }
.about-logo {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; object-fit: contain; background: var(--tint);
}
.about-mono {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--ink);
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.about-tag {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--tint);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.about-name { font-weight: 600; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.about-desc { flex: 1 1 auto; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.about-visit { margin-top: 2px; font-size: .85rem; font-weight: 600; color: var(--blue); }
.about-card:hover .about-visit { color: var(--blue-d); }

/* Partnerkarte: Orange statt Blau. Reihenfolge beachten — diese Regeln
   muessen nach .about-card:hover .about-visit stehen, sonst gewinnt dort
   bei gleicher Spezifitaet die blaue Fassung. */
/* Meist steht hier nur eine Karte. Ohne Deckel zoege sie sich ueber die
   volle Breite und die Beschreibung liefe als eine sehr lange Zeile —
   deshalb Kartenmass wie bei den Projekten, linksbuendig. */
.about-grid--partner { grid-template-columns: repeat(auto-fit, minmax(260px, 380px)); justify-content: start; }
.about-grid--partner .about-card { border-left: 3px solid var(--accent); }
.about-grid--partner .about-mono { background: var(--accent); }
.about-grid--partner .about-tag { color: #9A3412; background: #FFF1E6; border-color: #FBD3B0; }
.about-grid--partner .about-visit { color: var(--accent-d); }
.about-grid--partner .about-card:hover { border-color: #FBD3B0; }
.about-grid--partner .about-card:hover .about-visit { color: #C2560A; }

.about-contact {
  margin-top: 44px; padding: 26px 20px; text-align: center;
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius);
}
.about-contact h2 { margin: 0 0 8px; }
.about-contact p { max-width: 52ch; margin: 0 auto 18px; color: #334155; line-height: 1.6; }
.about-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
  transition: background .15s ease;
}
.about-cta:hover { background: var(--accent-d); }
.about-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 560px) {
  .about-page { padding: 24px 0 40px; }
  .about-page h2 { margin-top: 30px; }
  .about-grid { grid-template-columns: 1fr; gap: 12px; }
  .about-contact { padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-card, .about-boxlink, .about-cta { transition: none; }
  .about-card:hover { transform: none; }
  .about-boxlink:hover { transform: none; }
}


/* Hafenverweise auf Routenseiten (29.08.2026) — holt die Hafenseiten aus der
   zweiten Ebene, sie hingen vorher nur am Hafenverzeichnis. */
.rt-ports{padding:2.1rem 0 .4rem}
.rt-portlist{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.9rem 0 0}
.rt-portlist a{display:inline-flex;align-items:center;gap:.4rem;background:#fff;
  border:1px solid var(--line,#E6EDF4);border-radius:10px;padding:.5rem .9rem;
  font-size:.96rem;font-weight:600;color:var(--ink,#0F1B2D);text-decoration:none;
  box-shadow:0 2px 6px -4px rgba(15,27,45,.25)}
.rt-portlist a::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent,#F97316);flex:0 0 auto}
.rt-portlist a:hover{border-color:var(--accent,#F97316);color:#c2410c}

/* Zirka-Preise (30.08.2026): kleines Kuerzel vor der Zahl, gleiche Optik wie
   echte Preise - nur eine Spur leiser. Darunter einmal die Erklaerzeile. */
.fp-ca{font-size:.72em;font-weight:600;opacity:.72;margin-right:.1em}
.fp-ca-fuss{margin:.9rem 0 0;font-size:.78rem;line-height:1.45;color:#6B7280}


/* Fahrplanhorizont (01.09.2026): Tage jenseits des Archivs sind nicht mehr
   anklickbar, und wo kein Fahrplan vorliegt, steht das statt "keine Abfahrten".
   Grund: die Bedienelemente versprachen 60 Tage, das Archiv reicht rund 21. */
.fp-day.is-off{opacity:.38;cursor:default;background:#f8fafc}
.fp-day.is-off .wd,.fp-day.is-off .dm{color:#94a3b8}
.fp-nav:disabled{opacity:.35;cursor:default}
.fp-nav:disabled:hover{background:#fff;color:#475569}
.fp-empty.is-nodata{color:#475569}
.fp-empty-cta{display:block;width:fit-content;margin:12px auto 0;background:#F97316;color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;font-size:14px}
.fp-empty-cta:hover{background:#ea6a0c}


/* Klickbare Flaechen statt nur Knoepfe (03.09.2026).
   Aus der Klickkarte: Besucher tippen auf Uhrzeit, Reederei und Preis in der
   Fahrplanzeile und auf den Kasten des Suchfelds - beides tat bisher nichts.
   Die Zeile loest jetzt dasselbe aus wie der Buchen-Knopf, das Suchfeld
   oeffnet die Eingabe. Hier nur die sichtbare Rueckmeldung dazu. */
.fp-row{cursor:pointer}
@media (hover:hover){
  .fp-row:hover{background:#eef4fb}
  .fp-row.is-best:hover{background:#fff3e0 !important}
  .fp-row:hover .fp-book{background:#ea6a0c}
}
.fld-route{cursor:text}
.fld-route.chosen{cursor:pointer}
.fld-route.chosen .route-ep{cursor:pointer}