/* TC App-Seiten: gemeinsame Regeln.

   Aus den Landingpages uebernommen und unter .tc-app gescopt, damit sie das
   Theme nicht anfassen. Der Dunkelmodus der Landingpages ist entfernt, die
   Website kennt ihn nicht; Kopf- und Fusszeile liefert Astra.

   Jeder Selektor traegt .tc-app doppelt. Das ist Absicht: Elementors globales
   Kit setzt ueber .elementor-kit-10 h1..h6 und a die Schriften der Website,
   mit derselben Spezifitaet wie ein einfaches .tc-app h2, und seine Datei
   laedt nach dieser. Ohne die Verdopplung gewinnt das Kit.

   Die Schriften stehen in eigenen Dateien je Seite, weil die Landingpages
   unterschiedlich zugeschnittene Subsets mitbringen: tc-app-fonts-bde.css
   und tc-app-fonts-logistik.css.

   Alle Groessen stehen bewusst in px statt rem. Die Landingpage rechnet mit
   16px Grundschrift, Astra stellt aber 17px ein; ueber rem waere die ganze
   Seite rund sechs Prozent groesser und die Hero-Ueberschrift bricht dann
   an einer anderen Stelle um.
*/

/* ===================== Schriften ===================================== */

/* ===================== Farben ========================================
   Terracom-CD. Die Neutraltöne sind leicht magentastichig statt reines
   Grau - sie sollen wie gewählt wirken, nicht wie geerbt. ================ */
.tc-app.tc-app{--magenta:#e6007e;
  --magenta-hell:#ff0090;
  /* Magenta als Schriftfarbe fuer kleine Versalien. Das CD-Magenta
     erreicht auf Weiss genau 4.50 und faellt auf dem getoenten Grund
     auf 4.15 - also unter AA. Diese beiden Toene halten auf jedem
     Grund Abstand; Flaechen und Balken bleiben beim CD-Magenta. */
  --magenta-text:#d10071;
  --blau:#7acdee;

  --tinte:#151616;
  --tinte-2:#393c40;
  --grau:#65696f;
  --grau-still:#8d8a8c;

  --grund:#ffffff;
  --grund-2:#f7f5f6;
  --grund-3:#efebed;
  --linie:#e2dcdf;

  --karte:#ffffff;
  --karte-rand:#e6e0e3;
  --schatten:0 1px 2px rgba(21,22,22,.05), 0 8px 24px rgba(21,22,22,.06);

  --halle:#151616;          /* dunkles Band: die Werkshalle */
  --halle-2:#1e1f20;
  --halle-linie:#32302f;
  --halle-text:#e8e4e5;
  --halle-grau:#9a9698;

  --gut:#2e7d32;
  --warn:#b8860b;

  --masz:1200px;
  --radius:14px;}
/* ===================== Grundlagen ==================================== */
.tc-app.tc-app, .tc-app.tc-app *{box-sizing:border-box;}
.tc-app.tc-app{margin:0;background:var(--grund);color:var(--tinte);
  font-family:"TC Text",system-ui,sans-serif;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;}
.tc-app.tc-app h1, .tc-app.tc-app h2, .tc-app.tc-app h3, .tc-app.tc-app h4{font-family:"TC Schmal","Arial Narrow",system-ui,sans-serif;
  font-weight:700;line-height:1.03;letter-spacing:-.005em;text-wrap:balance;margin:0;}
