/* ===== Tablet 751–1000 px (Referenz 768) und Handy bis 750 px (Referenz 390) =====
   --t / --h = 1 Original-Pixel bei 768 / 390 Breite, wächst mit der Fensterbreite */

@media (max-width: 1000px) {
  :root { --t: calc(100vw / 768); }
  html.js { scroll-padding-top: calc(134 * var(--t)); }
  .v-gross, .start-welle-gross { display: none; }
  .v-tablet, .start-welle-tablet { display: inline; }
  .start-welle-tablet { display: block; }
  .fuss-welle { display: none; }

  /* Kopf */
  .kopf { height: calc(134 * var(--t)); }
  .kopf-nav { display: none; }
  .menue-knopf { display: flex; left: calc(61 * var(--t)); top: calc(50% - 12px); }
  .kopf > .sprachen { left: calc(265 * var(--t)); }
  .logo { left: calc(488 * var(--t)); top: calc(18 * var(--t)); width: calc(242 * var(--t)); height: calc(98 * var(--t)); }
  .logo-bild { width: calc(204 * var(--t)); }
  .logo-zusatz { left: calc(142 * var(--t)); top: calc(18 * var(--t)); font-size: calc(12.95 * var(--t)); }

  /* Start */
  .start { height: calc(830 * var(--t)); }
  .start-welle-tablet { left: calc(-57 * var(--t)); top: calc(-125 * var(--t)); width: calc(881 * var(--t)); height: calc(881 * var(--t)); }
  .start-inhalt { left: calc(61 * var(--t)); top: calc(115 * var(--t)); width: calc(438 * var(--t)); }
  .start-titel { font-size: calc(30.6 * var(--t)); }
  .start-text { width: calc(384 * var(--t)); margin-top: calc(6 * var(--t)); }
  .start .knopf { margin-top: calc(18 * var(--t)); }

  /* Über */
  .ueber { padding-top: calc(23 * var(--t)); }
  .bereich-titel { font-size: 40px; line-height: 52px; }
  .ueber-spalten { grid-template-columns: calc(302 * var(--t)) calc(224 * var(--t)); column-gap: calc(20 * var(--t)); width: auto; margin: calc(19 * var(--t)) 0 0 calc(103 * var(--t)); }
  .ueber-text p { width: calc(302 * var(--t)); margin-top: calc(2 * var(--t)); }
  .werte li { width: calc(216 * var(--t)); }
  .werte li.werte-welle { width: 41px; height: 19px; margin: 0 0 0 -4px; }
  .werte-welle svg { width: 41px; height: 19px; }

  /* Service */
  .service { padding: calc(157 * var(--t)) 0 calc(23 * var(--t)); }
  .service-inhalt { width: calc(614 * var(--t)); }
  .service-text { width: 100%; margin-top: calc(20 * var(--t)); line-height: 1.4; }
  .service-welle { width: 41px; height: 19px; margin: calc(9 * var(--t)) auto; }
  .service-instagram { width: calc(405 * var(--t)); margin: 0 auto; line-height: 1.4; }
  .kacheln { grid-template-columns: repeat(2, 1fr); margin-top: calc(32 * var(--t)); }
  .kachel { height: calc(218 * var(--t)); }
  .kachel-ebene { left: 8.4%; top: 8%; width: 83.2%; height: 84%; padding: calc(12 * var(--t)) calc(12 * var(--t)) calc(14 * var(--t)); }
  .kachel-ebene-titel { font-size: calc(12.29 * var(--t)); }
  .kachel-ebene p { margin-top: calc(8 * var(--t)); font-size: calc(10.9 * var(--t)); }
  .kachel-ebene .knopf { width: 85px; }

  /* Dienstleistungen */
  .dienst { padding: calc(60 * var(--t)) 0 calc(39 * var(--t)); }
  .dienst .bereich-titel { width: calc(665 * var(--t)); margin: 0 auto; overflow-wrap: anywhere; }
  .karten { grid-template-columns: 1fr; gap: calc(11 * var(--t)); width: calc(461 * var(--t)); margin-top: calc(37 * var(--t)); }
  .karte { min-height: calc(427 * var(--t)); padding: calc(23 * var(--t)) calc(23 * var(--t)) calc(24 * var(--t)); }
  .karte-punkte { margin: calc(20 * var(--t)) 0 calc(40 * var(--t)); }
  .karte-punkte p { margin-top: calc(5 * var(--t)); }
  .karte-punkte p:first-of-type { font-size: 16px; line-height: 1.6; }
  .karte-punkte p + h4 { margin-top: calc(19 * var(--t)); }

  /* Team */
  .team { padding: calc(138 * var(--t)) 0 calc(155 * var(--t)); }
  .team .bereich-titel { line-height: 48px; }
  .team-inhalt { width: calc(614 * var(--t)); }
  .team-text { width: 100%; margin-top: calc(11 * var(--t)); }
  .personen { grid-template-columns: repeat(2, calc(291 * var(--t))); justify-content: center; column-gap: calc(22 * var(--t)); row-gap: calc(12 * var(--t)); margin-top: calc(30 * var(--t)); }
  .person:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(291 * var(--t)); }
  .person img { width: calc(281 * var(--t)); height: calc(281 * var(--t)); }
  .person-name { margin-top: calc(16 * var(--t)); font-size: calc(19.49 * var(--t)); }
  .person-rolle { margin-top: calc(12 * var(--t)); font-size: calc(15.59 * var(--t)); }
  .person-mail, .person-tel { font-size: calc(14.03 * var(--t)); }
  .person-mail { margin-top: calc(11 * var(--t)); }
  .person-tel { margin-top: calc(10 * var(--t)); }

  /* Fuss */
  .fuss { padding-top: calc(77 * var(--t)); background: linear-gradient(90deg, rgb(0, 74, 94) 0%, rgb(3, 57, 73) 47.5466%, rgb(9, 51, 60) 76.7441%); }
  .fuss-inhalt { display: flex; flex-direction: column; padding: 0 0 0 calc(77 * var(--t)); }
  .fuss-adressen { order: 2; gap: 0; margin: calc(82 * var(--t)) 0 0 calc(1 * var(--t)); align-self: start; }
  .adresse:first-child { width: calc(342 * var(--t)); }
  .adresse:last-child { width: calc(269 * var(--t)); }
  .adresse h3 { font-size: 18px; }
  .formular-titel { margin-left: 0; font-size: 30px; }
  .formular-text, .formular { width: calc(566 * var(--t)); margin-left: calc(24 * var(--t)); }
  .formular-text { margin-top: calc(33 * var(--t)); }
  .formular { column-gap: 24px; }
  .senden { width: calc(271 * var(--t)); }
  .fuss-unten { padding: calc(130 * var(--t)) calc(86 * var(--t)) calc(76 * var(--t)) calc(51 * var(--t)); align-items: flex-end; }
  .fuss-recht { width: calc(262 * var(--t)); }
  .fuss-recht a { padding: 0 6px; height: 24px; }
}

