@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2); 
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #000000;
    --textAccent: #7D00FF;
    --light: rgba(38, 50, 56, 0.035);
    --dark: rgba(38, 50, 56, 1);
    --ctaYellow: #ffff00;
    --ctaText: #000000;
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: invert(48%) sepia(77%) saturate(2894%) hue-rotate(168deg) brightness(96%) contrast(101%);}

/*------------ CSS overrides below --------------*/
.tablepress {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.tablepress td {
    padding: 10px 0;

}

.tablepress thead tr {
    background-color: #ffff00;
    color: #000;
}

.tablepress thead tr th {
    padding: 10px;
}

.tablepress .column-1 {
    text-align: left;
}

.tablepress .column-2 {
    text-align: right;
}

.tablepress tbody td,
.tablepress tfoot th {
    border-top: 1px solid rgba(38, 50, 56, 0.2);
}

/*------------------------*/
/* brick image3
/*------------------------*/

section.image3+section.image.alt {
    margin-top: 0 !important;
}

section.image3.alt {
    background: var(--dark);
    border-top: 0.1rem solid var(--dark);
    border-bottom: 0.1rem solid var(--dark);
}

section.image3.alt .container {
    direction: rtl;
}

section.image3.alt .container {
    color: #fff;
}

section.image3.alt .container>div {
    direction: ltr;
}

section.image3 .twocols .image3 {
    text-align: center;
    position: relative;
    height: 100%;
}

section.image3 .twocols .image3 img {
    width: auto;
    display: block;
    max-width: 85%;
    width: 100%;
    margin: auto;
}

section.image3.alt {
    padding: 4.5rem 0 6rem;
}

section.image3 h2 {
    color: #fff;
}

@media (max-width: 600px) {
    section.image3 .twocols .image3 {
        text-align: left;
    }
}
/* Section dark */
section.dark {
    background: var(--dark);
    color:#fff;
}
section.dark h2 {
    color: #fff;
}

/* */
body.transparent_header header:not(.sticky) img, body.transparent_header header:not(.sticky) nav > ul > li > a > img {
    /*filter: brightness(0) invert(1);*/
    }


.mobiltel {
    display: none;
}

/* Smartphone Portrait and Landscape */


@media only screen and (max-width: 600px) {
    .mobiltel {
        display: inline;
    }
}

.mobiltel {
    position: fixed;
    bottom: 0;
    background-color: #ffff00;
    text-align: center;
    width: 100%;
    z-index: 99999999;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    overflow: hidden;
    padding: 10px;
}

/* =========================================================
   MINIMAL PATCH: Gelb/Schwarz nur für Buttons (sparsam)
   Ziel: CTA-Buttons hervorheben, Rest-Design unverändert lassen
   ========================================================= */

/* Primary + Secondary Buttons: gelb/schwarz */
.button:not(.icon),
.button.secondary:not(.icon) {
  background: var(--ctaYellow) !important;
  color: var(--ctaText) !important;
  border-color: #000 !important;
}

/* Hover: invertiert (schwarz/gelb) */
.button:not(.icon):hover,
.button.secondary:not(.icon):hover {
  background: #000 !important;
  color: #ffff00 !important;
  border-color: #000 !important;
}

/* Ghost Buttons: NICHT global umlackieren (nur Hover konsistent) */
.button.ghost:hover {
  background: var(--ctaYellow) !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* Icon-Buttons (z.B. Social) nicht verfärben */
.button.icon,
.button.icon:hover {
  background: initial !important;
  color: inherit !important;
  border-color: initial !important;
}

/* =========================================================
   ICON LIST: Gelber Hintergrund + schwarze Linien (sparsam)
   Ziel: Akzent setzen, Lesbarkeit erhalten
   ========================================================= */

/* Kreis-Hintergrund gelb */
.features li.has_icon .image,
.features li.has_icon .image::before {
  background: #ffff00;
}

/* Kreis-Rahmen schwarz */
.features li.has_icon .image {
  border-color: #000;
}

/* Icon selbst schwarz */
.features li.has_icon .image img,
.features li.has_icon .image svg {
  filter: brightness(0);
  color: #000;
}

/* =========================================================
   HEADER CTA (Unsere Tarife): Outline schwarz + sauberes Hover/Focus
   Hinweis: Header wechselt je nach Scroll (sticky/non-sticky)
   ========================================================= */

/* Ensure header ghost button uses black border (override any accent-blue rules) */
header .button.ghost,
header.sticky .button.ghost,
body.transparent_header header:not(.sticky) .button.ghost {
  border-color: #000 !important;
}

/* Remove the accent-blue ghost outline (box-shadow) and replace with black */
header .button.ghost,
header.sticky .button.ghost,
body.transparent_header header:not(.sticky) .button.ghost {
  box-shadow: inset 0 0 0 0.1rem #000 !important;
}

/* In transparent header state, prevent header-footer.css from forcing accent background */
body.transparent_header header:not(.sticky) .button.ghost {
  background: transparent !important;
}

/* Optional: keep text black in non-transparent header */
header .button.ghost,
header.sticky .button.ghost {
  color: #000 !important;
}

/* Hover: invert to black background + yellow text for a premium CTA feel */
header .button.ghost:hover,
header.sticky .button.ghost:hover,
body.transparent_header header:not(.sticky) .button.ghost:hover {
  background: #000 !important;
  color: #ffff00 !important;
  border-color: #000 !important;
}

/* Focus ring: replace default blue focus with black (accessibility friendly) */
header .button.ghost:focus,
header .button.ghost:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}


/* =========================================================
   FOOTER SOCIAL ICONS: Hover von Blau auf Gelb ändern
   ========================================================= */

/* Normal state: light grey */
footer .button.icon img {
  filter: brightness(0) invert(1) opacity(0.6);
}

/* Hover: gelb statt blau */
footer .button.icon:hover img {
  filter: brightness(0) saturate(100%) invert(89%) sepia(100%) saturate(747%) hue-rotate(358deg) brightness(105%);
}

/* Optional: gelber Outline-Kreis beim Hover */
footer .button.icon:hover {
  box-shadow: inset 0 0 0 0.1rem #ffff00;
}
/* =========================================================
   FORM CLEANUP (Kontakt / Flughafentransfer)
   - Labels immer über dem Feld
   - Einheitliche Abstände
   - Time-Input optisch wie Textfeld
   ========================================================= */

/* Scope to contact page/forms */
section.contact form,
section.contact form * {
  box-sizing: border-box;
}

/* Force labels above fields */
section.contact form label {
  display: block;
  margin: 0 0 6px 0;
  line-height: 1.2;
  font-weight: 600;
  color: var(--textDark);
}

/* Normalize field spacing */
section.contact form .form-control,
section.contact form input[type="text"],
section.contact form input[type="email"],
section.contact form input[type="tel"],
section.contact form input[type="date"],
section.contact form input[type="time"],
section.contact form select,
section.contact form textarea {
  width: 100%;
  margin: 0 0 14px 0;
}

/* Two-column rows: consistent gap and no extra bottom margin */
section.contact form .twocols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 6px 0;
}