.tc-app.tc-app p{margin:0;}
.tc-app.tc-app a{color:inherit;}
.tc-app.tc-app img{max-width:100%;display:block;}
.tc-app.tc-app code, .tc-app.tc-app .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.88em;font-variant-numeric:tabular-nums;}
.tc-app.tc-app .bahn{max-width:var(--masz);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);}
.tc-app.tc-app .eyebrow{font-family:"TC Schmal","Arial Narrow",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.19em;font-size:12.5px;color:var(--magenta-text);}
.tc-app.tc-app .lead{font-size:18.24px;line-height:1.6;color:var(--tinte-2);}
.tc-app.tc-app .still{color:var(--grau);}
.tc-app.tc-app .klein{font-size:13.76px;line-height:1.5;color:var(--grau);}
.tc-app.tc-app :where(a, button, summary, [tabindex]):focus-visible{outline:2.5px solid var(--magenta);outline-offset:3px;border-radius:4px;}
/* ===================== Hero ========================================== */
.tc-app.tc-app .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--linie);}
.tc-app.tc-app .hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);
  align-items:center;padding-block:clamp(48px,7vw,86px);}
@media(max-width:900px){
.tc-app.tc-app .hero-in{grid-template-columns:1fr;}


}
.tc-app.tc-app .hero h1{font-size:clamp(46.4px,7.2vw,78.4px);letter-spacing:-.017em;}
.tc-app.tc-app .hero h1 em{font-style:normal;color:var(--magenta);}
.tc-app.tc-app .hero .lead{margin-top:20px;max-width:46ch;}
.tc-app.tc-app .hero-fakten{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.tc-app.tc-app .faktum{border:1px solid var(--linie);background:var(--grund-2);border-radius:999px;
  padding:6px 14px;font-size:13.5px;color:var(--tinte-2);}
.tc-app.tc-app .faktum b{font-weight:500;color:var(--tinte);}
/* Scanleiste: echte Codes aus dem Betrieb als QR-Code. Die Codes sind
   gueltig und lassen sich mit dem Handscanner ausprobieren - das ist die
   Sprache des Produkts, keine Dekoration. */
.tc-app.tc-app .scanleiste{margin-top:34px;border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--karte);box-shadow:var(--schatten);overflow:hidden;}
.tc-app.tc-app .scanleiste-kopf{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--linie);background:var(--grund-2);}
.tc-app.tc-app .scanleiste-kopf .eyebrow{font-size:11.5px;letter-spacing:.16em;}
.tc-app.tc-app .codes{display:flex;flex-wrap:wrap;gap:9px;padding:14px 16px 16px;}
.tc-app.tc-app .code-chip{display:grid;gap:7px;justify-items:center;padding:10px 10px 11px;
  border:1px solid var(--linie);background:var(--grund);border-radius:10px;
  cursor:pointer;font-family:inherit;color:inherit;
  transition:border-color .16s,transform .16s;}
.tc-app.tc-app .code-chip:hover{border-color:var(--magenta);transform:translateY(-1px);}
.tc-app.tc-app .code-chip[aria-pressed="true"]{border-color:var(--magenta);
  box-shadow:inset 0 0 0 1px var(--magenta);}
/* Der QR sitzt auf einer weissen Flaeche - auf dunklem Grund braeuchte der
   Scanner sonst ein Negativ. Die Ruhezone von vier Modulen steckt in der
   viewBox des SVG, nicht in diesem Innenabstand. */
