/* ============================================================================
   fewo-info.de · Modern Look & Feel 2026 — gemeinsamer Kern (alle Seiten)
   Laden: als letztes Stylesheet NACH bootstrap.css, boating24.css, fewo-info.css
   ============================================================================ */
:root{--c-blue:#006699;--c-blue-700:#08597f;--c-green:#66cc33;--c-green-600:#57b528;--c-bg:#eef1f6;--c-surface:#fff;--c-ink:#1d2733;--c-muted:#687583;--c-line:#e7eaf0;--c-line-2:#dfe4ec;--r:14px;--sh:0 1px 2px rgba(16,24,40,.04),0 10px 26px rgba(16,24,40,.08);--shL:0 4px 10px rgba(16,24,40,.06),0 22px 48px rgba(16,24,40,.14);--t:.2s ease;}
body{background:var(--c-bg)!important;color:var(--c-ink)!important;-webkit-font-smoothing:antialiased;line-height:1.6;}
h1,h2,h3,h4,h5,h6{letter-spacing:-.01em;}
a{color:var(--c-blue);transition:color var(--t);}a:hover{color:var(--c-green-600);text-decoration:none;}
.colorblue{color:var(--c-blue)!important;}
hr{border-top:1px solid var(--c-line);opacity:1;}
main{position:relative;z-index:1;}

/* ---------- Header: Logo links bündig mit Content-Container ---------- */
main > .container-fluid,
#footerMenus > .container,
#footerMeta > .container{
  width:100%!important;max-width:1340px!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:15px!important;padding-right:15px!important;box-sizing:border-box!important;
}
header > .container-fluid{
  width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
  padding-left:15px!important;padding-right:15px!important;box-sizing:border-box!important;
}
header{border-bottom:0!important;}
header > .container-fluid{
  display:grid!important;grid-template-columns:1fr;align-items:center!important;gap:10px;
  padding-top:6px!important;padding-bottom:6px!important;margin-bottom:0!important;
  border-bottom:0!important;
}
#topmeta,#logo{padding:0!important;margin:0!important;width:100%!important;}
#logo{padding-top:10px!important;}
#topmeta.row,#logo.row{margin-left:0!important;margin-right:0!important;}
#topmeta.row::before,#topmeta.row::after,#logo.row::before,#logo.row::after{display:none!important;content:none!important;}
#topmeta{display:flex!important;align-items:center!important;justify-content:flex-end!important;}
#logo{display:flex!important;flex-wrap:wrap;align-items:center!important;gap:14px;justify-content:flex-start!important;}
#logo > [class*="col-"]{float:none!important;width:auto!important;max-width:none!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;}
#logo .logoarea{margin:0!important;padding:0!important;}
#logo .logoarea a{display:inline-block;line-height:0;margin:0!important;padding:0!important;}
#logo .logoarea img.logo{display:block;height:44px!important;width:auto!important;max-width:none!important;min-width:0!important;max-height:none!important;object-fit:contain;}
#logo .claim{display:flex;align-items:center;padding:0!important;margin:0!important;}
#logo .claim h4{font-size:15px!important;font-weight:500!important;color:var(--c-muted)!important;margin:0!important;letter-spacing:0;line-height:1.2!important;min-height:0!important;}
#loginbox{border-radius:9px;overflow:hidden;float:none!important;margin:0!important;height:36px!important;display:flex!important;align-items:center!important;}
#loginbox .container-fluid{padding:0!important;margin:0!important;min-width:0!important;height:100%!important;display:flex!important;align-items:center!important;}
#loginbox ul{display:flex!important;align-items:center!important;height:100%!important;margin:0!important;}
#loginbox ul li{display:flex!important;align-items:center!important;height:100%!important;}
#loginbox ul li a{display:flex!important;align-items:center!important;font-weight:600;height:100%!important;}
@media (min-width:768px){
  header > .container-fluid{grid-template-columns:minmax(0,1fr) auto!important;gap:16px!important;min-height:0!important;padding-top:6px!important;padding-bottom:6px!important;}
  #logo{grid-column:1!important;grid-row:1!important;width:auto!important;min-width:0!important;flex-wrap:nowrap!important;}
  #topmeta{grid-column:2!important;grid-row:1!important;width:auto!important;justify-self:end!important;}
}