section.contact form .twocols > div {
  margin: 0;
}

/* Headings and separators: consistent rhythm */
section.contact form h3 {
  margin: 0 0 14px 0;
}

section.contact form h4 {
  margin: 18px 0 8px 0;
}

section.contact form hr {
  margin: 18px 0;
  opacity: 0.25;
}

/* Checkbox / radio blocks: align and tighten spacing */
section.contact form .checkbox,
section.contact form .radio {
  margin: 6px 0 14px 0;
}

section.contact form .checkbox label,
section.contact form .radio label {
  font-weight: 400;
  margin: 0 0 6px 0;
}

/* Submit spacing */
section.contact form .submit {
  margin-top: 10px;
}

/* Mobile: stack columns */
@media (max-width: 700px) {
  section.contact form .twocols {
    grid-template-columns: 1fr;
  }
}

/* Time input: make it look like a normal text field (visual) */
section.contact form input[type="time"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
section.contact form input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.65;
}

/* =========================================================
   FORM GRID ROWS (class-based)
   - Straße / Nr: 3fr / 1fr
   - PLZ / Ort: 1fr / 2fr
   - Datum / Uhrzeit: 1.3fr / 1fr
   ========================================================= */

section.contact form .twocols.row-streetno {
  grid-template-columns: 3fr 1fr;
}

section.contact form .twocols.row-zipcity {
  grid-template-columns: 1fr 2fr;
}

section.contact form .twocols.row-datetime {
  grid-template-columns: 1.3fr 1fr;
}