.tc-app.tc-app .code-chip .qr{background:#fff;border-radius:5px;padding:3px;line-height:0;}
.tc-app.tc-app .code-chip .qr svg{display:block;width:88px;height:88px;}
.tc-app.tc-app .code-chip .wert{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  letter-spacing:.01em;color:var(--tinte);max-width:94px;overflow-wrap:anywhere;
  text-align:center;line-height:1.35;}
.tc-app.tc-app .code-deutung{padding:0 16px 15px;font-size:14px;color:var(--grau);min-height:2.9em;}
.tc-app.tc-app .code-deutung b{color:var(--tinte);font-weight:500;}
/* ===================== Gerät ========================================= */
.tc-app.tc-app .geraet{--rahmen:15px;position:relative;width:min(310px,80vw);margin-inline:auto;
  background:#1b1c1d;border-radius:30px;padding:var(--rahmen);
  box-shadow:0 2px 4px rgba(0,0,0,.28),0 26px 60px -18px rgba(21,22,22,.5);}
.tc-app.tc-app .geraet::before{content:"";position:absolute;inset:5px;border-radius:26px;
  border:1px solid #2f3031;pointer-events:none;}
.tc-app.tc-app .geraet-schirm{position:relative;border-radius:17px;overflow:hidden;
  background:#efefef;aspect-ratio:720/1280;}
.tc-app.tc-app .geraet-schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .34s ease;}
.tc-app.tc-app .geraet-schirm img.an{opacity:1;}
.tc-app.tc-app .geraet-fuss{display:flex;justify-content:center;gap:5px;margin-top:9px;}
.tc-app.tc-app .geraet-fuss i{width:22px;height:3px;border-radius:2px;background:#3a3b3c;}
.tc-app.tc-app .geraet-schild{position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;
  background:var(--magenta);color:#fff;font-family:"TC Schmal",sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;padding:4px 13px;
  border-radius:999px;white-space:nowrap;box-shadow:0 3px 10px rgba(230,0,126,.35);}
@media (prefers-reduced-motion:reduce){
.tc-app.tc-app, .tc-app.tc-app *{animation-duration:.001ms !important;transition-duration:.001ms !important;}


}
/* ===================== Werkshalle: der Weg des Materials ==============
   Die vier Stationen sind nummeriert, weil sie tatsächlich eine Reihen-
   folge sind: Material kommt ans Band, wird verbraucht, Arbeit wird
   gemeldet, der Auftrag geht fertig. ==================================== */
.tc-app.tc-app .halle{background:var(--halle);color:var(--halle-text);
  background-image:repeating-linear-gradient(90deg,var(--halle-linie) 0 1px,transparent 1px 92px);
  background-position:center;}
.tc-app.tc-app .halle-in{padding-block:clamp(56px,8vw,96px);}
.tc-app.tc-app .halle h2{font-size:clamp(33.6px,4.4vw,51.2px);color:#fff;}
.tc-app.tc-app .halle .lead{color:var(--halle-grau);max-width:56ch;margin-top:14px;}
/* Auf dem dunklen Band braucht auch die Auszeichnung den helleren Ton. */
.tc-app.tc-app .halle .eyebrow{color:#ff5cb0;}
.tc-app.tc-app .stationen{display:grid;gap:0;margin-top:clamp(34px,5vw,54px);}
.tc-app.tc-app .station{display:grid;grid-template-columns:64px 1fr minmax(0,268px);
  gap:clamp(18px,3vw,40px);align-items:start;
  padding-block:clamp(30px,4vw,44px);border-top:1px solid var(--halle-linie);}
.tc-app.tc-app .station:last-child{border-bottom:1px solid var(--halle-linie);}
@media(max-width:860px){
.tc-app.tc-app .station{grid-template-columns:46px 1fr;}
/* Auch die Huelle der Umbuchung umbrechen, nicht nur das nackte Bild -
     sonst bleibt sie in einer Spalte stehen, die es hier nicht mehr gibt,
     und die Reiter laufen ueber. */
.tc-app.tc-app .station .station-bild, .tc-app.tc-app .station .station-bild-huelle{grid-column:1/-1;max-width:268px;margin-top:6px;}


}
.tc-app.tc-app .station-nr{font-family:"TC Schmal",sans-serif;font-weight:700;font-size:clamp(35.2px,4vw,49.6px);
  line-height:.9;color:var(--halle-linie);font-variant-numeric:tabular-nums;}
.tc-app.tc-app .station[data-aktiv="ja"] .station-nr{color:var(--magenta);}
.tc-app.tc-app .station h3{font-size:clamp(22.72px,2.6vw,29.76px);color:#fff;}
.tc-app.tc-app .station .modul{display:inline-block;margin-top:9px;border:1px solid var(--halle-linie);
  color:var(--halle-grau);border-radius:999px;padding:3px 11px;font-size:12px;
  letter-spacing:.04em;}
.tc-app.tc-app .station p.was{margin-top:13px;color:var(--halle-grau);max-width:52ch;}
.tc-app.tc-app .station ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px;max-width:52ch;}
.tc-app.tc-app .station ol li{position:relative;padding-left:26px;font-size:15px;color:var(--halle-text);}
.tc-app.tc-app .station ol li::before{content:counter(schritt);counter-increment:schritt;
  position:absolute;left:0;top:.15em;width:17px;height:17px;border-radius:50%;
  background:var(--magenta);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;font-family:"TC Text",sans-serif;}
.tc-app.tc-app .station ol{counter-reset:schritt;}
.tc-app.tc-app .station ol li b{font-weight:500;color:#fff;}
.tc-app.tc-app .merke{margin-top:18px;border-left:2.5px solid var(--magenta);padding:9px 0 9px 14px;
  background:linear-gradient(90deg,rgba(230,0,126,.09),transparent 70%);
  max-width:52ch;font-size:14.5px;color:var(--halle-text);border-radius:0 6px 6px 0;}
.tc-app.tc-app .merke b{color:#fff;font-weight:500;}
.tc-app.tc-app .merke.blau{border-left-color:var(--blau);
  background:linear-gradient(90deg,rgba(122,205,238,.11),transparent 70%);}
.tc-app.tc-app .station-bild{position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--halle-linie);background:#000;}
.tc-app.tc-app .station-bild img{width:100%;display:block;}
.tc-app.tc-app .station-bild figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.82) 46%);
  color:#fff;font-size:12.5px;padding:26px 12px 10px;}
/* Umbuchung hat drei echte Bildschirme - als Reiter statt als Bilderwand. */
.tc-app.tc-app .reiter{display:flex;gap:6px;margin-bottom:9px;}
.tc-app.tc-app .reiter button{flex:1;background:transparent;border:1px solid var(--halle-linie);
  color:var(--halle-grau);border-radius:8px;padding:6px 4px;font-family:"TC Text",sans-serif;
  font-size:12px;cursor:pointer;transition:.15s;}
.tc-app.tc-app .reiter button:hover{border-color:var(--magenta);color:#fff;}
.tc-app.tc-app .reiter button[aria-selected="true"]{background:var(--magenta);border-color:var(--magenta);color:#fff;}
.tc-app.tc-app .reiter-bilder{position:relative;}
.tc-app.tc-app .reiter-bilder img{display:none;}
.tc-app.tc-app .reiter-bilder img.an{display:block;}
/* ===================== Helle Abschnitte ============================== */
.tc-app.tc-app .block{padding-block:clamp(52px,7vw,88px);}
.tc-app.tc-app .block+.block{border-top:1px solid var(--linie);}
.tc-app.tc-app .block.getoent{background:var(--grund-2);}
.tc-app.tc-app .block h2{font-size:clamp(31.2px,4vw,45.6px);}
.tc-app.tc-app .block>.bahn>.lead{margin-top:13px;max-width:58ch;}
.tc-app.tc-app .zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);
  margin-top:clamp(28px,4vw,44px);}
@media(max-width:800px){
.tc-app.tc-app .zwei{grid-template-columns:1fr;}


}
.tc-app.tc-app .karte{background:var(--karte);border:1px solid var(--karte-rand);border-radius:var(--radius);
  box-shadow:var(--schatten);overflow:hidden;display:flex;flex-direction:column;}
.tc-app.tc-app .karte-text{padding:22px 24px 24px;display:grid;gap:11px;}
.tc-app.tc-app .karte h3{font-size:22.08px;}
.tc-app.tc-app .karte p{font-size:15px;color:var(--tinte-2);}
/* Gleiche Spezifitaet wie .karte p, sonst gewinnt die Kartenregel und der
   Nebentext verliert sein helleres Grau. */
.tc-app.tc-app .karte p.klein{color:var(--grau);margin-top:2px;}
.tc-app.tc-app .karte-bilder{display:flex;gap:10px;padding:0 24px 24px;}
.tc-app.tc-app .karte-bilder img{width:112px;border-radius:9px;border:1px solid var(--linie);}
.tc-app.tc-app .liste{display:grid;gap:7px;margin:0;padding:0;list-style:none;}
.tc-app.tc-app .liste li{position:relative;padding-left:19px;font-size:15px;color:var(--tinte-2);}
.tc-app.tc-app .liste li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--magenta);}
/* Einrichtung: vier Bildschirme als Streifen */
.tc-app.tc-app .streifen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px);
  margin-top:clamp(26px,4vw,40px);}
@media(max-width:760px){
.tc-app.tc-app .streifen{grid-template-columns:repeat(2,1fr);}


}
.tc-app.tc-app .streifen figure{margin:0;display:grid;gap:9px;}
.tc-app.tc-app .streifen img{border-radius:11px;border:1px solid var(--linie);box-shadow:var(--schatten);}
.tc-app.tc-app .streifen figcaption{font-size:13px;color:var(--grau);text-align:center;}
/* Staerken im Alltag - ein Raster aus Hairline-Zellen, damit die Punkte
   als zusammengehoerige Liste lesen und nicht als acht Einzelkarten. */
.tc-app.tc-app .staerken{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:1px;margin-top:clamp(28px,4vw,44px);background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;}
.tc-app.tc-app .staerken div{background:var(--grund);padding:20px 22px 22px;display:grid;gap:7px;
  align-content:start;}
.tc-app.tc-app .staerken h4{font-size:16.96px;line-height:1.25;}
.tc-app.tc-app .staerken p{font-size:14.3px;color:var(--grau);}
/* Voraussetzungen - bewusst vor den Techniktabellen und optisch
   herausgehoben: Es ist eine kaufmaennische Bedingung, keine Fussnote. */
.tc-app.tc-app .voraussetzung{margin-top:clamp(24px,4vw,36px);border:1px solid var(--karte-rand);
  border-left:3px solid var(--magenta);border-radius:var(--radius);
  background:var(--karte);box-shadow:var(--schatten);padding:22px 24px 24px;}
.tc-app.tc-app .voraussetzung h3{font-size:20.48px;}
.tc-app.tc-app .voraussetzung>p{margin-top:8px;font-size:15px;color:var(--tinte-2);max-width:62ch;}
.tc-app.tc-app .voraussetzung ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;}
.tc-app.tc-app .voraussetzung li{display:grid;grid-template-columns:auto 1fr;gap:11px;
  align-items:baseline;font-size:15px;color:var(--tinte-2);}