@media (max-width: 750px) {
  :root { --h: calc(100vw / 390); }
  html.js { scroll-padding-top: 72px; }
  .v-tablet, .start-welle-tablet { display: none; }
  .v-handy { display: inline; }
  .start-welle-handy { display: block; }

  /* Kopf */
  .kopf { height: calc(158 * var(--h)); }
  .menue-knopf { left: auto; right: calc(19 * var(--h)); top: calc(12 * var(--h)); }
  .kopf > .sprachen { left: calc(7 * var(--h)); top: calc(8 * var(--h)); transform: none; }
  .kopf > .sprachen a { height: min(42px, calc(44 * var(--h))); }
  .logo { left: calc(30 * var(--h)); top: calc(53 * var(--h)); width: calc(330 * var(--h)); height: calc(97 * var(--h)); }
  .logo-bild { width: calc(288 * var(--h)); }
  .logo-zusatz { left: calc(196 * var(--h)); top: calc(24 * var(--h)); font-size: calc(12.37 * var(--h)); }

  /* Beim Scrollen bleiben Wortmarke, Sprachwahl und Menü in einer Zeile. */
  .kopf.kopf-fest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 64px;
    padding: 0 12px;
  }
  .kopf-fest > .logo { position: relative; inset: auto; order: 0; width: clamp(80px, 25vw, 108px); height: 42px; }
  .kopf-fest .logo-bild { inset: 0; width: 100%; height: 100%; }
  .kopf-fest .logo-bild svg { transform: scale(1.68); }
  .kopf-fest .logo-zusatz { display: none; }
  .kopf.kopf-fest > .sprachen { position: static; transform: none; order: 1; }
  .kopf.kopf-fest > .sprachen a { width: clamp(34px, 10vw, 44px); height: 44px; }
  .kopf-fest > .menue-knopf { position: relative; inset: auto; order: 2; width: 44px; height: 44px; padding: 12px 7px; }

  /* Start */
  .start { height: calc(841 * var(--h)); }
  .start .trenner { height: 100px; }
  .start-welle-handy { left: calc(-209 * var(--h)); top: calc(-21 * var(--h)); width: calc(808 * var(--h)); height: calc(808 * var(--h)); }
  .start-inhalt { left: calc(31 * var(--h)); top: calc(195 * var(--h)); width: calc(328 * var(--h)); }
  .start-titel { font-size: calc(20.8 * var(--h)); }
  .start-text { width: 100%; margin-top: calc(13 * var(--h)); font-size: 16px; }
  .start .knopf { margin-top: calc(31 * var(--h)); }

  /* Über */
  .ueber { padding: calc(19 * var(--h)) calc(20 * var(--h)) calc(20 * var(--h)); text-align: center; }
  .ueber-spalten { display: block; margin: 0; }
  .ueber-text .klein-titel { margin-top: calc(23 * var(--h)); }
  .ueber-text p { width: 100%; margin-top: calc(16 * var(--h)); }
  .ueber-werte { margin-top: calc(29 * var(--h)); }
  .werte { padding: 0; }
  .werte li { width: auto; }
  .werte li.werte-welle { margin: 6px auto 5px; }

  /* Service */
  .service { padding: calc(108 * var(--h)) 0 calc(11 * var(--h)); }
  .service .trenner-oben, .team .trenner-oben, .team .trenner-unten { height: 100px; }
  .service .trenner-unten { height: 50px; }
  .service-inhalt { width: calc(351 * var(--h)); }
  .service-text { margin-top: calc(15 * var(--h)); font-size: 16px; }
  .service-welle { margin: calc(16 * var(--h)) auto calc(15 * var(--h)); }
  .service-instagram { width: 100%; font-size: 16px; }
  .kacheln { grid-template-columns: 1fr; margin-top: calc(18 * var(--h)); }
  .kachel { height: calc(321.7 * var(--h)); }
  .kachel-ebene { padding: calc(16 * var(--h)) calc(16 * var(--h)) calc(18 * var(--h)); }
  .kachel-ebene-titel { font-size: calc(13.87 * var(--h)); }
  .kachel-ebene p { margin-top: calc(10 * var(--h)); font-size: calc(12.3 * var(--h)); }
  .kachel-ebene .knopf { width: 97px; }

  /* Dienstleistungen */
  .dienst { padding: calc(39 * var(--h)) 0 calc(20 * var(--h)); }
  .dienst .bereich-titel { width: calc(351 * var(--h)); line-height: 44px; overflow-wrap: normal; }
  .karten { gap: calc(13 * var(--h)); width: calc(351 * var(--h)); margin-top: calc(27 * var(--h)); }
  .karte { min-height: calc(434 * var(--h)); padding: calc(18 * var(--h)) calc(15 * var(--h)) calc(17 * var(--h)) calc(17 * var(--h)); }
  .karte-titel { font-size: 18px; line-height: 1.3; }
  .karte-punkte { margin: calc(15 * var(--h)) 0 calc(36 * var(--h)); }
  .karte-punkt-titel { font-size: 16px; }
  .karte-punkte p { margin-top: calc(4 * var(--h)); }
  .karte-punkte p + h4 { margin-top: calc(14 * var(--h)); }

  /* Team */
  .team { padding: calc(98 * var(--h)) 0 calc(134 * var(--h)); }
  .team-inhalt { width: calc(351 * var(--h)); }
  .team-text { margin-top: calc(16 * var(--h)); }
  .personen { grid-template-columns: 1fr; row-gap: calc(104 * var(--h)); margin-top: calc(41 * var(--h)); }
  .person:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
  .person img { width: calc(200 * var(--h)); height: calc(200 * var(--h)); }
  .person-name { margin-top: calc(19 * var(--h)); font-size: calc(21.67 * var(--h)); }
  .person-rolle { margin-top: calc(14 * var(--h)); font-size: calc(11.39 * var(--h)); }
  .person-mail, .person-tel { font-size: calc(18.72 * var(--h)); }
  .person-mail { margin-top: calc(14 * var(--h)); }
  .person-tel { margin-top: calc(6 * var(--h)); }

  /* Fuss */
  .fuss { padding-top: calc(23 * var(--h)); }
  .fuss-inhalt { padding: 0 calc(20 * var(--h)); }
  .formular-titel { font-size: 30px; }
  .formular-text, .formular { width: calc(303 * var(--h)); margin-left: calc(24 * var(--h)); }
  .formular-text { margin-top: calc(39 * var(--h)); }
  .formular { grid-template-columns: 1fr; }
  .feld-halb { grid-column: 1 / -1; }
  .senden { width: 100%; }
  .fuss-adressen { flex-direction: column; align-items: center; gap: calc(64 * var(--h)); margin: calc(58 * var(--h)) 0 0; align-self: stretch; text-align: center; }
  .adresse:first-child, .adresse:last-child { width: auto; }
  .adresse-welle { width: 41px; height: 19px; margin: 9px auto 5px; }
  .fuss-unten { flex-direction: column-reverse; align-items: center; gap: calc(14 * var(--h)); padding: calc(40 * var(--h)) 0 calc(19 * var(--h)); text-align: center; }
  .fuss-recht { width: auto; justify-content: center; gap: 0; }
  .fuss-recht a { padding: 0 4px; height: 30px; font-size: 13px; }
  .credit { font-size: 18px; }

  .menue-handy nav ul { margin-top: calc(40 * var(--h)); }
}