/* ---------- Hero-Bild ---------- */
#searchFormWrapper,#heroImage > #searchFormWrapper.fixed-search{border:0!important;border-top:0!important;border-bottom:0!important;}
/* fewo-info.css: 100px/150px Padding — großer Leerraum unter Logo/Buttons */
#heroImage > #searchFormWrapper:not(.fixed-search){padding:12px 15px 28px 15px!important;}
@media (min-width:992px){
  #heroImage > #searchFormWrapper:not(.fixed-search){padding:0 15px 20px!important;}
}
/* Hero-Bild: scharfe Kante unten (kein Ausfadungs-Gradient) */
#heroImage{position:relative!important;min-height:300px;border-bottom:0!important;box-shadow:none!important;}
#heroImage > #searchFormWrapper{position:relative;z-index:2;}
#heroImage::after{display:none!important;}
/* Große Bildschirme: festes Seitenverhältnis 32:7, Suchleiste vertikal zentriert */
@media (min-width:992px){
  #heroImage{aspect-ratio:32 / 7!important;min-height:0!important;height:auto!important;}
  #heroImage > #searchFormWrapper:not(.fixed-search){min-height:0!important;height:100%!important;display:flex!important;flex-direction:column;justify-content:center!important;}
}
/* Sticky Suchleiste: Hero-CSS setzt position:relative und blockiert sonst .fixed-search */
#heroImage > #searchFormWrapper.fixed-search{
  position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;
  z-index:1000!important;padding:0!important;margin:0!important;height:auto!important;min-height:0!important;
  display:block!important;background-color:rgba(0,102,153,.95)!important;
  box-shadow:0 3px 5px rgba(0,0,0,.2)!important;
}
#searchFormWrapper.fixed-search #searchForm{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
  max-width:1340px!important;margin:0 auto!important;padding:8px!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
}
.fixed-search .stickyLogo{
  display:block!important;float:none!important;flex:0 0 auto!important;
  width:128px!important;margin:0 36px 0 0!important;padding:0!important;
}
.fixed-search .stickyLogo a{display:block;line-height:0;}
.fixed-search .stickyLogo img{display:block;width:100%;height:auto;max-height:34px;object-fit:contain;}

/* ---------- Suchfeld: schwebende weiße Karte ---------- */
#searchForm{display:flex!important;justify-content:center;align-items:center;border-radius:20px!important;width:100%;max-width:920px;padding:10px!important;background-color:rgba(0,102,153,.92)!important;box-shadow:0 3px 5px rgba(0,0,0,.18)!important;}
#searchForm .zoekboek{
  background:#fff;border-radius:14px;box-shadow:0 14px 38px rgba(16,24,40,.22);
  padding:8px 10px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  flex:1 1 auto;min-width:0;max-width:920px;width:100%;box-sizing:border-box;
}
#searchForm .zoekboek select,#searchForm .zoekboek button{float:none!important;}
#searchFormWrapper.fixed-search .zoekboek{
  flex:1 1 auto!important;min-width:0!important;max-width:none!important;
  padding:6px 10px 6px 12px!important;gap:7px!important;
  border-radius:12px!important;box-shadow:0 8px 22px rgba(16,24,40,.16)!important;
}
#searchForm .form-group,#searchForm .input-daterange{margin:0!important;}
#searchForm .input-group{background:#f3f5f9;border:1px solid #e4e8ef;border-radius:9px;overflow:hidden;display:flex;align-items:center;width:auto;min-width:0;}
#searchForm .form-control{background:transparent!important;border:0!important;box-shadow:none!important;height:42px;font-size:14px;color:var(--c-ink);padding:0 8px!important;}
#searchForm .inputLocation{flex:1.5 1 0!important;min-width:0!important;}
#searchForm .input-daterange{flex:1.6 1 0!important;display:flex!important;gap:7px!important;min-width:0!important;}
#searchForm .input-daterange .form-group{flex:1 1 0!important;min-width:0!important;}
#searchForm .startDate,#searchForm .endDate{min-width:0!important;}
#searchForm .inputLocation .form-control,#searchForm .startDate .form-control,#searchForm .endDate .form-control{flex:1 1 auto;min-width:0!important;}
#searchForm .form-group.inputLocation label,
#searchForm .form-group.startDate label,
#searchForm .form-group.endDate label,
#searchForm .input-group label{
  position:static!important;right:auto!important;top:auto!important;transform:none!important;
  margin:0!important;padding:0 10px 0 2px!important;display:flex!important;align-items:center!important;
  background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:0!important;
  flex-shrink:0!important;pointer-events:none!important;z-index:auto!important;
}
#searchForm .input-group label .fa{color:var(--c-blue);font-size:14px;}
#searchForm .selectPersons{flex:0 0 auto!important;max-width:96px!important;min-width:0!important;position:relative!important;}
#searchForm .selectPersons:has(.btn){flex:0 0 auto!important;max-width:none!important;}
#searchForm .form-group.selectPersons label{top:50%!important;right:10px!important;transform:translateY(-50%)!important;margin:0!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:0!important;font-size:13px!important;}
#searchForm .form-group.selectPersons label .fa{color:var(--c-blue)!important;font-size:14px;}
#searchForm .selectPersons .form-control{background:#f3f5f9!important;border:1px solid #e4e8ef!important;border-radius:9px;height:42px;padding:0 22px 0 8px!important;width:100%!important;max-width:96px!important;min-width:72px!important;font-size:13px!important;}
#searchForm .btn-fewogreen.btn-lg{height:42px;border-radius:9px;padding:0 18px!important;font-size:15px;white-space:nowrap;flex-shrink:0!important;margin:0!important;}
#searchFormWrapper.fixed-search .form-control{height:38px!important;font-size:13px!important;}
#searchFormWrapper.fixed-search .input-group{border-radius:8px!important;}
#searchFormWrapper.fixed-search .input-group label{padding:0 8px 0 2px!important;}
#searchFormWrapper.fixed-search .input-group label .fa{font-size:13px!important;}
#searchFormWrapper.fixed-search .selectPersons{max-width:88px!important;}
#searchFormWrapper.fixed-search .selectPersons .form-control{height:38px!important;max-width:88px!important;min-width:68px!important;font-size:12px!important;border-radius:8px!important;padding:0 20px 0 8px!important;}
#searchFormWrapper.fixed-search .form-group.selectPersons label{right:8px!important;font-size:12px!important;}
#searchFormWrapper.fixed-search .form-group.selectPersons label .fa{font-size:13px!important;}
#searchFormWrapper.fixed-search .btn-fewogreen.btn-lg{height:38px!important;padding:0 16px!important;font-size:14px!important;border-radius:8px!important;}