.tc-app.tc-app .voraussetzung li b{color:var(--tinte);font-weight:500;}
.tc-app.tc-app .voraussetzung li::before{content:"";width:7px;height:7px;border-radius:2px;
  background:var(--magenta);transform:translateY(-1px);}
/* Technik */
.tc-app.tc-app .fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,3vw,30px);margin-top:clamp(26px,4vw,42px);}
.tc-app.tc-app .fakten dl{margin:0;display:grid;gap:10px;align-content:start;}
.tc-app.tc-app .fakten dt{font-family:"TC Schmal",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-text);}
.tc-app.tc-app .fakten dd{margin:0;font-size:15px;color:var(--tinte-2);}
.tc-app.tc-app .fakten dd+dd{margin-top:-4px;}
.tc-app.tc-app .fakten dd b{font-weight:500;color:var(--tinte);}
/* ===================== Knoepfe =======================================
   Die Landingpage kam ohne Handlungsaufforderung aus. Auf der Website
   braucht die Seite einen Abschluss, deshalb hier zwei schlichte Knoepfe
   im selben Raster wie die Karten. */
.tc-app.tc-app .knopf{display:inline-block;padding:13px 26px;border-radius:9px;
  background:var(--magenta);color:#fff;text-decoration:none;font-weight:500;
  font-size:15.5px;line-height:1.2;margin-right:10px;margin-bottom:10px;
  border:1px solid var(--magenta);}