/* Schmale Handys: lange Wörter dürfen umbrechen (wie Wix), grosse Titel unter 390 px proportional kleiner */
@media (max-width: 750px) {
  h1, h2, h3, h4, .recht p, .recht li, .credit, .fuss-recht a { overflow-wrap: anywhere; }
  .dienst .bereich-titel { overflow-wrap: anywhere; }
  .bereich-titel { font-size: min(40px, calc(40 * var(--h))); line-height: 1.3; }
  .dienst .bereich-titel { line-height: 1.1; }
  .team .bereich-titel { line-height: 1.2; }
  .formular-titel, .recht h1 { font-size: min(30px, calc(30 * var(--h))); }
  .klein-titel { font-size: min(20px, calc(20 * var(--h))); }
  .karte-titel { font-size: min(18px, calc(18 * var(--h))); }
  .karte-punkt-titel, .recht h3 { font-size: min(16px, calc(16 * var(--h))); }
  .recht h2 { font-size: min(20px, calc(20 * var(--h))); }
}

/* Kleiner Desktop 1001–1279 px (iPad quer, kleine Laptops): feste Titel proportional kleiner (Sprachwahl: siehe kopf.css) */
@media (min-width: 1001px) {
  .bereich-titel, .recht h1 { font-size: min(50px, calc(75 * var(--e))); }
  .karte-titel, .klein-titel, .recht h2 { font-size: min(20px, calc(30 * var(--e))); }
  .karte-punkt-titel, .recht h3 { font-size: min(18px, calc(27 * var(--e))); }
  .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bereich-titel, .karte-titel, .karte-punkt-titel, .recht h1, .recht h2, .recht h3 { overflow-wrap: anywhere; }
}