/* ---------- Karten-Grundfläche ---------- */
.articlebody.articlebox--white--shadow,.articlebox--white--shadow{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);box-shadow:var(--sh);background-image:none!important;}

/* ---------- Buttons ---------- */
.btn{border-radius:9px;font-weight:700;border:1px solid transparent;box-shadow:none!important;background-image:none!important;transition:background-color var(--t),transform var(--t);}
.btn:active{transform:translateY(1px);}
.btn-fewogreen,.btn-success{background:var(--c-green)!important;color:#fff!important;border-color:var(--c-green)!important;}
.btn-fewogreen:hover,.btn-success:hover{background:var(--c-green-600)!important;border-color:var(--c-green-600)!important;}
.btn-primary{background:var(--c-blue)!important;border-color:var(--c-blue)!important;color:#fff!important;}
.btn-primary:hover{background:var(--c-blue-700)!important;border-color:var(--c-blue-700)!important;}

/* ---------- Sektionsüberschriften ---------- */
.heading .title{padding:5px;display:inline-block;background-color:#edf1f5;z-index:3;}
.heading .title h3{font-weight:800!important;color:var(--c-blue)!important;font-size:22px;}
.heading .title h3 .glyphicon,.heading .title h3 .fa{color:var(--c-green-600);}
.heading hr{border-top:1px solid var(--c-line-2);}

/* ---------- Willkommen-Boxen: EINE verbundene Karte mit Kopfleiste ---------- */
.welcomebox{background:#fff;border:1px solid var(--c-line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;height:100%;}
.welcomebox header{display:block!important;width:100%!important;background:var(--c-blue)!important;background-image:none!important;color:#fff!important;margin:0!important;padding:16px 24px!important;border:0!important;border-radius:0!important;transform:none!important;box-shadow:none!important;}
.welcomebox header h2{color:#fff!important;margin:0!important;font-size:18px!important;font-weight:700!important;}
.welcomebox .articlebody{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:22px 24px 24px!important;}
.welcomebox .articlebox--ribbon.blue{display:block;background:transparent!important;color:var(--c-blue)!important;padding:6px 0 0!important;margin:0!important;transform:none!important;box-shadow:none!important;}
.welcomebox .articlebox--ribbon.blue h3{margin:2px 0 0!important;color:var(--c-blue)!important;font-size:17px!important;font-weight:700!important;}
/* Info-/Kompass-Icon: kleiner + Abstand zum Text */
.welcomebox .row.spacer5,.welcomebox .row.spacer{display:flex;align-items:flex-start;}
.welcomebox .big-icon{font-size:20px!important;padding-right:10px!important;width:auto!important;flex:0 0 auto!important;text-align:center;}
.welcomebox .big-icon .fa{font-size:20px!important;}
.welcomebox .row.spacer5 .col-xs-11,.welcomebox .row.spacer .col-xs-11{flex:1;padding-left:8px;}

/* ---------- Kartenbereich-Platzhalter ---------- */
.awmp-map,.awmp-gmap{background:var(--c-bg)!important;border:1px dashed var(--c-line-2)!important;border-radius:10px;min-height:300px;display:flex!important;align-items:center;justify-content:center;color:var(--c-muted);}
.awmp-map::after,.awmp-gmap::after{content:"Kartenansicht";font-weight:600;}

/* ---------- Länder-Sektion: gleichmäßiges CSS-Grid + Bild-Overlay-Titel ---------- */
#sectionCountries{display:grid!important;grid-template-columns:1fr;gap:20px;align-items:stretch!important;}
@media (min-width:768px){#sectionCountries{grid-template-columns:repeat(2,1fr);gap:22px;}}
@media (min-width:992px){#sectionCountries{grid-template-columns:repeat(3,1fr);gap:24px;}}
@media (min-width:1200px){#sectionCountries{grid-template-columns:repeat(4,1fr);gap:26px;}}
#sectionCountries .heading{grid-column:1 / -1;margin:32px 0 24px;padding-bottom:6px;}
#sectionCountries > div[class*="col-"]{display:flex!important;width:auto!important;max-width:none!important;float:none!important;padding:0!important;margin:0!important;}
#sectionCountries > div[class*="col-"] > a{display:flex!important;flex:1 1 auto;flex-direction:column;width:100%;}
article.country{display:flex!important;flex:1 1 auto;flex-direction:column;width:100%!important;}
article.country .articlebody{position:relative;display:flex!important;flex:1 1 auto;flex-direction:column;padding:0!important;overflow:hidden;height:100%!important;min-height:0!important;transition:transform var(--t),box-shadow var(--t);}
article.country .articlebody:hover{transform:translateY(-4px);box-shadow:var(--shL);}
article.country .imagewrapper{position:relative;flex:0 0 auto;margin:0!important;height:190px!important;min-height:0!important;border-radius:0!important;overflow:hidden;}
article.country .imagewrapper img{height:190px!important;width:100%!important;object-fit:cover!important;display:block!important;transition:transform .4s ease;}
article.country .articlebody:hover .imagewrapper img{transform:scale(1.06);}
article.country .imagewrapper::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(12,20,28,.8),rgba(12,20,28,0));pointer-events:none;}
article.country .articlebox--ribbon,article.country .articlebox--ribbon.green{position:absolute!important;left:16px;top:158px;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;width:auto!important;height:auto!important;z-index:3;border-radius:0!important;}
article.country .articlebox--ribbon h3{margin:0!important;padding:0!important;color:#fff!important;font-size:21px!important;font-weight:800!important;line-height:1.1!important;text-shadow:0 1px 4px rgba(0,0,0,.55);position:static!important;transform:none!important;}
article.country .caption{display:flex!important;flex:1 1 auto;flex-direction:column;position:static!important;background:#fff!important;padding:12px 16px 16px!important;min-height:0!important;width:auto!important;}
article.country .caption p{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;width:auto!important;color:var(--c-muted)!important;font-size:13.5px;line-height:1.45;margin:0;}

/* ---------- Europa-Städte: Chevron + stärkere Schrift ---------- */
#sectionEurope ul.cols{border-top:0!important;padding-top:0!important;column-gap:24px!important;}
@media (min-width:768px){#sectionEurope ul.cols{column-count:2!important;column-gap:28px!important;}}
@media (min-width:992px){#sectionEurope ul.cols{column-count:3!important;column-gap:30px!important;}}
@media (min-width:1200px){#sectionEurope ul.cols{column-count:4!important;column-gap:32px!important;}}
#sectionEurope ul.cols li{line-height:1.35!important;padding:2px 0!important;margin:0!important;}
#sectionEurope ul.cols li a{display:inline-grid!important;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;font-weight:600!important;color:var(--c-ink)!important;line-height:1.35!important;}
#sectionEurope ul.cols li a::before{content:"\f054";font-family:FontAwesome;font-weight:400;color:var(--c-green);font-size:10px;line-height:1;margin:0;align-self:center;}
@media (min-width:1200px){#sectionEurope ul.cols li a{white-space:nowrap!important;}}
#sectionEurope ul.cols li a:hover{color:var(--c-blue)!important;}
#sectionEurope ul.cols li a:hover::before{color:var(--c-green-600);}

/* ---------- Footer: helle Schrift auf dunklem Grund ---------- */
footer{position:relative!important;background:var(--c-blue)!important;background-image:none!important;box-shadow:none!important;}
#footerMenus{padding:52px 0 48px!important;background:transparent!important;background-image:none!important;}
#footerMeta{position:relative!important;bottom:auto!important;width:100%!important;padding:24px 0 28px!important;background:var(--c-blue-700)!important;background-image:none!important;}
#footerMenus,#footerMenus h3,#footerMenus h4,#footerMenus p,#footerMenus li{color:#eaf2f7!important;}
#footerMenus h3{color:#fff!important;font-weight:700;}
#footerMenus a{color:#cfe0ea!important;}
#footerMenus a:hover{color:#fff!important;}
#footerMeta a{color:var(--c-green);}

/* Bild-Platzhalter (per JS gesetzt, wenn ein Bild nicht laedt) */
img.is-placeholder{background:var(--c-line-2)!important;object-fit:cover;}

/* ---------- Mobile (max-width: 767px) ---------- */
@media (max-width:767px){
  /* Allow layouts from 340px (override legacy min-width:375/400) */
  html,body{min-width:0!important;overflow-x:hidden!important;}
  .container-fluid,.container,#heroImage,footer,header{min-width:0!important;max-width:100%!important;}

  /* Header: full viewport width on mobile */
  header > .container-fluid{max-width:100%!important;width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;gap:6px!important;padding-top:4px!important;padding-bottom:4px!important;}
  #topmeta{display:flex!important;width:100%!important;justify-content:center!important;}
  #logo{padding-top:4px!important;justify-content:center!important;flex-direction:column!important;align-items:center!important;gap:6px!important;text-align:center!important;width:100%!important;}
  #logo > [class*="col-"]{justify-content:center!important;width:100%!important;}
  #logo .claim h4{text-align:center!important;font-size:14px!important;}
  #loginbox{margin:0 auto!important;height:auto!important;}
  #loginbox ul{justify-content:center!important;flex-wrap:wrap!important;gap:4px!important;}
  #loginbox ul li a{font-size:12px!important;padding:6px 10px!important;}
  img.logo{margin-top:0!important;height:40px!important;}

  /* Hero: less vertical bloat on small screens */
  #heroImage{min-height:0!important;}
  #heroImage > #searchFormWrapper:not(.fixed-search){padding:10px 12px 24px!important;}

  /* More space between search bar and first content card */
  main{padding-top:32px!important;}

  /* Search form: stack all inputs full width */
  #searchForm{padding:12px!important;border-radius:14px!important;}
  #searchForm .zoekboek{flex-direction:column!important;flex-wrap:wrap!important;align-items:stretch!important;gap:10px!important;width:100%!important;max-width:none!important;}
  #searchForm .form-group,
  #searchForm .input-daterange,
  #searchForm .input-daterange .form-group,
  #searchForm .input-group,
  #searchForm .inputLocation,
  #searchForm .startDate,
  #searchForm .endDate,
  #searchForm .selectPersons{width:100%!important;max-width:none!important;flex:1 1 auto!important;float:none!important;box-sizing:border-box!important;}
  #searchForm .input-daterange{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important;}
  #searchForm .form-group.startDate,
  #searchForm .form-group.endDate,
  #searchForm .startDate,
  #searchForm .endDate{float:none!important;padding-right:0!important;padding-left:0!important;}
  #searchForm .startDate .input-group,
  #searchForm .endDate .input-group{width:100%!important;max-width:100%!important;}
  #searchForm .zoekboek.text-nowrap{white-space:normal!important;}
  #searchForm .form-inline .form-group{display:block!important;}
  #searchForm .selectPersons .form-control,
  #searchForm .btn-fewogreen.btn-lg{width:100%!important;max-width:none!important;box-sizing:border-box!important;}
  #searchForm .form-group.selectPersons label{right:12px!important;}

  /* Welcome cards: no equalized min-height, gap + edge inset */
  .welcomebox{height:auto!important;}
  .welcomebox .fullheight{min-height:0!important;height:auto!important;}
  .welcomebox .awmp-map,.welcomebox .awmp-gmap{height:220px!important;min-height:0!important;}
  main > .container-fluid > .row:first-child{display:flex!important;flex-direction:column!important;gap:16px!important;margin-left:0!important;margin-right:0!important;margin-top:0!important;}
  main > .container-fluid > .row:first-child > [class*="col-"]{padding-left:15px!important;padding-right:15px!important;float:none!important;width:100%!important;max-width:100%!important;}

  /* Country grid: horizontal inset from screen edges */
  main > .container-fluid > .row:has(#sectionCountries){margin-left:0!important;margin-right:0!important;}
  #sectionCountries{padding-left:15px!important;padding-right:15px!important;gap:16px!important;}
  #sectionCountries .heading{padding-left:0!important;padding-right:0!important;}
}