.tc-app.tc-app .knopf:hover{background:#c40069;border-color:#c40069;color:#fff;}
.tc-app.tc-app .knopf-still{background:transparent;color:var(--tinte);border-color:var(--karte-rand);}
.tc-app.tc-app .knopf-still:hover{background:transparent;color:var(--magenta);border-color:var(--magenta);}
.tc-app.tc-app .knopf:focus-visible{outline:2.5px solid var(--magenta);outline-offset:3px;}


/* ===================== Platz fuer die Bahn ===========================
   Astra legt den Seiteninhalt in einen eigenen Container mit Hoechstbreite
   und Innenabstand. Die Landingpages bringen mit .bahn beides schon mit;
   uebereinander gelegt wird die Spalte deutlich schmaler als gedacht und
   die Hero-Ueberschrift bricht an unpassender Stelle um. Auf App-Seiten
   macht diese Regel den Theme-Container auf. Kopf- und Fusszeile haben
   ihre eigenen Container und bleiben unberuehrt. */
body.tc-app-seite #content > .ast-container{max-width:none;padding-left:0;padding-right:0;}

/* ===================== Uebersicht der Apps ===========================
   Die Seite /android-apps.../ fuehrt die Apps auf. Sie benutzt dieselben
   Karten wie die Produktseiten, braucht aber ein Raster fuer drei Stueck
   und einen gedaempften Zustand fuer das, was noch nicht fertig ist. */
.tc-app.tc-app .kopfblock{padding-block:clamp(46px,6vw,74px) 0;}
.tc-app.tc-app .kopfblock h1{font-size:clamp(41.6px,5vw,60.8px);}
.tc-app.tc-app .kopfblock .lead{margin-top:14px;max-width:60ch;}

.tc-app.tc-app .drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(18px,2.4vw,28px);margin-top:clamp(30px,4vw,46px);}
.tc-app.tc-app .karte-app{display:flex;flex-direction:column;}
/* Als Spalte statt Raster, damit der Knopf per margin-top:auto am unteren
   Rand steht. Die Karten sind unterschiedlich lang; ohne das haengen die
   Knoepfe auf drei verschiedenen Hoehen. */
.tc-app.tc-app .karte-app .karte-text{flex:1;display:flex;flex-direction:column;gap:11px;}
/* Der Bildschirm sitzt auf getoentem Grund, sonst schwimmt der helle
   Screenshot ohne Rahmen in der weissen Karte. */
.tc-app.tc-app .karte-schirm{margin:0;background:var(--grund-3);display:grid;
  place-items:end center;padding:22px 22px 0;min-height:292px;}
.tc-app.tc-app .karte-schirm img{width:150px;border-radius:11px 11px 0 0;
  border:1px solid var(--linie);border-bottom:0;display:block;}
.tc-app.tc-app .stand{font-family:"TC Schmal","Arial Narrow",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;font-size:11.5px;color:var(--magenta-text);}
.tc-app.tc-app .karte-app .knopf{margin-top:auto;align-self:start;}

/* Was noch nicht da ist, sieht auch so aus: keine Farbe, kein Knopf. */
.tc-app.tc-app .karte--bald{background:var(--grund-2);box-shadow:none;}
.tc-app.tc-app .karte--bald .stand{color:var(--grau);}
.tc-app.tc-app .karte--bald .karte-schirm{background:var(--grund-3);
  place-items:center;padding:22px;}
.tc-app.tc-app .karte--bald .platzhalter{font-family:"TC Schmal","Arial Narrow",sans-serif;
  font-weight:700;font-size:52px;color:var(--grau-still);opacity:.42;line-height:1;}
